350 lines
13 KiB
JavaScript
350 lines
13 KiB
JavaScript
import Vue from 'vue'
|
|
var vms = Vue.component("amplify-gqgk", {
|
|
template: `
|
|
<div>
|
|
<div class="amplify-title-icon">
|
|
<img src="/cdn/images/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-pcd-duration-survey-max">
|
|
<div class="amplify-pcd-duration-survey">
|
|
<div class="amplify-pcd-duration-survey-left">
|
|
<div class="amplify-glr-title">合同工期</div>
|
|
<div style="display: flex;align-items: center">
|
|
<div class="amplify-people-number-con" style="margin-left: 30px">
|
|
<div v-for="item in people" v-html="item"></div>
|
|
</div>
|
|
<div v-if="unit" style="">{{unit}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="amplify-pcd-duration-survey-time">
|
|
2022-09-01 至 2024-08-21
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 数据百分比展示-->
|
|
<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>
|
|
</transition>
|
|
</div>
|
|
`,
|
|
props: {},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
people: [],
|
|
number: 720,
|
|
unit: '天',
|
|
shiJiPro:0,
|
|
timePro:0,
|
|
text:'时间进度',
|
|
text1:'实际产值进度',
|
|
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
openAmplify() {
|
|
this.show = true
|
|
this.setData()
|
|
this.gainProBase()
|
|
},
|
|
closeAmplify() {
|
|
this.show = false
|
|
},
|
|
closeAmplifyAll(e) {
|
|
if (e.target.className == 'amplify-fixed') {
|
|
this.show = false
|
|
}
|
|
},
|
|
setData() {
|
|
var people = this.number != undefined ? this.number.toString().split('') : 0;
|
|
this.people = people
|
|
},
|
|
//数据接口
|
|
gainProBase() {
|
|
axios.post("/api/building/proBaseInfo?projectId=" + this.projectId).then(res => {
|
|
if(res.data.code == "200") {
|
|
this.shiJiPro = parseInt((res.data.data.kailei_money / 67640 * 100).toFixed(0))
|
|
this.timePro = parseInt(((moment().diff(moment(res.data.data.actual_start_date), 'days') / 720) * 100).toFixed(0))
|
|
}
|
|
this.getChartData()
|
|
this.getChartData1()
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
//数据展示图1
|
|
getChartData(){
|
|
var chChartBar = echarts.init(this.$refs.chart1);
|
|
this.echartBar(chChartBar,this.timePro,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: "30%",
|
|
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;
|
|
})
|
|
},
|
|
//数据展示图2
|
|
getChartData1(){
|
|
var chChartBar = echarts.init(this.$refs.chart2);
|
|
this.echartBar(chChartBar,this.shiJiPro,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: "30%",
|
|
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: {},
|
|
|
|
})
|
|
|
|
|