YaolongHan 4 years ago
parent
commit
e245d71106
6 changed files with 207 additions and 166 deletions
  1. 2 2
      package.json
  2. 20 4
      src/components/menuList.vue
  3. 14 4
      src/views/homepage/Circle.js
  4. 168 154
      src/views/homepage/darkColor.vue
  5. 2 1
      src/views/homepage/index.vue
  6. 1 1
      vue.config.js

+ 2 - 2
package.json

@@ -21,9 +21,9 @@
     "dependencies": {
         "@mapbox/geojson-merge": "^1.1.1",
         "@saga-web/base": "2.1.27",
-        "@saga-web/big": "1.0.118",
+        "@saga-web/big": "1.0.119",
         "@saga-web/draw": "2.1.110",
-        "@saga-web/feng-map": "1.0.50",
+        "@saga-web/feng-map": "1.0.51",
         "@saga-web/graph": "2.1.133",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",

+ 20 - 4
src/components/menuList.vue

@@ -67,10 +67,16 @@
         <img class="img3" src="../assets/imgs/clock.png" alt />
         <span class="span3">{{ times }}</span>
       </span>
-      <span v-show="showStyleBtn" @click="checkColor">
-        切换
-        <img class='img3' src='../assets/images/change.png' alt />
-      </span>
+      <div class="checkkout" v-show="showStyleBtn">
+        <img @click="checkColor" src="../assets/images/icons/switch.png" />
+        <div
+          class="tip"
+          :style="{ color: !showStyle ? '#8e9298' : '#69c4df' }"
+          @click="checkColor"
+        >
+          {{ !showStyle ? "切换驾驶舱" : "切换项目首页" }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -412,6 +418,16 @@ export default {
 .menu-style {
   background: #0c102c;
 }
+.checkkout {
+  display: flex;
+  align-items: center;
+  line-height: 48px;
+  color: #646c73;
+  img{
+    width: 24px;
+    height: 24px;
+  }
+}
 </style>
 <style lang="less">
 .menu {

+ 14 - 4
src/views/homepage/Circle.js

@@ -66,12 +66,16 @@ export class SCircle {
      * @param {y} cy
      * @param {半径} r
      */
-    sector(cx, cy, r,endAngle) {
+    sector(cx, cy, r, endAngle, strokeStyle = "#c81d39") {
         this.ctx.beginPath();
         this.ctx.lineWidth = this.lineWidth;
-        this.ctx.strokeStyle = '#c81d39';
+        this.ctx.strokeStyle = strokeStyle ? strokeStyle : '#c81d39';
         //圆弧两端的样式
         this.ctx.lineCap = 'round';
+        if(endAngle == 0){
+           this.ctx.lineCap = 'butt'
+
+        }
         this.ctx.arc(
             cx, cy, r,
             (Math.PI * -1 / 2),
@@ -105,6 +109,12 @@ export class SCircle {
         this.init(this.circleX, this.circleY, this.radius);
         //圆弧
         this.sector(this.circleX, this.circleY, this.radius, p1);
-        this.sector(this.circleX, this.circleY, this.radius * 1.2,p2);
+        this.sector(this.circleX, this.circleY, this.radius * 1.2, p2, '#FFA34A');
+    }
+    // 内外环百分比换算
+    persentTransform(total, p1, p2) {
+        const r1 = Math.floor(p1 / total * 100)
+        const r2 = Math.floor(p2 / total * 100)
+        this.setPersent(r1, r2)
     }
-    }
+}

+ 168 - 154
src/views/homepage/darkColor.vue

@@ -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 {

+ 2 - 1
src/views/homepage/index.vue

@@ -112,6 +112,7 @@ import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
 import {sortBy} from 'lodash'
 import moment from 'moment'
 import darkColor from "./darkColor"
+import { mapGetters } from "vuex";
 import bus from '@/utils/bus.js'
 export default {
     components:{darkColor},
@@ -123,7 +124,7 @@ export default {
             ],
             itemsList: [],
             changeList: [],
-            plazaId:'',
+            // plazaId:'',
             srcList: {
                 0: require('../../assets/images/icons/maintain.png'),
                 1: require('../../assets/images/icons/protect.png'),

+ 1 - 1
vue.config.js

@@ -34,7 +34,7 @@ module.exports = {
             // 图例库服务
             "/serve": {
                 // target: 'http://192.168.200.87:8088',
-                target: 'http://60.205.177.43:8080', //阿里云
+                target: 'http://60.205.177.43:28888', //阿里云
                 // target: 'http://10.199.143.129:8080',    //生产环境
                 changeOrigin: true,
                 pathRewrite: {