问题修复

src/views/main/main.vue

@@ -7,7 +7,7 @@
         </div>
         <div class="main-left-box">
           <div>
-            <img src="../../assets/img/rw.png">
+            <img src="../../assets/img/rw.png" />
             <div>
               <div>任务总数</div>
               <div>{{taskInfo.totalNum}}</div>
@@ -35,7 +35,7 @@
         </div>
         <div class="main-left-box">
           <div>
-            <img src="../../assets/img/wt.png">
+            <img src="../../assets/img/wt.png" />
             <div>
               <div>问题总数</div>
               <div>{{questionInfo.totalNum}}</div>
@@ -64,8 +64,12 @@
           </div>
           <div :key="index" v-for="(item,index) in inspectQuestionCategoryList" class="left-bottom">
             <div :title="item.questionContent">{{item.questionContent}}</div>
-            <el-progress :show-text="false" :stroke-width="20" color="#17B4AC"
-                         :percentage="getQuestionPer(item)"></el-progress>
+            <el-progress
+              :show-text="false"
+              :stroke-width="20"
+              color="#17B4AC"
+              :percentage="getQuestionPer(item)"
+            ></el-progress>
             <div>{{item.questionNum}}</div>
           </div>
         </el-card>
@@ -73,8 +77,13 @@
           <div slot="header" class="clearfix">
             <span>水质分类统计</span>
           </div>
-          <mainCake v-if="waterAlarmCategoryList.length>0" :dataList="waterAlarmCategoryList" id="mainPre" :width="360"
-                    :height="200"></mainCake>
+          <mainCake
+            v-if="waterAlarmCategoryList.length>0"
+            :dataList="waterAlarmCategoryList"
+            id="mainPre"
+            :width="360"
+            :height="200"
+          ></mainCake>
         </el-card>
       </div>
     </div>
@@ -85,13 +94,20 @@
           <el-button @click="waterAlarmOpen" style="float: right; padding: 3px 0" type="text">更多</el-button>
         </div>
         <div class="right-waterAlarm">
-          <div @click="waterAlarmClick(item.id)" :key="index" v-for="(item,index) in waterAlarmList">
+          <div
+            @click="waterAlarmClick(item.id)"
+            :key="index"
+            v-for="(item,index) in waterAlarmList"
+          >
             <div>
               <img
-                :src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))"/>
+                :src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))"
+              />
               <div>{{item.alarmInfo}}</div>
             </div>
-            <div><span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span></div>
+            <div>
+              <span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span>
+            </div>
           </div>
         </div>
       </el-card>
@@ -108,9 +124,9 @@
             </div>
             <div>
               <div>{{item.warnContent}}</div>
-              <div :class="item.warnLevel==5?'red-div':(item.warnLevel==4?'orange-div':'yellow-div')">
-                {{item.warnLevel}}级
-              </div>
+              <div
+                :class="item.warnLevel==5?'red-div':(item.warnLevel==4?'orange-div':'yellow-div')"
+              >{{item.warnLevel}}级</div>
             </div>
           </div>
         </div>
@@ -123,7 +139,12 @@
         <el-tabs v-model="noticeType" @tab-click="noticeTypeClick">
           <el-tab-pane label="水务新闻" :name="1">
             <div v-if="noticeType==1" class="notice-list">
-              <div @click="noticeClick(item.id)" :key="index" v-for="(item,index) in noticeList" class="notice-child">
+              <div
+                @click="noticeClick(item.id)"
+                :key="index"
+                v-for="(item,index) in noticeList"
+                class="notice-child"
+              >
                 <div>{{item.title}}</div>
                 <div>{{item.createTime}}</div>
               </div>
@@ -131,7 +152,12 @@
           </el-tab-pane>
           <el-tab-pane label="政策法规" :name="2">
             <div v-if="noticeType==2" class="notice-list">
-              <div @click="noticeClick(item.id)" :key="index" v-for="(item,index) in noticeList" class="notice-child">
+              <div
+                @click="noticeClick(item.id)"
+                :key="index"
+                v-for="(item,index) in noticeList"
+                class="notice-child"
+              >
                 <div>{{item.title}}</div>
                 <div>{{item.createTime}}</div>
               </div>
@@ -145,342 +171,367 @@
       @handleClose="waterAlarmVisible=false"
       v-if="waterAlarmVisible"
       :visible="waterAlarmVisible"
-    >
-    </waterAlarmInfo>
-    <noticeDetial :noticeId="noticeId" :visible="noticeVisible" v-if="noticeVisible" @handleClose="noticeVisible=false"></noticeDetial>
+    ></waterAlarmInfo>
+    <noticeDetial
+      :noticeId="noticeId"
+      :visible="noticeVisible"
+      v-if="noticeVisible"
+      @handleClose="noticeVisible=false"
+    ></noticeDetial>
   </div>
 </template>
 
 <script>
-  import mainApi from '@/api/main/index'
-  import mainCake from './mainCake'
-  import waterAlarmInfo from '../water/waterAlarm/infoForm'
-  import noticeDetial from '@/components/noticeDetail'
-
-  export default {
-    name: "main-pc-index",
-    data() {
-      return {
-        noticeVisible:false,
-        noticeId:'',
-        waterAlarmVisible: false,
-        waterAlarmId: '',
-        height: document.body.clientHeight - 125,
-        taskInfo: {},
-        questionInfo: {},
-        waterAlarmCategoryList: [],
-        waterAlarmList: [],
-        waterWarnList: [],
-        noticeType: 1,
-        noticeList:[]
-      }
+import mainApi from "@/api/main/index";
+import mainCake from "./mainCake";
+import waterAlarmInfo from "../water/waterAlarm/infoForm";
+import noticeDetial from "@/components/noticeDetail";
+
+export default {
+  name: "main-pc-index",
+  data() {
+    return {
+      noticeVisible: false,
+      noticeId: "",
+      waterAlarmVisible: false,
+      waterAlarmId: "",
+      height: document.body.clientHeight - 125,
+      taskInfo: {},
+      questionInfo: {},
+      waterAlarmCategoryList: [],
+      waterAlarmList: [],
+      waterWarnList: [],
+      noticeType: 1,
+      noticeList: []
+    };
+  },
+  created() {},
+  mounted() {
+    this.getDetail();
+    this.getNoticeMainList();
+  },
+  components: { mainCake, waterAlarmInfo, noticeDetial },
+  methods: {
+    noticeClick(id) {
+      this.noticeId = id;
+      this.noticeVisible = true;
     },
-    created() {
+    noticeTypeClick() {
+      this.noticeList = [];
+      this.getNoticeMainList();
     },
-    mounted() {
-      this.getDetail()
-      this.getNoticeMainList()
+    noticeOpen() {
+      this.$router.push({ path: "/work/notice" });
     },
-    components: {mainCake, waterAlarmInfo,noticeDetial},
-    methods: {
-      noticeClick(id){
-        this.noticeId=id
-        this.noticeVisible=true
-      },
-      noticeTypeClick(){
-        this.noticeList=[]
-        this.getNoticeMainList()
-      },
-      noticeOpen() {
-        this.$router.push({path: "/work/notice"});
-      },
-      waterWarnOpen() {
-        this.$router.push({path: "/water/warn"});
-      },
-      waterAlarmOpen() {
-        this.$router.push({path: "/water/waterAlarm"});
-      },
-      waterAlarmClick(id) {
-        this.waterAlarmId = id
-        this.waterAlarmVisible = true
-      },
-      getQuestionPer(item) {
-        let total = 0
-        this.inspectQuestionCategoryList.map(item => {
-          total += item.questionNum
-        })
-        return (item.questionNum / total) * 100
-      },
-      getNoticeMainList() {
-        mainApi.getNoticeMainList(this.noticeType).then(res => {
-          this.noticeList=res.data?res.data:[]
-        }).catch(e => {
-          this.noticeList=[]
+    waterWarnOpen() {
+      this.$router.push({ path: "/water/warn" });
+    },
+    waterAlarmOpen() {
+      this.$router.push({ path: "/water/waterAlarm" });
+    },
+    waterAlarmClick(id) {
+      this.waterAlarmId = id;
+      this.waterAlarmVisible = true;
+    },
+    getQuestionPer(item) {
+      let total = 0;
+      this.inspectQuestionCategoryList.map(item => {
+        total += item.questionNum;
+      });
+      return (item.questionNum / total) * 100;
+    },
+    getNoticeMainList() {
+      mainApi
+        .getNoticeMainList(this.noticeType)
+        .then(res => {
+          this.noticeList = res.data ? res.data : [];
         })
-      },
-      getDetail() {
-        mainApi.getMainDetail().then(res => {
-          const {waterWarnList, taskInfo, questionInfo, inspectQuestionCategoryList, waterAlarmCategoryList, waterAlarmList} = res.data
-          this.taskInfo = taskInfo ? taskInfo : {}
-          this.questionInfo = questionInfo ? questionInfo : {}
-          this.inspectQuestionCategoryList = inspectQuestionCategoryList ? inspectQuestionCategoryList : []
-          this.waterAlarmCategoryList = waterAlarmCategoryList ? waterAlarmCategoryList : []
-          this.waterAlarmList = waterAlarmList ? waterAlarmList : []
-          this.waterWarnList = waterWarnList ? waterWarnList : []
-        }).catch(e => {
-          this.taskInfo = {}
-          this.questionInfo = {}
-          this.inspectQuestionCategoryList = []
-          this.waterAlarmCategoryList = []
-          this.waterAlarmList = []
-          this.waterWarnList = []
+        .catch(e => {
+          this.noticeList = [];
+        });
+    },
+    getDetail() {
+      mainApi
+        .getMainDetail()
+        .then(res => {
+          const {
+            waterWarnList,
+            taskInfo,
+            questionInfo,
+            inspectQuestionCategoryList,
+            waterAlarmCategoryList,
+            waterAlarmList
+          } = res.data;
+          this.taskInfo = taskInfo ? taskInfo : {};
+          this.questionInfo = questionInfo ? questionInfo : {};
+          this.inspectQuestionCategoryList = inspectQuestionCategoryList
+            ? inspectQuestionCategoryList
+            : [];
+          this.waterAlarmCategoryList = waterAlarmCategoryList
+            ? waterAlarmCategoryList
+            : [];
+          this.waterAlarmList = waterAlarmList ? waterAlarmList : [];
+          this.waterWarnList = waterWarnList ? waterWarnList : [];
         })
-      }
+        .catch(e => {
+          this.taskInfo = {};
+          this.questionInfo = {};
+          this.inspectQuestionCategoryList = [];
+          this.waterAlarmCategoryList = [];
+          this.waterAlarmList = [];
+          this.waterWarnList = [];
+        });
     }
   }
+};
 </script>
 
 <style lang="less">
-  .main-pc-index{
-    width: 100%;
-    padding: 10px;
-    background-color: #ffffff;
-    height: 100%;
-    display: flex;
-
-    .main-left {
-      width: 64%;
-      margin-right: 1%;
-
-      .main-left-box {
+.main-pc-index {
+  width: 100%;
+  padding: 10px;
+  background-color: #ffffff;
+  height: 100%;
+  display: flex;
+
+  .main-left {
+    width: 64%;
+    margin-right: 1%;
+
+    .main-left-box {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+
+      > div:first-child {
         display: flex;
         align-items: center;
-        font-size: 12px;
-
-        > div:first-child {
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          color: #999999;
-          width: 190px;
-          border-right: 1px #eeeeee solid;
+        justify-content: flex-start;
+        color: #999999;
+        width: 190px;
+        border-right: 1px #eeeeee solid;
 
-          > img {
-            width: 60px;
-            height: 60px;
-          }
+        > img {
+          width: 60px;
+          height: 60px;
+        }
 
-          > div {
-            margin-left: 15px;
+        > div {
+          margin-left: 15px;
 
-            > div:last-child {
-              font-size: 24px;
-              color: #333333;
-            }
+          > div:last-child {
+            font-size: 24px;
+            color: #333333;
           }
         }
+      }
 
-        > div:last-child {
-          flex: 1;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 0 30px;
+      > div:last-child {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 30px;
 
-          > div {
-            color: #999999;
+        > div {
+          color: #999999;
 
-            > div:last-child {
-              font-size: 24px;
-              color: #333333;
-            }
+          > div:last-child {
+            font-size: 24px;
+            color: #333333;
           }
         }
       }
+    }
+
+    .left-bottom {
+      margin-top: 15px;
+      display: flex;
+      align-items: center;
+
+      > div:first-child {
+        width: 100px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #333333;
+        text-align: right;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
-      .left-bottom {
-        margin-top: 15px;
+      > div:nth-child(2) {
+        flex: 1;
         display: flex;
         align-items: center;
+        margin-left: 10px;
+
+        .el-progress-bar {
+          padding-right: 0rem;
+          width: 100%;
+          margin-right: -0rem;
+        }
+
+        .el-progress-bar__outer {
+          background: #0b2221;
+          border-radius: 10px;
+        }
+      }
+
+      > div:last-child {
+        width: 60px;
+        margin-left: 30px;
+        text-align: left;
+        font-family: PingFangSC-Medium;
+        font-size: 14px !important;
+        color: #17b4ac;
+        line-height: 20px;
+      }
+    }
+  }
 
+  .main-right {
+    width: 35%;
+
+    .el-card__header {
+      .el-button--text {
+        color: #ffffff !important;
+      }
+    }
+
+    .notice-list {
+      .notice-child {
+        width: 100%;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        color: #333333;
+        cursor: pointer;
         > div:first-child {
-          width: 100px;
-          font-family: PingFangSC-Regular;
-          font-size: 14px;
-          color: #333333;
-          text-align: right;
+          flex: 1;
           overflow: hidden;
           text-overflow: ellipsis;
           -o-text-overflow: ellipsis;
           white-space: nowrap;
         }
+        > div:last-child {
+          color: #666666;
+          flex: none;
+          width: 150px;
+          text-align: right;
+        }
+      }
+    }
 
-        > div:nth-child(2) {
-          flex: 1;
+    .right-waterAlarm {
+      > div {
+        cursor: pointer;
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        > div:first-child {
           display: flex;
           align-items: center;
-          margin-left: 10px;
 
-          .el-progress-bar {
-            padding-right: 0rem;
-            width: 100%;
-            margin-right: -0rem;
+          > img {
+            width: 20px;
+            height: 20px;
+            margin-right: 10px;
           }
 
-          .el-progress-bar__outer {
-            background: #0B2221;
-            border-radius: 10px
+          > div:last-child {
+            font-family: PingFangSC-Regular;
+            font-size: 16px;
+            color: #333333;
+            line-height: 16px;
           }
         }
 
         > div:last-child {
-          width: 60px;
-          margin-left: 30px;
-          text-align: left;
-          font-family: PingFangSC-Medium;
-          font-size: 14px !important;
-          color: #17B4AC;
-          line-height: 20px;
+          flex: none;
+          font-family: PingFangSC-Regular;
+          font-size: 16px;
+          text-align: right;
+          width: 100px;
+          color: #333333;
+          line-height: 16px;
         }
       }
-    }
-
-    .main-right {
-      width: 35%;
 
-      .el-card__header {
-        .el-button--text {
-          color: #ffffff !important;
-        }
+      > div:first-child {
+        margin-top: 0px;
       }
+    }
 
-      .notice-list{
-        .notice-child{
-          width: 100%;
-          margin-top: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          font-size: 14px;
-          color: #333333;
-          cursor: pointer;
-          >div:last-child{
-            color: #666666;
-            flex: none;
-            width: 150px;
-            text-align: right;
-          }
-        }
-      }
+    .right-waterWarn {
+      > div {
+        margin-top: 10px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #333333;
 
-      .right-waterAlarm {
-        > div {
-          cursor: pointer;
-          margin-top: 10px;
+        > div:first-child {
           display: flex;
           justify-content: space-between;
           align-items: center;
 
           > div:first-child {
-            display: flex;
-            align-items: center;
-
-            > img {
-              width: 20px;
-              height: 20px;
-              margin-right: 10px;
-            }
-
-            > div:last-child {
-              font-family: PingFangSC-Regular;
-              font-size: 16px;
-              color: #333333;
-              line-height: 16px;
-            }
-          }
-
-          > div:last-child {
-            flex: none;
             font-family: PingFangSC-Regular;
-            font-size: 16px;
-            text-align: right;
-            width: 100px;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 14px;
             color: #333333;
-            line-height: 16px;
           }
-        }
 
-        > div:first-child {
-          margin-top: 0px;
+          > div:last-child {
+            line-height: 14px;
+          }
         }
-      }
 
-      .right-waterWarn {
-        > div {
-          margin-top: 10px;
-          font-family: PingFangSC-Regular;
-          font-size: 14px;
-          color: #333333;
+        > div:last-child {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 5px;
+          color: #666666;
 
           > div:first-child {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            > div:first-child {
-              font-family: PingFangSC-Regular;
-              font-size: 14px;
-              font-weight: bold;
-              line-height: 14px;
-              color: #333333;
-            }
-
-            > div:last-child {
-              line-height: 14px;
-            }
+            line-height: 14px;
           }
 
           > div:last-child {
+            color: #ffffff;
+            border-radius: 10px;
+            height: 14px;
+            width: 37px;
             display: flex;
-            justify-content: space-between;
+            justify-content: center;
             align-items: center;
-            margin-top: 5px;
-            color: #666666;
-
-            > div:first-child {
-              line-height: 14px;
-            }
-
-            > div:last-child {
-              color: #ffffff;
-              border-radius: 10px;
-              height: 14px;
-              width: 37px;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-            }
-
-            .red-div {
-              background: #FF0000;
-            }
-
-            .orange-div {
-              background: #f5A623;
-            }
-
-            .yellow-div {
-              background: #f5d823;
-            }
           }
-        }
 
-        > div:first-child {
-          margin-top: 0px;
+          .red-div {
+            background: #ff0000;
+          }
+
+          .orange-div {
+            background: #f5a623;
+          }
+
+          .yellow-div {
+            background: #f5d823;
+          }
         }
       }
-    }
 
+      > div:first-child {
+        margin-top: 0px;
+      }
+    }
   }
-
+}
 </style>