|
@@ -0,0 +1,949 @@
|
|
|
+<template>
|
|
|
+<div class="widget-PersonWorkbench">
|
|
|
+ <div class="head-info">
|
|
|
+ <div class="project-item">
|
|
|
+ <span class="projectInfo">{{projectName==''?"岳阳水环境":projectName}}施工情况综合信息展示{{titleDate}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="condition-item">
|
|
|
+ <span>工程:</span>
|
|
|
+ <project-tree
|
|
|
+ @changeProjectName="changeProjectName($event)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="condition-item">
|
|
|
+ <span>单位:</span>
|
|
|
+ <el-select v-model="unit" filterable placeholder="请选择单位(或输入搜索)" size="mini" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in unitOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="time-item">
|
|
|
+ <el-row style="display:flex;align-items:center">
|
|
|
+ <el-col :span="4">
|
|
|
+ <span>日期:</span>
|
|
|
+ </el-col>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="~"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ size="mini">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="operation-item">
|
|
|
+ <el-button type="primary" size="mini">查询</el-button>
|
|
|
+ <el-button type="primary" size="mini">重置</el-button>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="statistic-panel">
|
|
|
+ <div class="head-container">
|
|
|
+ <span class="span-bg"></span>
|
|
|
+ <span class='span-name'>施工统计</span>
|
|
|
+ </div>
|
|
|
+ <div class="statistic">
|
|
|
+ <div class="term term-project" >
|
|
|
+ <div class="chart-container sggcPercent" id='sggcPercent'>
|
|
|
+ </div>
|
|
|
+ <div class="sta">
|
|
|
+ <div class="num">{{workbenchProjectNum}}</div>
|
|
|
+ <div>施工工程</div>
|
|
|
+ </div>
|
|
|
+ <div class="tooltiptext">
|
|
|
+ <span>工程施工率:{{sgbfb}}%</span>
|
|
|
+ <div>{{termDate}}</div>
|
|
|
+ <div>共计{{sgzs}}个管网工程</div>
|
|
|
+ <div>施工工程{{sgs}}个</div>
|
|
|
+ <div>工程施工率{{sgbfb}}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="term term-codeparamater">
|
|
|
+ <div class="chart-container smrsPercent" id='smrsPercent'>
|
|
|
+ </div>
|
|
|
+ <div class="sta">
|
|
|
+ <div class="num workbench-scancode-num">{{scanNum}}</div>
|
|
|
+ <div>扫码人数</div>
|
|
|
+ </div>
|
|
|
+ <div class="tooltiptext">
|
|
|
+ <span>用户系统使用率:{{smbfb}}%</span>
|
|
|
+ <div>{{termDate}}</div>
|
|
|
+ <div>已开通施工、监理账号{{smzs}}个</div>
|
|
|
+ <div>有{{sms}}个人上传过扫码数据</div>
|
|
|
+ <div>占比{{smbfb}}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="term term-parts">
|
|
|
+ <div class="chart-container smbjPercent" id='smbjPercent'>
|
|
|
+ </div>
|
|
|
+ <div class="sta">
|
|
|
+ <div class="num workbench-scanprat-num">{{scanPartsNum}}</div>
|
|
|
+ <div>扫码部件</div>
|
|
|
+ </div>
|
|
|
+ <div class="tooltiptext">
|
|
|
+ <span>扫码百分比:{{smbjbfb}}%</span>
|
|
|
+ <div>{{termDate}}</div>
|
|
|
+ <div>设计管网部件共计{{smbjzs}}个</div>
|
|
|
+ <div>有{{smbjs}}个部件上传过扫码数据</div>
|
|
|
+ <div>占比{{smbjbfb}}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="term term-pictures">
|
|
|
+ <div class="chart-container sjsgPercent" id='sjsgPercent'>
|
|
|
+ </div>
|
|
|
+ <div class="sta-bd">
|
|
|
+ <div class="bd-item">
|
|
|
+ <span class="num workbench-sg-num">{{sgnum}}</span>
|
|
|
+ <span>施工(公里)</span>
|
|
|
+ </div>
|
|
|
+ <div class="split-line"></div>
|
|
|
+ <div class="bd-item">
|
|
|
+ <span class="num workbench-sj-num">{{sjnum}}</span>
|
|
|
+ <span>设计(公里)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tooltiptext">
|
|
|
+ <span>施工里程百分比:{{sjsgbfb}}%</span>
|
|
|
+ <div>{{termDate}}</div>
|
|
|
+ <div>设计管网长度共计{{sjsgzs}}公里</div>
|
|
|
+ <div>有{{sjsgs}}公里管网施工</div>
|
|
|
+ <div>占比{{sjsgbfb}}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="term term-supplier">
|
|
|
+ <div class="chart-container gcPercent" id='gcPercent'>
|
|
|
+ </div>
|
|
|
+ <div class="sta">
|
|
|
+ <div>
|
|
|
+ <span class="num workbench-suplier-num">{{suplierNUm}}</span>家
|
|
|
+ <span class="num">/</span>
|
|
|
+ <span class="num workbench-batch-num">{{batchNum}}</span>批次
|
|
|
+ </div>
|
|
|
+ <div>管材<span class="workbench-batch-length" style="font-weight: bold">{{lengthTotal}}</span>(公里)</div>
|
|
|
+ </div>
|
|
|
+ <div class="tooltiptext">
|
|
|
+ <span>管材供货使用率:{{ghbfb}}%</span>
|
|
|
+ <div>{{termDate}}</div>
|
|
|
+ <div>共计{{ghsj}}家材料商送货{{ghpc}}批次</div>
|
|
|
+ <div>共计{{ghzs}}公里管材</div>
|
|
|
+ <div>已施工{{ghs}}公里</div>
|
|
|
+ <div>则管材供货使用率为{{ghbfb}}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistic-container">
|
|
|
+ <div class="chart-container">
|
|
|
+ <div class="head-container">
|
|
|
+ <span class="span-bg"></span>
|
|
|
+ <span class='span-name'>在建工程情况</span>
|
|
|
+ <el-tooltip class="span-chart" effect="dark" content="统计图表" placement="top">
|
|
|
+ <img class="img" src="@/assets/icon/chart.png" @click="isChart=true">
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="span-list" effect="dark" content="信息表格" placement="top">
|
|
|
+ <img class="img" src="@/assets/icon/list.png" @click="isChart=false"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-radio-group class="span-radio" v-model="projectType" v-show="!isChart">
|
|
|
+ <el-radio label="projectName">按工程</el-radio>
|
|
|
+ <el-radio label="singleProject">按单项工程</el-radio>
|
|
|
+ <el-radio label="unitName">按单位工程</el-radio>
|
|
|
+ <el-radio label="childUnitName">按子单位工程</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="content-container">
|
|
|
+ <div class="chartRegion" v-show="isChart">
|
|
|
+ <div class="chart-containter-left-top"><span>管材到货与使用情况对比分析图</span></div>
|
|
|
+ <tube-stock :data="resultData" />
|
|
|
+ </div>
|
|
|
+ <div class="infoRegion" v-show="isChart">
|
|
|
+ <div class="chart-containter-right-top">
|
|
|
+ <div class='sginfoTitle'><span>每日施工部件个数与扫码次数分析图</span></div>
|
|
|
+ <div class="sginfo">
|
|
|
+ <div class="sginfo-left">
|
|
|
+ <div class="sginfo-left-top"><span class="sgts">{{sgts}}</span><span class="sgtsdw">天</span></div>
|
|
|
+ <div class="sginfo-left-bottom"><span>施工天数</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="sginfo-right">
|
|
|
+ <div class="sginfo-right-top">
|
|
|
+ <label>扫码共计:</label><span>{{smgj}}</span><label>次</label><span>其中施工单位:</span><span>{{sgsm}}</span><label>次</label><span>监理:</span><span>{{jlsm}}</span><label>次</label>
|
|
|
+ </div>
|
|
|
+ <div class="sginfo-right-bottom">
|
|
|
+ <label>上传照片:</label><span>{{sczp}}</span><label>次</label><span>其中施工单位:</span><span>{{sgsc}}</span><label>次</label><span>监理:</span><span>{{jlsc}}</span><label>次</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <daily-build :data="resultData" />
|
|
|
+ </div>
|
|
|
+ <div v-show="!isChart" style="height:100%;width:98%">
|
|
|
+ <project-info-table :projectType="projectType" :searchDate="searchDate" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rank-container">
|
|
|
+ <scan-code-rank :data="resultData" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="photo-container">
|
|
|
+ <photo-list :data="resultData" />
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+import tubeStock from "./tubeStock.vue"
|
|
|
+import dailyBuild from "./dailyBuild.vue"
|
|
|
+import scanCodeRank from "./scanCodeRank.vue"
|
|
|
+import photoList from "./photoList.vue"
|
|
|
+import projectInfoTable from './projectInfoTable.vue'
|
|
|
+import projectTree from './projectTree.vue'
|
|
|
+export default {
|
|
|
+ name:'PersonWorkbench',//个人工作台
|
|
|
+ components:{
|
|
|
+ tubeStock,
|
|
|
+ dailyBuild,
|
|
|
+ scanCodeRank,
|
|
|
+ photoList,
|
|
|
+ projectInfoTable,
|
|
|
+ projectTree
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ //时间选择配置
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: '今天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime());
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ text: '近7天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近一个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '本年',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date(new Date().getFullYear(), 0);
|
|
|
+ // start.setTime(start.getTime());
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ value:[],
|
|
|
+ //项目信息
|
|
|
+ projectName:'',
|
|
|
+ //单位信息
|
|
|
+ unitOptions: [],
|
|
|
+ unit: '',
|
|
|
+ //图表&&表格信息显示标识
|
|
|
+ isChart:true,
|
|
|
+ projectType:"projectName",//:label 绑定的是Boolean布尔类型或Integer整型数值;label 绑定的是String字符串类型
|
|
|
+ //施工统计显示参数
|
|
|
+ workbenchProjectNum:"0/0",
|
|
|
+ scanNum:"0/0",
|
|
|
+ scanPartsNum:"0/0",
|
|
|
+ sjnum:"0",
|
|
|
+ sgnum:"0",
|
|
|
+ suplierNUm:"0",
|
|
|
+ batchNum:"0",
|
|
|
+ lengthTotal:"0",
|
|
|
+ //浮动提示内容
|
|
|
+ sgbfb:0,sgzs:0,sgs:0,
|
|
|
+ smbfb:0,smzs:0,sms:0,
|
|
|
+ smbjs:0,smbjzs:0,smbjbfb:0,
|
|
|
+ sjsgs:0,sjsgzs:0,sjsgbfb:0,
|
|
|
+ ghs:0,ghzs:0,ghbfb:0,ghsj:0,ghpc:0,
|
|
|
+ //每日施工部件个数与扫码次数信息
|
|
|
+ sgts:0,smgj:0,sgsm:0,jlsm:0,sczp:0,sgsc:0,jlsc:0,
|
|
|
+ //日期显示
|
|
|
+ dateShow:{
|
|
|
+ startDate:"",
|
|
|
+ endDate:""
|
|
|
+ },
|
|
|
+ searchDate:{
|
|
|
+ startDate:"",
|
|
|
+ endDate:""
|
|
|
+ },
|
|
|
+ //组件传值
|
|
|
+ resultData:{},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getStatistic();
|
|
|
+ this.getUnit();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async getStatistic(){
|
|
|
+ let data = {
|
|
|
+ beginDate:this.searchDate.startDate,
|
|
|
+ endDate:this.searchDate.endDate,
|
|
|
+ projectName:this.projectName,
|
|
|
+ departmentName:this.unit,
|
|
|
+ }
|
|
|
+ const res = await this.$PortApi.PersonWorkOtherCount_api(data);
|
|
|
+ const { code, result } = res.data;
|
|
|
+ if (code === 1) {
|
|
|
+ console.log("统计结果",result)
|
|
|
+ this.showBuildingStatistic(result); //显示施工统计数据信息
|
|
|
+ this.showPercentageDisplay(result); //显示施工统计百分比信息
|
|
|
+ this.showDailyBuild(result);//显示具体施工信息
|
|
|
+ this.resultData=result;//管材到货与使用情况对比分析图表
|
|
|
+ } else {
|
|
|
+ this.$message.error("信息获取失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取单位
|
|
|
+ async getUnit(){
|
|
|
+ const res = await this.$PortApi.PohtopageFilterPrj_api({
|
|
|
+ size: 999,
|
|
|
+ current: 1,
|
|
|
+ prjId: 1,
|
|
|
+ departmentType:"CON,SPV,VEN"
|
|
|
+ });
|
|
|
+ const { code, result } = res.data;
|
|
|
+ if (code === 1) {
|
|
|
+ result.records.forEach(item => {
|
|
|
+ this.unitOptions.push({
|
|
|
+ value: item.name,
|
|
|
+ label: item.name
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error("信息获取失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //项目名称改变
|
|
|
+ changeProjectName(data){
|
|
|
+ this.projectName=data;
|
|
|
+ this.getStatistic()
|
|
|
+ },
|
|
|
+ //显示施工统计数据信息
|
|
|
+ showBuildingStatistic(param){
|
|
|
+ //施工工程
|
|
|
+ this.workbenchProjectNum=this.setNullAndUndefinedEmpty(param.builtCount[0].numberBefore)+"/"+this.setNullAndUndefinedEmpty(param.builtCount[0].numberAfter)
|
|
|
+ this.sgs=this.setNullAndUndefinedEmpty(param.builtCount[0].numberBefore);
|
|
|
+ this.sgzs=this.setNullAndUndefinedEmpty(param.builtCount[0].numberAfter);
|
|
|
+ this.sgbfb=this.computePercent(this.sgs,this.sgzs);
|
|
|
+ //扫码人数
|
|
|
+ this.scanNum=this.setNullAndUndefinedEmpty(param.builtCount[1].numberBefore)+"/"+this.setNullAndUndefinedEmpty(param.builtCount[1].numberAfter)
|
|
|
+ this.sms=this.setNullAndUndefinedEmpty(param.builtCount[1].numberBefore)
|
|
|
+ this.smzs=this.setNullAndUndefinedEmpty(param.builtCount[1].numberAfter)
|
|
|
+ this.smbfb=this.computePercent(this.sms,this.smzs);
|
|
|
+ //扫码部件
|
|
|
+ this.scanPartsNum=this.setNullAndUndefinedEmpty(param.builtCount[2].numberBefore)+"/"+this.setNullAndUndefinedEmpty(param.builtCount[2].numberAfter)
|
|
|
+ this.smbjs=this.setNullAndUndefinedEmpty(param.builtCount[2].numberBefore)
|
|
|
+ this.smbjzs=this.setNullAndUndefinedEmpty(param.builtCount[2].numberAfter)
|
|
|
+ this.smbjbfb=this.computePercent(this.smbjs,this.smbjzs)
|
|
|
+ //设计&&施工里程
|
|
|
+ this.sjnum=this.setNullAndUndefinedEmpty(param.builtCount[3].numberAfter).toFixed(0);
|
|
|
+ this.sgnum=this.setNullAndUndefinedEmpty(param.builtCount[3].numberBefore).toFixed(0);
|
|
|
+ this.sjsgs=this.setNullAndUndefinedEmpty(param.builtCount[3].numberBefore)
|
|
|
+ this.sjsgzs=this.setNullAndUndefinedEmpty(param.builtCount[3].numberAfter)
|
|
|
+ this.sjsgbfb=this.computePercent(this.sjsgs,this.sjsgzs)
|
|
|
+ //供货信息
|
|
|
+ this.suplierNUm=this.setNullAndUndefinedEmpty(param.materialSum.supplyVendor);
|
|
|
+ this.batchNum=this.setNullAndUndefinedEmpty(param.materialSum.supplyTimes);
|
|
|
+ this.lengthTotal= param.materialSum.lengthTotal ? param.materialSum.lengthTotal.toFixed(3) : 0;
|
|
|
+ this.ghs=param.materialSum.builtlength?param.materialSum.builtlength.toFixed(3):0;
|
|
|
+ this.ghzs=param.materialSum.lengthTotal?param.materialSum.lengthTotal.toFixed(3):0;
|
|
|
+ this.ghbfb=this.computePercent(this.ghs,this.ghzs)
|
|
|
+ this.ghsj=this.setNullAndUndefinedEmpty(param.materialSum.supplyVendor);
|
|
|
+ this.ghpc=this.setNullAndUndefinedEmpty(param.materialSum.supplyTimes);
|
|
|
+ },
|
|
|
+ showPercentageDisplay(param){
|
|
|
+ //施工工程百分比
|
|
|
+ this.indexPieChart(param.builtCount[0].numberBefore?param.builtCount[0].numberBefore:0,param.builtCount[0].numberAfter?(param.builtCount[0].numberAfter-param.builtCount[0].numberBefore):0,'sggcPercent')
|
|
|
+ //扫码人数百分比
|
|
|
+ this.indexPieChart(param.builtCount[1].numberBefore?param.builtCount[1].numberBefore:0,param.builtCount[1].numberAfter?(param.builtCount[1].numberAfter-param.builtCount[1].numberBefore):0,'smrsPercent')
|
|
|
+ //扫码部件百分比
|
|
|
+ this.indexPieChart(param.builtCount[2].numberBefore?param.builtCount[2].numberBefore:0,param.builtCount[2].numberAfter?(param.builtCount[2].numberAfter-param.builtCount[2].numberBefore):0,'smbjPercent')
|
|
|
+ //设计施工百分比
|
|
|
+ this.indexPieChart(param.builtCount[3].numberBefore?param.builtCount[3].numberBefore:0,param.builtCount[3].numberAfter?(param.builtCount[3].numberAfter-param.builtCount[3].numberBefore):0,'sjsgPercent')
|
|
|
+ //管材百分比
|
|
|
+ var realbuild;
|
|
|
+ var realtotal;
|
|
|
+ if(param.materialSum.builtlength&¶m.materialSum.lengthTotal){
|
|
|
+ if(param.materialSum.lengthTotal===0||param.materialSum.lengthTotal===null){
|
|
|
+ realbuild=0;
|
|
|
+ realtotal=0;
|
|
|
+ }else{
|
|
|
+ realbuild=param.materialSum.builtlength;
|
|
|
+ realtotal=(param.materialSum.lengthTotal-param.materialSum.builtlength)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ realbuild=0;
|
|
|
+ realtotal=0;
|
|
|
+ }
|
|
|
+ this.indexPieChart(realbuild,realtotal,'gcPercent')
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生产指标饼图
|
|
|
+ * @param part 实际数值
|
|
|
+ * @param total 总和数值
|
|
|
+ * @param domId 容器ID
|
|
|
+ */
|
|
|
+ indexPieChart(part,total,domId){
|
|
|
+ //数据为0时不填充
|
|
|
+ if (part===0||total===0) {
|
|
|
+ part=0;
|
|
|
+ total=100;
|
|
|
+ }
|
|
|
+ //图表配置
|
|
|
+ var option = {
|
|
|
+ color:['#FFFFFF','rgb(255,255,255,0.3)'],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['85%', '100%'],
|
|
|
+ silent:true,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center',
|
|
|
+ formatter: '{d}%',
|
|
|
+ borderWidth:0,
|
|
|
+ color:"#fff"
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: part,
|
|
|
+ selected:true, //默认选中第一块
|
|
|
+ label:{
|
|
|
+ show:true, //默认显示第一块
|
|
|
+ fontSize: '13',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: total,
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ let indexChart = echarts.init(document.getElementById(domId));
|
|
|
+ indexChart.resize();
|
|
|
+ indexChart.setOption(option,{
|
|
|
+ notMerge: true,
|
|
|
+ });
|
|
|
+ //图表大小自适应
|
|
|
+ window.addEventListener("resize", ()=>{
|
|
|
+ indexChart.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //具体施工信息显示
|
|
|
+ showDailyBuild(result){
|
|
|
+ this.sgts=this.setNullAndUndefinedEmpty(result.dailyScansAndParts.builtTime)
|
|
|
+ this.smgj=this.setNullAndUndefinedEmpty(result.dailyScansAndParts.scanTotal)
|
|
|
+ this.sgsm=this.setNullAndUndefinedEmpty(result.dailyScansAndParts.conScans)
|
|
|
+ this.jlsm=this.setNullAndUndefinedEmpty(result.dailyScansAndParts.spvScans)
|
|
|
+ this.sczp=this.setNullAndUndefinedEmpty(result.dailyScansAndParts.fileTotal)
|
|
|
+ this.sgsc=this.setNullAndUndefinedEmpty(result.dailyScansAndParts.conFiles)
|
|
|
+ this.jlsc=this.setNullAndUndefinedEmpty(result.dailyScansAndParts.spvFiles)
|
|
|
+ },
|
|
|
+ //百分比计算
|
|
|
+ computePercent(numerator,denominator){
|
|
|
+ if(denominator===0||denominator === "Null"||denominator === "null"||
|
|
|
+ denominator === "NULL"||denominator === null || denominator === undefined || denominator === "") return 0
|
|
|
+ return ((numerator/denominator)*100).toFixed(2)
|
|
|
+ },
|
|
|
+ //时间取0位
|
|
|
+ formatTen(num) {
|
|
|
+ return num > 9 ? (num + "") : ("0" + num);
|
|
|
+ },
|
|
|
+ //时间转换
|
|
|
+ timeConversion(date,isShow){
|
|
|
+ let time = new Date(date);
|
|
|
+ if(isShow){
|
|
|
+ //getMonth()的返回值是0-11也就是从0开始而不是从1开始。所以一般都需要加一个1 才能达到1-12月。否则就成了0-11月了
|
|
|
+ return time.getFullYear()+'年'+this.formatTen((time.getMonth()+1))+'月'+this.formatTen(time.getDate())+'日'
|
|
|
+ }else{
|
|
|
+ return time.getFullYear()+this.formatTen((time.getMonth()+1))+this.formatTen(time.getDate())
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //数据检查公共方法(针对数字)
|
|
|
+ setNullAndUndefinedEmpty(input) {
|
|
|
+ if (input === "Null"||input === "null"||input === "NULL"||input === null || input === undefined || input === "") {
|
|
|
+ return 0
|
|
|
+ } else {
|
|
|
+ return input
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ termDate(){
|
|
|
+ if(this.dateShow.startDate||this.dateShow.endDate){
|
|
|
+ return this.dateShow.startDate+'至'+this.dateShow.endDate
|
|
|
+ }else{
|
|
|
+ return ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ titleDate(){
|
|
|
+ if(this.dateShow.startDate||this.dateShow.endDate){
|
|
|
+ return ":"+this.dateShow.startDate+'-'+this.dateShow.endDate
|
|
|
+ }else{
|
|
|
+ return ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ value:{
|
|
|
+ handler(n,o){
|
|
|
+ if(n){
|
|
|
+ this.dateShow.startDate=this.timeConversion(n[0],true)
|
|
|
+ this.dateShow.endDate=this.timeConversion(n[1],true)
|
|
|
+ this.searchDate.startDate=this.timeConversion(n[0],false)
|
|
|
+ this.searchDate.endDate=this.timeConversion(n[1],false)
|
|
|
+ this.getStatistic();
|
|
|
+ }else{
|
|
|
+ this.dateShow.startDate="";
|
|
|
+ this.dateShow.endDate="";
|
|
|
+ this.searchDate.startDate="";
|
|
|
+ this.searchDate.endDate="";
|
|
|
+ this.getStatistic();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ unit:{
|
|
|
+ handler(n,o){
|
|
|
+ this.getStatistic()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.widget-PersonWorkbench{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f5f5f6 !important;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ position: relative;
|
|
|
+ .head-info{
|
|
|
+ margin: 10px 0 0 10px;
|
|
|
+ height: 3%;
|
|
|
+ width: 98%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 6px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .project-item{
|
|
|
+ flex: 0.4;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ .projectInfo{
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .condition-item{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000;
|
|
|
+ flex: 0.15;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .time-item{
|
|
|
+ font-size: 14px;
|
|
|
+ flex: 0.18;
|
|
|
+ }
|
|
|
+ .line{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .operation-item{
|
|
|
+ font-size: 14px;
|
|
|
+ flex: 0.1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistic-panel{
|
|
|
+ margin: 10px 0 0 10px;
|
|
|
+ height: 15%;
|
|
|
+ width: 98%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 6px;
|
|
|
+ .head-container{
|
|
|
+ height: 20%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .span-bg{
|
|
|
+ width: 4px;
|
|
|
+ height: 18px;
|
|
|
+ background-color: #1066d0;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistic{
|
|
|
+ height: 80%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ .term {
|
|
|
+ height: 100%;
|
|
|
+ width: calc(20% - 10px);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ .chart-container {
|
|
|
+ padding: 5px;
|
|
|
+ flex: 0.5;
|
|
|
+ }
|
|
|
+ .sta {
|
|
|
+ flex: 0.5;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ padding: 16px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ .num {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sta-bd{
|
|
|
+ flex: 0.5;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ padding: 16px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .bd-item{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .split-line{
|
|
|
+ width: 2px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .term-project .tooltiptext,.term-codeparamater .tooltiptext,.term-parts .tooltiptext,
|
|
|
+ .term-pictures .tooltiptext,.term-supplier .tooltiptext{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ visibility: hidden;
|
|
|
+ width: 18.5%;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 5px;
|
|
|
+ // box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 5%);
|
|
|
+ // -webkit-box-shadow: rgb(212, 210, 210) 0px 0px 10px;
|
|
|
+ // -moz-box-shadow: rgb(212, 210, 210) 0px 0px 10px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 2%;
|
|
|
+ div{
|
|
|
+ margin: 2px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .term-project .tooltiptext{
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #4D92E6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .term-codeparamater .tooltiptext{
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #28B6C1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .term-parts .tooltiptext{
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #64A5C4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .term-pictures .tooltiptext{
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #837FD8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .term-supplier .tooltiptext{
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #5F86C5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .term-project:hover .tooltiptext{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ .term-codeparamater:hover .tooltiptext{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ .term-parts:hover .tooltiptext{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ .term-pictures:hover .tooltiptext{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ .term-supplier:hover .tooltiptext{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ .term-project {
|
|
|
+ background: linear-gradient(90deg, #3A86E3, #50A5F5);
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ .term-codeparamater {
|
|
|
+ background: linear-gradient(90deg, #10ACB6, #14BDD6);
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ .term-parts {
|
|
|
+ background: linear-gradient(90deg, #3C8CB2, #4BA6D1);
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ .term-pictures {
|
|
|
+ background: linear-gradient(90deg, #7570D4, #8D87DD);
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ .term-supplier {
|
|
|
+ background: linear-gradient(90deg, #4E78BE, #5485D7);
|
|
|
+ opacity: 0.9;
|
|
|
+ .workbench-suplier-num,.workbench-batch-num {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistic-container{
|
|
|
+ margin: 10px 0 0 10px;
|
|
|
+ height: 56%;
|
|
|
+ width: 98%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 6px;
|
|
|
+ display: flex;
|
|
|
+ .chart-container{
|
|
|
+ flex: 0.8;
|
|
|
+ .head-container{
|
|
|
+ height: 5%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .span-bg{
|
|
|
+ width: 4px;
|
|
|
+ height: 18px;
|
|
|
+ background-color: #1066d0;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .span-chart,.span-list,.span-radio{
|
|
|
+ margin-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-container{
|
|
|
+ height: 95%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .chartRegion{
|
|
|
+ flex: 0.55;
|
|
|
+ border-right: 1px solid #909399;
|
|
|
+ .chart-containter-left-top{
|
|
|
+ height: 5%;
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0 0 10px;
|
|
|
+ span{
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infoRegion{
|
|
|
+ flex: 0.45;
|
|
|
+ border-right: 1px solid #e7e7e7;
|
|
|
+ padding-right: 20px;
|
|
|
+ .chart-containter-right-top{
|
|
|
+ width: 100%;
|
|
|
+ height: 30%;
|
|
|
+ margin: 10px 0 0 10px;
|
|
|
+ span{
|
|
|
+ color: #333333;
|
|
|
+ // height: 100%;
|
|
|
+ }
|
|
|
+ .sginfoTitle{
|
|
|
+ padding-left: 2%;
|
|
|
+ }
|
|
|
+ .sginfo{
|
|
|
+ height:70%;
|
|
|
+ margin:2%;
|
|
|
+ background: #EFF7FF;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ .sginfo-left{
|
|
|
+ height: 100%;
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column nowrap;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ .sginfo-left-top{
|
|
|
+ height: 50%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #333333;
|
|
|
+ padding-top: 10px;
|
|
|
+ .sgts{
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .sgtsdw{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sginfo-left-bottom{
|
|
|
+ height: 50%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sginfo-right{
|
|
|
+ height: 100%;
|
|
|
+ width: 80%;
|
|
|
+ padding: 1%;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column nowrap;
|
|
|
+ span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei UI;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ label{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-bottom: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei UI;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .sginfo-right-top{
|
|
|
+ height: 49%;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom:1px solid ;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ }
|
|
|
+ .sginfo-right-bottom{
|
|
|
+ height: 49%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rank-container{
|
|
|
+ flex: 0.2;
|
|
|
+ .head-container{
|
|
|
+ height: 5%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .span-bg{
|
|
|
+ width: 4px;
|
|
|
+ height: 18px;
|
|
|
+ background-color: #1066d0;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .photo-container{
|
|
|
+ margin: 10px 0 0 10px;
|
|
|
+ height: 15%;
|
|
|
+ width: 98%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|