|
@@ -120,36 +120,18 @@
|
|
|
<!-- 进度调 -->
|
|
|
<div class="progress">
|
|
|
<div class="number">
|
|
|
- <div class="nu">19</div>
|
|
|
+ <div class="nu">{{ recordTotal }}</div>
|
|
|
<span>当月更新</span>
|
|
|
</div>
|
|
|
<div class="progress-box">
|
|
|
<div class="progress-list" ref="plist">
|
|
|
- <div class="progress-item"></div>
|
|
|
- <div class="progress-item"></div>
|
|
|
- <div class="progress-item"></div>
|
|
|
- <div class="progress-item progress-box-bottom"></div>
|
|
|
+ <div :class="['progress-item',(index+1) >=backrecordLength?'progress-box-bottom':'' ]" :style="'width:'+item.persent" v-for="(item,index) in recordList" :key="index"></div>
|
|
|
</div>
|
|
|
<div class="progress-legend">
|
|
|
- <div class="legend-item">
|
|
|
+ <div class="legend-item" v-for="(item,index) in recordList" :key="index">
|
|
|
<span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">1条</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">5条</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">3条</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">5条</span>
|
|
|
+ <span class="title">{{item.typeName}}</span>
|
|
|
+ <span class="num">{{item.cnt}}条</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -183,90 +165,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <div class="box">
|
|
|
- <div class="box-center">
|
|
|
- <div class="system-main-title">
|
|
|
- <h4 class="section-title">维保</h4>
|
|
|
- <div class="downright"></div>
|
|
|
- </div>
|
|
|
- <div class="select">
|
|
|
- <Select
|
|
|
- width="110"
|
|
|
- v-model="weibaoData"
|
|
|
- :isReadOnly="true"
|
|
|
- @change="testClick"
|
|
|
- :hideClear="true"
|
|
|
- :selectdata="dataSelect"
|
|
|
- :placeholder="'请选择'"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-bottom">
|
|
|
- <div class="circle">
|
|
|
- <canvas id="canvas_1" width="150" height="150"></canvas>
|
|
|
- </div>
|
|
|
- <div class="msg">
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">未完成得任务</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">即将逾期</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box">
|
|
|
- <div class="box-center">
|
|
|
- <div class="system-main-title">
|
|
|
- <h4 class="section-title">第三方检测</h4>
|
|
|
- <div class="downright"></div>
|
|
|
- </div>
|
|
|
- <div class="select">
|
|
|
- <Select
|
|
|
- width="110"
|
|
|
- v-model="disanfangData"
|
|
|
- :isReadOnly="true"
|
|
|
- @change="testClick"
|
|
|
- :hideClear="true"
|
|
|
- :selectdata="dataSelect"
|
|
|
- :placeholder="'请选择'"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-bottom">
|
|
|
- <div class="circle">
|
|
|
- <canvas id="canvas_2" width="150" height="150"></canvas>
|
|
|
- </div>
|
|
|
- <div class="msg">
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">未完成得任务</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">即将逾期</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box">
|
|
|
+ <div class="box" v-for="(item, index) in statisticsList" :key="index">
|
|
|
<div class="box-center">
|
|
|
<div class="system-main-title">
|
|
|
- <h4 class="section-title">专维</h4>
|
|
|
+ <h4 class="section-title">{{ item.name }}</h4>
|
|
|
<div class="downright"></div>
|
|
|
</div>
|
|
|
<div class="select">
|
|
|
<Select
|
|
|
width="110"
|
|
|
- v-model="zhuanweiData"
|
|
|
+ v-model="item.smsxt"
|
|
|
:isReadOnly="true"
|
|
|
- @change="testClick"
|
|
|
+ @change="changeClick(item)"
|
|
|
:hideClear="true"
|
|
|
:selectdata="dataSelect"
|
|
|
:placeholder="'请选择'"
|
|
@@ -275,18 +185,22 @@
|
|
|
</div>
|
|
|
<div class="box-bottom">
|
|
|
<div class="circle">
|
|
|
- <canvas id="canvas_3" width="150" height="150"></canvas>
|
|
|
+ <canvas
|
|
|
+ :id="'canvas_' + item.type"
|
|
|
+ width="150"
|
|
|
+ height="150"
|
|
|
+ ></canvas>
|
|
|
</div>
|
|
|
<div class="msg">
|
|
|
<div class="msg-item item-1">
|
|
|
<span class="msg-color"></span>
|
|
|
<span class="type">未完成得任务</span>
|
|
|
- <span class="num">8</span>
|
|
|
+ <span class="num">{{ item.unfinished }}</span>
|
|
|
</div>
|
|
|
<div class="msg-item item-1">
|
|
|
<span class="msg-color"></span>
|
|
|
<span class="type">即将逾期</span>
|
|
|
- <span class="num">8</span>
|
|
|
+ <span class="num">{{ item.due_num }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -313,9 +227,42 @@ export default {
|
|
|
floorInfo: {},
|
|
|
loadName: "",
|
|
|
type: "",
|
|
|
- weibaoData: "000", //维保
|
|
|
- disanfangData: "000", //第三方检测
|
|
|
- zhuanweiData: "000", //zhuanwei
|
|
|
+ // 右侧统计
|
|
|
+ statisticsList: [
|
|
|
+ {
|
|
|
+ name: "维保",
|
|
|
+ type: 1,
|
|
|
+ smsxt: "000",
|
|
|
+ total: 0, //总任务
|
|
|
+ due_num: 0, //即将逾期数量
|
|
|
+ unfinished: 0, //未完成数量
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "第三方检测",
|
|
|
+ type: 2,
|
|
|
+ smsxt: "000",
|
|
|
+ total: 0, //总任务
|
|
|
+ due_num: 0, //即将逾期数量
|
|
|
+ unfinished: 0, //未完成数量
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "专维",
|
|
|
+ type: 0,
|
|
|
+ smsxt: "000",
|
|
|
+ total: 0, //总任务
|
|
|
+ due_num: 0, //即将逾期数量
|
|
|
+ unfinished: 0, //未完成数量
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ recordList: [
|
|
|
+ // 更新记录数组
|
|
|
+ { cnt: 0, objtype: 4, typeName: "重要维修" ,persent:'0' },
|
|
|
+ { cnt: 0, objtype: 1, typeName: "重要维保" ,persent:'0' },
|
|
|
+ { cnt: 0, objtype: 5, typeName: "其他事项" ,persent:'0' },
|
|
|
+ { cnt: 0, objtype: 3, typeName: "综合事项" ,persent:'0' },
|
|
|
+ ],
|
|
|
+ recordTotal: 0, //更新总数
|
|
|
+ backrecordLength:0, // 更新数据对应得得数量
|
|
|
dataSelect: [
|
|
|
{ id: "000", name: "全部" },
|
|
|
{ id: "1003", name: "消防系统" },
|
|
@@ -333,8 +280,37 @@ export default {
|
|
|
...mapGetters(["floorsArr", "floorObj"]),
|
|
|
},
|
|
|
methods: {
|
|
|
- testClick(data) {
|
|
|
- console.log(data);
|
|
|
+ changeClick(statisticItem, data) {
|
|
|
+ this.projectStatistics(
|
|
|
+ statisticItem.type,
|
|
|
+ statisticItem.smsxt,
|
|
|
+ statisticItem.type == 1
|
|
|
+ ? moment().format("YYYYMM")
|
|
|
+ : moment().format("YYYY")
|
|
|
+ ).then((res) => {
|
|
|
+ const TYPE = statisticItem.type; // 类型
|
|
|
+ const circle = new SCircle(`canvas_${TYPE}`);
|
|
|
+ // 总数
|
|
|
+ let total = 0;
|
|
|
+ // 即将预期
|
|
|
+ let due_num = 0;
|
|
|
+ // 未完成任务
|
|
|
+ let unfinished = 0;
|
|
|
+ // 累计统计
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ total = total + item.total;
|
|
|
+ due_num = due_num + item.due_num;
|
|
|
+ unfinished = unfinished + item.unfinished;
|
|
|
+ });
|
|
|
+ // 赋值
|
|
|
+ Object.assign(statisticItem, {
|
|
|
+ total,
|
|
|
+ due_num,
|
|
|
+ unfinished,
|
|
|
+ });
|
|
|
+ circle.persentTransform(total, due_num, unfinished);
|
|
|
+ circle.setText(total);
|
|
|
+ });
|
|
|
},
|
|
|
imgSrc(code) {
|
|
|
return require("../../assets/images/icons/" + code + ".png");
|
|
@@ -418,7 +394,6 @@ export default {
|
|
|
this.currentSysId = res.data[0].smsxt;
|
|
|
|
|
|
this.systemList = res.data;
|
|
|
- console.log("this.systemList", this.systemList);
|
|
|
resolve(res);
|
|
|
}
|
|
|
}
|
|
@@ -442,28 +417,6 @@ export default {
|
|
|
} else {
|
|
|
}
|
|
|
},
|
|
|
- // 模拟横条数据
|
|
|
- getPercent() {
|
|
|
- let domList = this.$refs.plist.childNodes;
|
|
|
- let width = this.$refs.plist.offsetWidth - 18;
|
|
|
- setTimeout(() => {
|
|
|
- domList[0].style.width = width * 0.2 + "px";
|
|
|
- domList[1].style.width = width * 0.4 + "px";
|
|
|
- domList[2].style.width = width * 0.2 + "px";
|
|
|
- domList[3].style.width = width * 0.2 + "px";
|
|
|
- // 设置圆
|
|
|
-
|
|
|
- const circle1 = new SCircle("canvas_1");
|
|
|
- const circle2 = new SCircle("canvas_2");
|
|
|
- const circle3 = new SCircle("canvas_3");
|
|
|
- circle1.setPersent(37, 50);
|
|
|
- circle1.setText("1");
|
|
|
- circle2.setPersent(37, 50);
|
|
|
- circle2.setText("1");
|
|
|
- circle3.setPersent(37, 50);
|
|
|
- circle3.setText("1");
|
|
|
- }, 3000);
|
|
|
- },
|
|
|
|
|
|
/**
|
|
|
* 项目首页右侧统计
|
|
@@ -472,9 +425,9 @@ export default {
|
|
|
* system=1001//所属专业 (选填) //不填则默认全部专业(系统)
|
|
|
* time 时间
|
|
|
*/
|
|
|
- projectStatistics(type, system, time) {
|
|
|
+ projectStatistics(type, smsxt, time) {
|
|
|
let params = null;
|
|
|
- if (system == "000") {
|
|
|
+ if (smsxt == "000") {
|
|
|
params = {
|
|
|
getParams: {
|
|
|
plazaId: this.plazaId,
|
|
@@ -488,14 +441,11 @@ export default {
|
|
|
plazaId: this.plazaId,
|
|
|
type: type, // 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
|
|
|
statisticsDate: time, //统计时间 type=0或type=2时:格式:yyyy / type=1时:格式:yyyyMM //必填
|
|
|
- system: system, //所属专业 (选填) //不填则默认全部专业(系统)
|
|
|
+ smsxt: smsxt, //所属专业 (选填) //不填则默认全部专业(系统)
|
|
|
},
|
|
|
};
|
|
|
}
|
|
|
-
|
|
|
- projectStatistics(params).then((res) => {
|
|
|
- console.log("resresrse", res);
|
|
|
- });
|
|
|
+ return projectStatistics(params);
|
|
|
},
|
|
|
// 广场统计说明书更新记录数量
|
|
|
rptstatistic(startTime, endTime) {
|
|
@@ -503,10 +453,62 @@ export default {
|
|
|
getParams: {
|
|
|
plazaId: this.plazaId,
|
|
|
changeDateStartDate: startTime, // 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
|
|
|
- changeDateStartDate: endTime, //统计时间 type=0或type=2时:格式:yyyy / type=1时:格式:yyyyMM //必填
|
|
|
+ changeDateEndDate: endTime, //统计时间 type=0或type=2时:格式:yyyy / type=1时:格式:yyyyMM //必填
|
|
|
},
|
|
|
};
|
|
|
- rptstatistic(params).then((res) => {});
|
|
|
+ rptstatistic(params).then((res) => {
|
|
|
+ if (res.data.total && res.data.objcnt) {
|
|
|
+ res.data.objcnt.forEach((obj) => {
|
|
|
+ this.recordList.forEach((recorditem) => {
|
|
|
+ if (obj.objtype == recorditem.objtype) {
|
|
|
+ recorditem.cnt = obj.cnt;
|
|
|
+ recorditem.persent = Math.ceil(obj.cnt / res.data.total * 100) +'%'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.backrecordLength = res.data.objcnt.length;
|
|
|
+ this.recordTotal = res.data.total;
|
|
|
+ } else {
|
|
|
+ this.backrecordLength = 0;
|
|
|
+ this.recordTotal = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取右侧统计数据
|
|
|
+ getRightstatic() {
|
|
|
+ // 对右侧数据做遍历
|
|
|
+ this.statisticsList.forEach((statisticItem) => {
|
|
|
+ this.projectStatistics(
|
|
|
+ statisticItem.type,
|
|
|
+ statisticItem.system,
|
|
|
+ statisticItem.type == 1
|
|
|
+ ? moment().format("YYYYMM")
|
|
|
+ : moment().format("YYYY")
|
|
|
+ ).then((res) => {
|
|
|
+ const TYPE = statisticItem.type; // 类型
|
|
|
+ const circle = new SCircle(`canvas_${TYPE}`);
|
|
|
+ // 总数
|
|
|
+ let total = 0;
|
|
|
+ // 即将预期
|
|
|
+ let due_num = 0;
|
|
|
+ // 未完成任务
|
|
|
+ let unfinished = 0;
|
|
|
+ // 累计统计
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ total = total + item.total;
|
|
|
+ due_num = due_num + item.due_num;
|
|
|
+ unfinished = unfinished + item.unfinished;
|
|
|
+ });
|
|
|
+ // 赋值
|
|
|
+ Object.assign(statisticItem, {
|
|
|
+ total,
|
|
|
+ due_num,
|
|
|
+ unfinished,
|
|
|
+ });
|
|
|
+ circle.persentTransform(total, due_num, unfinished);
|
|
|
+ circle.setText(total);
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
@@ -515,21 +517,16 @@ export default {
|
|
|
this.plazaId = plazaId;
|
|
|
}
|
|
|
this.getSystemList();
|
|
|
- // 获取右侧统计
|
|
|
- // 专维
|
|
|
- this.projectStatistics(0, this.zhuanweiData, moment().format("YYYY"));
|
|
|
- // 维保
|
|
|
- this.projectStatistics(1, this.weibaoData, moment().format("YYYYMM"));
|
|
|
- // 第三方
|
|
|
- this.projectStatistics(2, this.disanfangData, moment().format("YYYY"));
|
|
|
- // 获取说明书更新记录
|
|
|
- const startTime = moment().add(1, 'days').format('YYYYMMDD000000');
|
|
|
- const endTime = moment().add(1, 'days').format('YYYYMMDD000000');
|
|
|
- this.rptstatistic();
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init();
|
|
|
- this.getPercent();
|
|
|
+ // 获取右侧数据
|
|
|
+ this.getRightstatic();
|
|
|
+ // 获取说明书更新记录
|
|
|
+ // 获取说明书更新记录
|
|
|
+ const endTime = moment().add(1, "days").format("YYYYMMDD000000");
|
|
|
+ const startTime = moment().subtract(29, "days").format("YYYYMMDD000000");
|
|
|
+ this.rptstatistic(startTime, endTime);
|
|
|
this.$refs.floorMap.init(this.floorInfo.gname);
|
|
|
},
|
|
|
};
|
|
@@ -777,7 +774,6 @@ export default {
|
|
|
overflow: hidden;
|
|
|
.progress-item {
|
|
|
height: 12px;
|
|
|
- width: 30%;
|
|
|
border-right: 6px #0c102c solid;
|
|
|
overflow: hidden;
|
|
|
}
|
|
@@ -942,7 +938,25 @@ export default {
|
|
|
.msg {
|
|
|
flex: 1;
|
|
|
margin-top: 10px;
|
|
|
- .msg-item {
|
|
|
+ padding: 30px 0 0 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .msg-item:nth-of-type(1) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16px;
|
|
|
+ .msg-color {
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 10px 10px;
|
|
|
+ background: #fd933c;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ margin: 0 6px 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-item:nth-of-type(2) {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 16px;
|
|
@@ -951,7 +965,7 @@ export default {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
border-radius: 10px 10px;
|
|
|
- background: #ffffff;
|
|
|
+ background: #cf233d;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.type {
|