370 lines
13 KiB
JavaScript
370 lines
13 KiB
JavaScript
var vms = Vue.component("Company-amplify-ndczwcjd", {
|
|
template: `
|
|
<div>
|
|
<div class="amplify-title-icon">
|
|
<img src="https://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
|
</div>
|
|
<transition name="el-zoom-in-top">
|
|
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
|
<div class="amplify-max">
|
|
<div class="amplify-title">
|
|
<div>年度产值完成进度</div>
|
|
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
|
</div>
|
|
<div class="amplify-content">
|
|
<!--内容区域-->
|
|
|
|
<div class="amplify-project-number" style="padding: 35px 0">
|
|
<div>计划产值：<span v-cloak>50.86</span>亿</div>
|
|
<div>实际产值：<span v-cloak>30.74</span>亿</div>
|
|
</div>
|
|
|
|
<!-- <div style="border: 1px solid red;height: 400px">-->
|
|
<!-- <el-row>-->
|
|
<!-- <el-col :span="12">-->
|
|
<!-- <norm-pie-small :value="Number(timeNum)" text="时间进度"></norm-pie-small>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="12">-->
|
|
<!-- <norm-pie-small :value="Number(ActualNum)" text="实际产值进度"></norm-pie-small>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
<!-- </div>-->
|
|
|
|
<div style="margin-top: 80px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div class="amplify-row-circle" ref="chart1"></div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="amplify-row-circle" ref="chart2"></div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
`,
|
|
props: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
show:false,
|
|
timeNum:0,
|
|
ActualNum:46,
|
|
text:'时间进度',
|
|
text1:'实际产值进度'
|
|
}
|
|
},
|
|
mounted(){
|
|
this.GetDateDiff("day")
|
|
},
|
|
methods: {
|
|
openAmplify(){
|
|
this.show = true
|
|
this.getChartData()
|
|
this.getChartData1()
|
|
},
|
|
closeAmplify(){
|
|
this.show = false
|
|
},
|
|
closeAmplifyAll(e){
|
|
if(e.target.className == 'amplify-fixed'){
|
|
this.show = false
|
|
}
|
|
},
|
|
|
|
GetDateDiff(diffType) {
|
|
//将计算间隔类性字符转换为小写
|
|
diffType = diffType.toLowerCase();
|
|
let sTime = new Date('2023-01-01'); //开始时间
|
|
let eTime = new Date(); //结束时间
|
|
|
|
if (sTime > eTime) {
|
|
alert("开始时间不能大于结束时间!!!");
|
|
return false;
|
|
}
|
|
//作为除数的数字
|
|
let divNum = 1;
|
|
switch (diffType) {
|
|
case "second":
|
|
divNum = 1000;
|
|
break;
|
|
case "minute":
|
|
divNum = 1000 * 60;
|
|
break;
|
|
case "hour":
|
|
divNum = 1000 * 3600;
|
|
break;
|
|
case "day":
|
|
divNum = 1000 * 3600 * 24;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
let ts = parseInt((eTime.getTime() - sTime.getTime()) / parseInt(divNum));
|
|
this.timeNum = ((ts / 365) * 100).toFixed(2)
|
|
},
|
|
|
|
//数据展示图1
|
|
getChartData(){
|
|
var chChartBar = echarts.init(this.$refs.chart1);
|
|
this.echartBar(chChartBar,this.timeNum,this.text)
|
|
},
|
|
echartBar(chChart,value,text){
|
|
let newPromise = new Promise((resolve) => {
|
|
resolve()
|
|
})
|
|
//然后异步执行echarts的初始化函数
|
|
newPromise.then(() => {
|
|
var placeHolderStyle = {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
},
|
|
emphasis: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
},
|
|
};
|
|
|
|
var dataStyle = {
|
|
|
|
};
|
|
this.option ={
|
|
title: [
|
|
{
|
|
text: value+'%',
|
|
textAlign: "center",
|
|
left: "48%",
|
|
top: "50%",
|
|
textStyle: {
|
|
color: "#67abf2",
|
|
fontSize: 23,
|
|
},
|
|
},
|
|
{
|
|
text: text,
|
|
left: "48%",
|
|
top: "140%",
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: "#cdd7fa",
|
|
fontWeight: "normal",
|
|
fontSize: "16",
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
hoverAnimation: false,
|
|
radius: ["60%", "59%"],
|
|
center: ["50%", "40%"],
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#255788",
|
|
},
|
|
},
|
|
},
|
|
|
|
],
|
|
},
|
|
{
|
|
type: "pie",
|
|
hoverAnimation: false,
|
|
radius: ["53%", "60%"],
|
|
center: ["50%", "40%"],
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: value,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#68a8f2",
|
|
},
|
|
},
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
value: 100-value,
|
|
itemStyle: placeHolderStyle,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
chChart.setOption(this.option);
|
|
window.onresize = chChart.resize;
|
|
})
|
|
},
|
|
|
|
//数据展示图2
|
|
getChartData1(){
|
|
var chChartBar = echarts.init(this.$refs.chart2);
|
|
this.echartBar(chChartBar,this.ActualNum,this.text1)
|
|
},
|
|
echartBar(chChart,value,text){
|
|
let newPromise = new Promise((resolve) => {
|
|
resolve()
|
|
})
|
|
//然后异步执行echarts的初始化函数
|
|
newPromise.then(() => {
|
|
var placeHolderStyle = {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
},
|
|
emphasis: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0,
|
|
},
|
|
};
|
|
|
|
var dataStyle = {
|
|
|
|
};
|
|
this.option ={
|
|
title: [
|
|
{
|
|
text: value+'%',
|
|
textAlign: "center",
|
|
left: "48%",
|
|
top: "36%",
|
|
textStyle: {
|
|
color: "#67abf2",
|
|
fontSize: 23,
|
|
},
|
|
},
|
|
{
|
|
text: text,
|
|
left: "48%",
|
|
top: "80%",
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: "#cdd7fa",
|
|
fontWeight: "normal",
|
|
fontSize: "16",
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
hoverAnimation: false,
|
|
radius: ["60%", "59%"],
|
|
center: ["50%", "40%"],
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#255788",
|
|
},
|
|
},
|
|
},
|
|
|
|
],
|
|
},
|
|
{
|
|
type: "pie",
|
|
hoverAnimation: false,
|
|
radius: ["53%", "60%"],
|
|
center: ["50%", "40%"],
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: value,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#68a8f2",
|
|
},
|
|
},
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
value: 100-value,
|
|
itemStyle: placeHolderStyle,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
chChart.setOption(this.option);
|
|
window.onresize = chChart.resize;
|
|
})
|
|
},
|
|
|
|
|
|
},
|
|
watch:{
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|