change

src/views/DataStatis/Dialogs/GCZLDialog/Index.vue

 <template>
   <Dialog
-    title="工程质量详情"
+    :title="title"
     :visible="dialogVisible"
     width="70%"
     @change-visible="changeVisible"
@@ -9,6 +9,7 @@
       :tabList="tabList"
       :currentTab="currentTabNow"
       @change="(val) => changeTab(val)"
+      v-if="tabName == 'ZLPD'"
     ></DialogTabs>
     <component :is="currentTabNow" :data="data" :tabnamenow="tabName"></component>
   </Dialog>
@@ -39,6 +40,10 @@ export default {
     tabName:{
       type: String,
       default: ''
+    },
+    title:{
+      type: String,
+      default: ''
     }
   },
   data() {

src/views/DataStatis/Dialogs/GCZLDialog/ZLJC.vue

@@ -36,7 +36,11 @@
         :label="column.label"
         align="center"
         :prop="column.key"
-      ></el-table-column>
+      >
+        <template slot-scope="scope">
+          <span :class="{'red' : isRed(scope.row[column.key])}">{{scope.row[column.key]}}</span>
+        </template>
+    </el-table-column>
     </el-table>
   </div>
 </template>
@@ -149,6 +153,17 @@ export default {
         this.tableData = arr;
       });
     },
+    isRed(str){
+      if (str) {
+        let num = str.indexOf('%')
+        if (num >= 0) {
+          let str1 = str.substring(0, num) * 1
+          return str1 > 0
+        }
+      }else {
+        return false
+      }
+    },
     getColumns() {
       let arr = [];
       this.columns = [];
@@ -164,7 +179,6 @@ export default {
           key: `unqualified_percent${item.key}`,
         });
       });
-      console.log(this.columns);
       this.columns = [...this.columns];
       console.log(arr, "arr");
     },
@@ -195,4 +209,7 @@ export default {
     margin: 15px 10px;
   }
 }
+.red{
+  color: rgb(248, 98, 98);
+}
 </style>
\ No newline at end of file

src/views/DataStatis/Index.vue

 <template>
   <div id="data-statis">
     <div id="amap-container"></div>
-
+    <div class="map-info">
+      <div class="min-score">
+        <div class="rote blue"></div>
+        <div class="number-score">≥{{warningNum[1]}}正常</div>
+      </div>
+      <div class="min-score">
+        <div class="rote red"></div>
+        <div class="number-score">＜{{warningNum[1]}}预警</div>
+      </div>
+    </div>
     <div class="left-area">
       <Section class="sections" title="政府监管">
         <template #right-slot>
@@ -92,10 +101,12 @@
         </STable>
       </Section>
     </div>
-    <div class="right-area" v-if="currentCityName">
+    <div class="right-area">
       <Section class="sections long" type="long" :title="isProvice ? '浙江省' : currentCityName">
         <template #left-slot v-if="!isProvice">
-          <img src="@/assets/images/index/icon_mapTuiChu.png" alt="" class="map-return" @click="returnCity">
+          <div class="left-slot-img" @click="returnCity">
+            <img src="@/assets/images/index/icon_mapTuiChu.png" alt="" class="map-return">
+          </div>
         </template>
         <template #right-slot>
           <span class="show-more" @click="showCityList">查看更多</span>
@@ -239,6 +250,7 @@
       :tabList="tabListDialog"
       :tabName="tabNameDialog"
       :data="currentRowData"
+      :title="GCZLDialogTitle"
       :visible="GCZLVisible"
       @change-visible="(val) => (GCZLVisible = val)"
     ></GCZLDialog>
@@ -648,7 +660,8 @@ export default {
       isProvice: true,
       questionId: "",
       tabListDialog: [],
-      tabNameDialog: ""
+      tabNameDialog: "",
+      GCZLDialogTitle: ''
     };
   },
   methods: {
@@ -669,10 +682,10 @@ export default {
             ],
             id: item.id,
           });
-          if (item.name == "杭州市") {
-            this.currentCityId = item.id;
-            this.currentCityName = item.name;
-          }
+          // if (item.name == "杭州市") {
+          //   this.currentCityId = item.id;
+          //   this.currentCityName = item.name;
+          // }
         });
         this.switchList(1);
         this.initMapData("amap-container", zhejiangJson, newZhejiangMapData, 1);
@@ -685,6 +698,18 @@ export default {
         getProjectList({ limit: 100 }, false).then((res) => {
           this.data1 = res.data.data;
           this.data2 = res.data.data;
+          if (this.data2.length != 0) {
+            for(var i=0; i<this.data2.length; i++){
+              for(var j=i+1;j<this.data2.length;j++){
+                //如果第一个比第二个小，就交换他们两个位置
+                if(this.data2[i].quality_total_score < this.data2[j].quality_total_score){
+                  var temp = this.data2[i].quality_total_score;
+                  this.data2[i].quality_total_score = this.data2[j].quality_total_score;
+                  this.data2[j].quality_total_score = temp;
+                }
+              }
+            }
+          }
           this.data3 = res.data.data;
         });
         getImportantQuestion().then((res) => {
@@ -852,7 +877,7 @@ export default {
       // }
     },
     initMapData(mapid, baseAreaJson, mapData, maplevel) {
-      var myChart = echarts.init(document.getElementById(mapid));
+      this.myChart = echarts.init(document.getElementById(mapid));
       echarts.registerMap(mapid, baseAreaJson);
       var outdata = []; //地图区域挂载数据
       mapData.forEach(function (item, index) {
@@ -1004,7 +1029,7 @@ export default {
             data: outdata.map((item) => {
               return {
                 ...item,
-                selected: item.name == "杭州市",
+                // selected: item.name == "杭州市",
               };
             }),
             roam: false,
@@ -1046,14 +1071,14 @@ export default {
           },
         ],
       };
-      myChart.clear();
-      myChart.setOption(option);
+      this.myChart.clear();
+      this.myChart.setOption(option);
       window.addEventListener("resize", () => {
         setTimeout(() => {
-          myChart.resize();
+          this.myChart.resize();
         }, 500);
       });
-      myChart.off().on("click", (params) => {
+      this.myChart.off().on("click", (params) => {
         if (maplevel == 1 && params.componentType === "series") {
           if (this.currentCityName == params.data.name) {
             this.currentCityName = "";
@@ -1079,9 +1104,9 @@ export default {
       });
 
       this.$nextTick(() => {
-        myChart.resize();
+        this.myChart.resize();
       });
-      return myChart;
+      // return myChart;
     },
     showZFJG() {
       this.projectListVisible = true;
@@ -1111,12 +1136,14 @@ export default {
       if (type && type == "zljc") {
         this.tabNameDialog = "ZLJC"
         this.tabListDialog = [{ name: "ZLJC", label: "质量检测" }];
+        this.GCZLDialogTitle = '质量检测预警详情'
       } else {
         this.tabNameDialog = "ZLPD"
         this.tabListDialog = [
           { name: "ZLPD", label: "质量评定" },
           { name: "ZLJC", label: "质量检测" },
         ];
+        this.GCZLDialogTitle = '工程质量详情'
       }
       this.currentRowData = data;
       this.GCZLVisible = true;
@@ -1150,7 +1177,7 @@ export default {
         }
       }
       }else if(index == 1){
-        this.questionId = data.project_id
+        this.questionId = data.id
         this.QuestionDetailVisible = true;
       }else {
         this.rowClickGCZL(data, "zljc")
@@ -1176,6 +1203,11 @@ export default {
     },
     returnCity(){
       this.isProvice = true
+       this.myChart.dispatchAction({
+          type: 'unselect',
+          name: this.currentCityName
+       })
+      this.currentCityName = ''
       this.switchList(1);
     },
   },
@@ -1195,13 +1227,48 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.map-return{
-  width: 16px;
-  height: 15px;
-  margin-left: 10px;
+.map-info{
+  width: 177px;
+  height: 34px;
+  background: rgba(0, 0, 0, .5);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  position: fixed;
+  right: 550px;
+  bottom:  calc(calc(100% - 90px) / 3 - calc(28px / 3) + 20px);
+  z-index: 99;
+  .min-score{
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #FFFFFF;
+    .rote{
+      width: 10px;
+      height: 10px;
+      border: 1px solid #BDCAE4;
+      margin-right: 5px;
+    }
+    .blue{
+      background: #374D9D;
+    }
+    .red{
+      background: #7F3431;
+    }
+  }
+}
+.left-slot-img{
+  width: 35px;
+  height: 100%;
   &:hover{
     cursor: pointer;
   }
+  .map-return{
+  width: 16px;
+  height: 15px;
+  margin-left: 10px;
+}
 }
 #data-statis {
   position: relative;