diff --git a/yanzhu-bigscreen/public/index.html b/yanzhu-bigscreen/public/index.html index c97d6709..3b6e819f 100644 --- a/yanzhu-bigscreen/public/index.html +++ b/yanzhu-bigscreen/public/index.html @@ -25,6 +25,8 @@ + + diff --git a/yanzhu-bigscreen/public/js/echarts-liquidfill.min.js b/yanzhu-bigscreen/public/js/echarts-liquidfill.min.js new file mode 100644 index 00000000..8fe33e12 --- /dev/null +++ b/yanzhu-bigscreen/public/js/echarts-liquidfill.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("echarts")):"function"==typeof define&&define.amd?define(["echarts"],t):"object"==typeof exports?exports["echarts-liquidfill"]=t(require("echarts")):e["echarts-liquidfill"]=t(e.echarts)}(self,(function(e){return(()=>{"use strict";var t={245:(e,t,a)=>{a.r(t);var i=a(83);i.extendSeriesModel({type:"series.liquidFill",optionUpdated:function(){var e=this.option;e.gridSize=Math.max(Math.floor(e.gridSize),4)},getInitialData:function(e,t){var a=i.helper.createDimensions(e.data,{coordDimensions:["value"]}),r=new i.List(a,this);return r.initData(e.data),r},defaultOption:{color:["#294D99","#156ACF","#1598ED","#45BDFF"],center:["50%","50%"],radius:"50%",amplitude:"8%",waveLength:"80%",phase:"auto",period:"auto",direction:"right",shape:"circle",waveAnimation:!0,animationEasing:"linear",animationEasingUpdate:"linear",animationDuration:2e3,animationDurationUpdate:1e3,outline:{show:!0,borderDistance:8,itemStyle:{color:"none",borderColor:"#294D99",borderWidth:8,shadowBlur:20,shadowColor:"rgba(0, 0, 0, 0.25)"}},backgroundStyle:{color:"#E3F7FF"},itemStyle:{opacity:.95,shadowBlur:50,shadowColor:"rgba(0, 0, 0, 0.4)"},label:{show:!0,color:"#294D99",insideColor:"#fff",fontSize:50,fontWeight:"bold",align:"center",baseline:"middle",position:"inside"},emphasis:{itemStyle:{opacity:.8}}}});const r=i.graphic.extendShape({type:"ec-liquid-fill",shape:{waveLength:0,radius:0,radiusY:0,cx:0,cy:0,waterLevel:0,amplitude:0,phase:0,inverse:!1},buildPath:function(e,t){null==t.radiusY&&(t.radiusY=t.radius);for(var a=Math.max(2*Math.ceil(2*t.radius/t.waveLength*4),8);t.phase<2*-Math.PI;)t.phase+=2*Math.PI;for(;t.phase>0;)t.phase-=2*Math.PI;var i=t.phase/Math.PI/2*t.waveLength,r=t.cx-t.radius+i-2*t.radius;e.moveTo(r,t.waterLevel);for(var l=0,o=0;ol?(l*=2*e/n,n=2*e):(n*=2*e/l,l=2*e);var s=t?0:M-n/2,h=t?0:P-l/2;return a=i.graphic.makePath(S.slice(7),{},new i.graphic.BoundingRect(s,h,n,l)),t&&(a.x=-n/2,a.y=-l/2),a}if(I){var d=t?-e[0]:M-e[0],p=t?-e[1]:P-e[1];return i.helper.createSymbol("rect",d,p,2*e[0],2*e[1])}return d=t?-e:M-e,p=t?-e:P-e,"pin"===S?p+=e:"arrow"===S&&(p-=e),i.helper.createSymbol(S,d,p,2*e,2*e)}return new i.graphic.Circle({shape:{cx:t?0:M,cy:t?0:P,r:e}})}function Y(){var t=E(w);return t.style.fill=null,t.setStyle(e.getModel("outline.itemStyle").getItemStyle()),t}function k(t,a,n){var o=I?u[0]:u,s=I?g/2:u,d=h.getItemModel(t),p=d.getModel("itemStyle"),c=d.get("phase"),v=l(d.get("amplitude"),2*s),f=l(d.get("waveLength"),2*o),y=s-h.get("value",t)*s*2;c=n?n.shape.phase:"auto"===c?t*Math.PI/4:c;var m=p.getItemStyle();if(!m.fill){var w=e.get("color"),b=t%w.length;m.fill=w[b]}var x=new r({shape:{waveLength:f,radius:o,radiusY:s,cx:2*o,cy:0,waterLevel:y,amplitude:v,phase:c,inverse:a},style:m,x:M,y:P});x.shape._waterLevel=y;var S=d.getModel("emphasis.itemStyle").getItemStyle();S.lineWidth=0,x.ensureState("emphasis").style=S,i.helper.enableHoverEmphasis(x);var L=E(u,!0);return L.setStyle({fill:"white"}),x.setClipPath(L),x}function q(e,t,a){var i=h.getItemModel(e),r=i.get("period"),n=i.get("direction"),l=h.get("value",e),o=i.get("phase");o=a?a.shape.phase:"auto"===o?e*Math.PI/4:o;var s,d;s="auto"===r?0===(d=h.count())?5e3:5e3*(.2+(d-e)/d*.8):"function"==typeof r?r(l,e):r;var p=0;"right"===n||null==n?p=Math.PI:"left"===n?p=-Math.PI:"none"===n?p=0:console.error("Illegal direction value for liquid fill."),"none"!==n&&i.get("waveAnimation")&&t.animate("shape",!0).when(0,{phase:o}).when(s/2,{phase:p+o}).when(s,{phase:2*p+o}).during((function(){T&&T.dirty(!0)})).start()}h.diff(D).add((function(t){var a=k(t,!1),r=a.shape.waterLevel;a.shape.waterLevel=I?g/2:u,i.graphic.initProps(a,{shape:{waterLevel:r}},e),a.z2=2,q(t,a,null),s.add(a),h.setItemGraphicEl(t,a),F.push(a)})).update((function(t,a){for(var r=D.getItemGraphicEl(a),l=k(t,!1,r),d={},p=["amplitude","cx","cy","phase","radius","radiusY","waterLevel","waveLength"],u=0;u{t.exports=e}},a={};function i(e){if(a[e])return a[e].exports;var r=a[e]={exports:{}};return t[e](r,r.exports,i),r.exports}return i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i(245)})()})); +//# sourceMappingURL=echarts-liquidfill.min.js.map \ No newline at end of file diff --git a/yanzhu-bigscreen/src/api/bim.js b/yanzhu-bigscreen/src/api/bim.js index 8764e0c9..ad9c8c5a 100644 --- a/yanzhu-bigscreen/src/api/bim.js +++ b/yanzhu-bigscreen/src/api/bim.js @@ -44,10 +44,19 @@ const devIotBimData=query=>{ }) } +//根据项目ID获取计划完成率 +const getRootScheduleNode=query=>{ + return request({ + url: "/manage/api/plan/getRootScheduleNode", + method: "get", + params: query, + }) +} export default{ listBimModel, devicePositionGet, devTowerBimData, videoMonitorBimData, - devIotBimData + devIotBimData, + getRootScheduleNode } \ No newline at end of file diff --git a/yanzhu-bigscreen/src/assets/icons/svg/group2.svg b/yanzhu-bigscreen/src/assets/icons/svg/group2.svg new file mode 100644 index 00000000..b1943c52 --- /dev/null +++ b/yanzhu-bigscreen/src/assets/icons/svg/group2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yanzhu-bigscreen/src/assets/icons/svg/money2.svg b/yanzhu-bigscreen/src/assets/icons/svg/money2.svg new file mode 100644 index 00000000..bd41d2c2 --- /dev/null +++ b/yanzhu-bigscreen/src/assets/icons/svg/money2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yanzhu-bigscreen/src/assets/icons/svg/percent.svg b/yanzhu-bigscreen/src/assets/icons/svg/percent.svg new file mode 100644 index 00000000..021fa893 --- /dev/null +++ b/yanzhu-bigscreen/src/assets/icons/svg/percent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yanzhu-bigscreen/src/assets/icons/svg/tools.svg b/yanzhu-bigscreen/src/assets/icons/svg/tools.svg new file mode 100644 index 00000000..99f296ab --- /dev/null +++ b/yanzhu-bigscreen/src/assets/icons/svg/tools.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yanzhu-bigscreen/src/assets/icons/svg/warn.svg b/yanzhu-bigscreen/src/assets/icons/svg/warn.svg new file mode 100644 index 00000000..2357e462 --- /dev/null +++ b/yanzhu-bigscreen/src/assets/icons/svg/warn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yanzhu-bigscreen/src/views/bim/001.png b/yanzhu-bigscreen/src/views/bim/001.png new file mode 100644 index 00000000..f992ef90 Binary files /dev/null and b/yanzhu-bigscreen/src/views/bim/001.png differ diff --git a/yanzhu-bigscreen/src/views/bimManage.vue b/yanzhu-bigscreen/src/views/bimManage.vue index 5d1a0892..6522d227 100644 --- a/yanzhu-bigscreen/src/views/bimManage.vue +++ b/yanzhu-bigscreen/src/views/bimManage.vue @@ -11,41 +11,81 @@ 项目概况 -
-
{{prj.floorArea}}
-
建筑面积:单位(平方米)
+
+
+
{{ prj.floorArea }}
+
建筑面积:单位(平方米)
+
+ + + + + + + + + + + + + + + + + + + + + +
项目名称{{ prj.projectName }}
建设单位{{ prj.constructionUnit }}
总包单位{{ prj.packageUnit }}
开工日期{{ prj.startDate | toDate }}
计划完工日期{{ prj.endDate | toDate }}
- - - - - - - - - - - - - - - - - - - - - -
项目名称{{prj.projectName}}
建设单位{{prj.constructionUnit}}
总包单位{{prj.packageUnit}}
开工日期{{prj.startDate}}
计划完工日期{{prj.endDate}}
成本产值
+
+
+
+
总投资(万元)
+
{{ prj.totalCost }}
+
+
+
年度投资(万元)
+
{{ prj.annualCost }}
+
+
+
本月完成(万元)
+
{{ prj.monthCost }}
+
+
+
开累完成(万元)
+
{{ prj.accumulatedCost }}
+
+
+
+ +
+
+
人员
+
+
+
+
+
{{ wk.value }}
+
+
+
+
+ +
{{ wk.text }}
+
+
+
@@ -59,15 +99,95 @@ 工程进度 +
+
+ +
计划完成
+
+
+ +
实际完成
+
+
安全检查
+
+
+ +
+ +
+
+
888
+
问题数
+
+
+
+ +
+ +
+
+
888
+
整改数
+
+
+
+ +
+ +
+
+
888
+
整改率
+
+
+
+ +
+ +
+
+
888
+
超时数
+
+
+
项目全景
+ +
+ + +
@@ -125,17 +245,16 @@ -
-
- -
- - - - - - - +
+
+
+
电压电流功率
+ + + + + + @@ -148,18 +267,17 @@ - + -
电压电流功率
A向 12 3
A向 1 2 3
- -
- - +
+ + +
@@ -227,10 +345,10 @@ const css = ``; import debounce from "lodash.debounce"; -import videoDialog from './bim/videoDialog.vue' +import videoDialog from "./bim/videoDialog.vue"; export default { components: { - videoDialog + videoDialog, }, data() { return { @@ -249,14 +367,26 @@ export default { rightSrc: "./bimImages/arrow_right_retract.png", leftShow: true, towerWarning: [], - prj:{ - floorArea:0, - projectName:'', - constructionUnit:'', - packageUnit:'', - startDate:'', - endDate:'', - } + prjInfo: null, + costOutData: null, + prj: { + floorArea: 0, + projectName: "", + constructionUnit: "", + packageUnit: "", + startDate: "", + endDate: "", + totalCost: 0, + annualCost: 0, + monthCost: 0, + accumulatedCost: 0, + }, + workerInfo: [], + chart1Key: 0, + chart2Key: 10000, + planFinishRate: 0, + finishRate: 0, + photographyList: [], }; }, beforeDestroy() { @@ -274,9 +404,9 @@ export default { "projectChange", debounce((prj) => { this.selProject = prj; - this.updateProjectInfo(); this.elId++; this.initEngine(); + this.updateProjectInfo(); }) ); this.selProject = this.$store.getters.selProject; @@ -289,9 +419,143 @@ export default { }); }, methods: { - updateProjectInfo(){ - this.prj.floorArea=this.selProject?.floorArea||0; - console.log(this.selProject) + renderChart1() { + return this.renderChart(0); + }, + renderChart2() { + return this.renderChart(1); + }, + renderChart(n) { + let opt = { + tooltip: { + show: true, + formatter: function(params){ + return params.seriesName + "
"+params.marker + (params.value * 100).toFixed(2) + "%"; + }, + }, + series: [ + { + type: "liquidFill", + data: [n == 0 ? this.planFinishRate : this.finishRate], + name: n == 0 ? "计划完成" : "实际完成", + color: [n==0?"orange":"#47D89F"], //颜色 + //波浪动画效果 + waveAnimation: true, + animationEasingUpdate: "quinticInOut", + backgroundStyle: { + borderWidth: 2, + borderColor: "#156ACF", + }, + radius: "70%", + outline: { + show: false, + }, + label:{ + fontSize: 20, + formatter: function (param) { + return (param.value*100).toFixed(2) + "%"; + }, + } + }, + ], + }; + return opt; + }, + updateProjectInfo() { + if (!this.selProject) { + return; + } + this.getProjectInfo(); + this.costOutputSelectYearAndMonth(); + this.groupByCraftType(); + this.getRootScheduleNode(); + this.getFinishRate(); + this.selectLastPhotography(); + }, + selectLastPhotography() { + this.$api.detail.photographyList(this.selProject.id).then((d) => { + this.photographyList = d.data; + }); + }, + getFinishRate() { + this.$api.planSchedule.findAllPlanDatas(this.selProject.id).then((res) => { + let _ywcjhs = []; + + res.data.forEach((item) => { + if (item.taskStatus == "zcwc" || item.taskStatus == "zhwc") { + _ywcjhs.push(item); + } + }); + + this.finishRate = (_ywcjhs.length / res.data.length).toFixed(4); + this.chart2Key++; + }); + }, + getProjectInfo() { + this.$api.project.getProjectInfo(this.selProject.id).then((d) => { + this.prjInfo = d.data || {}; + let tmps = this.prjInfo.projectDeptsList || []; + const func = (t) => { + let obj = tmps.find((it) => it.deptType == t); + return obj ? obj : {}; + }; + + this.prj.floorArea = this.prjInfo.floorArea || 0; + this.prj.projectName = this.prjInfo.projectName || ""; + + this.prj.constructionUnit = func("建设单位").deptName; + this.prj.packageUnit = this.prjInfo.disDeptName; + this.prj.startDate = this.prjInfo.actualOperatingTime; + this.prj.endDate = this.prjInfo?.plannedCompletionTime || ""; + }); + }, + costOutputSelectYearAndMonth() { + let dt = this.$dt(new Date()); + this.$api.detail + .costOutputSelectYearAndMonth({ + comId: this.selProject.comId, + projectId: this.selProject.id, + year: dt.$y, + month: dt.$M + 1, + }) + .then((d) => { + this.costOutData = d; + this.prj.totalCost = d.totalInv || 0; + this.prj.annualCost = d.totalYear || 0; + this.prj.monthCost = d.curMonth || 0; + this.prj.accumulatedCost = d.totalMonth || 0; + }); + }, + groupByCraftType() { + let ajax = this.$api.detail.groupByCraftType; + let posData = { + comId: this.selProject.comId, + projectId: this.selProject.id, + }; + ajax(posData).then((d) => { + this.workerInfo = (d.data || []) + .map((it) => { + return { + text: it.createBy, + value: it.id || 0, + id: it.craftType, + }; + }) + .sort((a, b) => { + return b.id - a.id; + }); + }); + }, + getRootScheduleNode() { + this.$api.bim + .getRootScheduleNode({ + projectId: this.selProject.id, + }) + .then((d) => { + let objs = d.data || []; + this.planFinishRate = objs.length > 0 ? ((objs[0].scheduleNode || 0) / 100.0).toFixed(4) : 0; + this.chart1Key++; + }); }, arrowRetract() { if (this.leftShow == true) { @@ -310,6 +574,9 @@ export default { }, loadDevicePosition() { + if (!this.selProject) { + return; + } this.$api.bim .devicePositionGet({ projectId: this.selProject.id, @@ -317,6 +584,7 @@ export default { .then((res) => { let cnt = 0; this.devices = (res.data || []) + .filter((item) => item.enabled != 0) .map((item) => { item.show = item.enabled != 0; item.position = this.$tryToJson(item.position, []); @@ -370,9 +638,9 @@ export default { this.addLabels.push(item.elId); }, deviceClick(item, opt) { - if(item.deviceType==1){ - let obj=this.videoData.find(d=>d.id==item.deviceId) - this.$refs.videoDlg.showDialog(item,obj) + if (item.deviceType == 1) { + let obj = this.videoData.find((d) => d.id == item.deviceId); + this.$refs.videoDlg.showDialog(item, obj); return; } console.log(item, opt); @@ -576,18 +844,17 @@ export default { ` ); }, - fmtData(item){ - if(item){ - return (item*1).toFixed(2) + fmtData(item) { + if (item) { + return (item * 1).toFixed(2); } - return "" + return ""; }, getIotHtml(item) { let txtHtml = ""; if (item.elId) { txtHtml = ``; } else { - txtHtml = ` @@ -765,7 +1032,230 @@ export default { } } } + .prj-info { + padding: 20px; + .base-info { + .floor-area { + color: #b0cfff; + font-weight: 700; + font-size: 40px; + } + .floor-area-text { + line-height: 40px; + } + } + .tb-prj { + border-collapse: collapse; + width: 100%; + td, + th { + border: solid 1px #6ea9ab68; + padding: 4px; + } + th { + color: #b0cfff; + } + } + } + .prj-worker { + height: calc(100% - 30px); + .worker-chart { + display: flex; + height: 50%; + .chart-item { + position: relative; + width: 33.33%; + height: 100%; + .chart-gif, + .chart-text { + left: 20px; + top: 20px; + width: 120px; + height: 120px; + } + .chart-text { + color: #3ffcff; + font-weight: 700; + font-size: 40px; + } + } + } + .worker-title { + display: flex; + height: 50%; + .title-item { + flex: 1; + display: flex; + flex-flow: column; + align-items: center; + padding: 10px 0px 10px 0px; + .svg-icon { + fill: #3ffcff; + width: 80px; + height: 80px; + } + color: #3ffcff; + } + } + } + .investment-stats-cost { + margin: 0 auto; + padding: 30px 20px; + top: -18px; + position: relative; + + .stats-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 24px; + position: relative; + } + .stat-card { + background: linear-gradient(45deg, #122463, #0e79c969); + padding: 16px 0; + text-align: center; + color: #fff; + position: relative; + z-index: 1; + box-shadow: 0 2px 8px #0004; + border: solid 1px #22d0d2; + border-radius: 10px; + } + .stat-title { + font-size: 16px; + color: #b0cfff; + margin-bottom: 8px; + } + .stat-value { + font-size: 40px; + font-weight: bold; + color: #3ffcff; + } + .center-icon { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: #112244; + border: 2px dashed #3ffcff; + border-radius: 50%; + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + font-size: 32px; + color: #3ffcff; + box-shadow: 0 0 12px #3ffcff55; + pointer-events: none; + .chart-gif { + width: 70px; + height: 70px; + top: 5px; + left: 5px; + } + } + } + .plan-chart { + height: calc(100% - 30px); + .chart-item { + position: relative; + flex-grow: 1; + display: inline-block; + width: 49%; + height: 100%; + .chart-data { + top: -10px; + } + .chart-title { + position: relative; + top: -40px; + text-align: center; + } + } + } + .photography-list { + height: calc(100% - 30px); + padding: 10px 0px; + .el-carousel { + height: calc(100% - 10px); + } + + .photography-video { + width: 100%; + height: calc(100% - 30px); + } + + .photography-list-title { + line-height: 20px; + text-align: center; + } + .photography-list-nodata { + background: rgba(255, 255, 255, 0.2); + width: 80%; + height: 80%; + margin-left: 10%; + margin-top: 6%; + display: flex; + align-items: center; + justify-content: center; + flex-flow: column; + + .video-play { + width: 80px; + height: 80px; + display: inline-block; + background: rgba(0, 0, 0, 0.4); + line-height: 80px; + text-align: center; + border-radius: 40px; + margin-bottom: 12px; + } + + .photography-list-no-title { + color: rgba(255, 255, 255, 0.2); + } + } + } + .warn-info{ + height: calc(100% - 30px); + .warn-item{ + display: inline-flex; + width:50%; + height:50%; + justify-content: center; + align-items: center; + .czz-number-img{ + width:80px; + height: 80px; + line-height: 80px; + .svg-icon{ + width: 40px; + height: 40px; + fill: #5cc0eb; + position: relative; + top:12px; + &.red{ + fill: red; + } + &.green{ + fill: #00e900; + } + } + } + .warn-data{ + margin-left:10px; + .warn-data-val{ + font-size:30px; + font-weight: 700; + color: #22d0d2; + } + } + } + } .test-box { position: absolute; top: 10px; @@ -778,14 +1268,14 @@ export default { align-items: center; } .tag-img { - width: 20px; - height: 20px; - position: absolute; - left:50%; - bottom:18px; - margin-left:-10px; + width: 20px; + height: 20px; + position: absolute; + left: 50%; + bottom: 18px; + margin-left: -10px; } - .tag-bg-img{ + .tag-bg-img { width: 16px; height: 80px; } @@ -801,12 +1291,12 @@ export default { background: #097fca63; border: solid 1px #75fbfdaa; } - .tb-power{ + .tb-power { border-collapse: collapse; } - .tb-power td{ - border:solid 1px #75fbfd33; - padding:4px 8px; + .tb-power td { + border: solid 1px #75fbfd33; + padding: 4px 8px; } } }