Merge branch 'jzl'

zh-baseversion-web/src/assets/styles/all.scss

@@ -77,6 +77,9 @@
 }
 
 .bigwindow {
+  .el-table__header {
+    width: 350px !important;
+  }
 
   // 全局表格样式
   .el-table {
@@ -93,6 +96,23 @@
     }
 
     .el-table__body-wrapper {
+      .el-table__body {
+        border-spacing: 0 5px;
+        font-size: 14px;
+
+        td:nth-child(4) .cell {
+          text-align: center;
+        }
+      }
+
+      .el-table__row {
+        width: 100%;
+        // display: block;
+        vertical-align: 5px;
+        height: 36px;
+        width: 350px;
+      }
+
       .el-table__row:nth-child(2n + 1) {
         background-color: #e6e6e6;
 
@@ -166,13 +186,21 @@
       .el-table__header-wrapper,
       .el-table__fixed-header-wrapper {
         tr {
-          background-color: #213b52 !important;
+          // background-color: #213b52 !important;
+          background: rgba(9, 101, 172, 0.56) !important;
+
+
         }
 
         th {
           word-break: break-word;
-          background-color: #213b52 !important;
-          color: rgba(123, 248, 244, 1);
+          // background-color: #213b52 !important;
+          // color: rgba(123, 248, 244, 1);
+          background: rgba(9, 101, 172, 0.56) !important;
+
+          box-sizing: border-box;
+          border: 1px solid rgba(54, 136, 255, 0.2392);
+          color: #fff;
           height: 30px;
           font-size: 13px;
           padding: 0;
@@ -184,8 +212,9 @@
       }
 
       .el-table__body-wrapper {
+
         .el-table__row:nth-child(2n + 1) {
-          background-color: rgb(11 22 37);
+          background-color: #062A45;
 
           &:hover td {
             background-color: #7bf8f430 !important;
@@ -194,13 +223,18 @@
           td {
             .cell {
               // color: #525252;
-              color: rgba(123, 248, 244, 1);
+              // color: rgba(123, 248, 244, 1);
+              line-height: 14px;
+              color: #fff;
             }
           }
         }
 
         .el-table__row:nth-child(2n) {
-          background-color: #213b52;
+          // background-color: #213b52;
+          background-color: #062A45;
+
+
 
           &:hover td {
             background-color: #7bf8f430 !important;
@@ -208,6 +242,7 @@
 
           td {
             .cell {
+              line-height: 14px;
               color: #fff;
             }
           }
@@ -610,6 +645,7 @@
       }
 
       .el-table__body-wrapper {
+
         .el-table__row:nth-child(2n + 1) {
           background-color: #e6e6e6;
 

zh-baseversion-web/src/components/bigWindow/leftBar.vue

@@ -36,17 +36,10 @@
             <div class="div-p" @click="$router.push('/regulation/supervise')">
               从业人员数(人)
             </div>
-            <span
-              style="
-                font-family: 'arialbd';
-                font-size: 35px;
-      color: rgb(255, 255, 255);
-
-                -webkit-background-clip: text;
-
-              "
-              >{{ allNum.peopleNum }}</span
-            >
+            <div class="div-p-value">
+              {{ allNum.peopleNum }}
+            </div>
+            <div></div>
           </div>
         </div>
         <!-- <div style="width: 86%;margin-left: 4%;border-bottom: 1px dashed #094749;margin-top: 15px;margin-bottom: 15px;"></div> -->
@@ -63,15 +56,7 @@
             <div class="div-p" @click="$router.push('/regulation/pipe')">
               管道长度(m)
             </div>
-            <span
-              style="
-                font-family: 'arialbd';
-                font-size: 35px;
-     color: rgb(255, 255, 255);
-                -webkit-background-clip: text;
-              "
-              >{{ allNum.allPipeLength }}</span
-            >
+            <div class="div-p-value">{{ allNum.allPipeLength }}</div>
           </div>
         </div>
       </div>
@@ -90,30 +75,43 @@
         <div class="rightline2"></div>
       </div>
       <div class="pieone">
-        <div
-          id="myChartpieone"
-          :style="{ width: '100%', height: '100%' }"
-        ></div>
+        <div class="pie-title">巡检任务数量(个)</div>
+        <div class="chars-wrapper">
+          <div id="myChartpieone"></div>
           <div class="titleTex">
-          <div :style="{ color: '#5470c6' }">● 已完成:{{ allNum.typeOne }}</div>
-          <div :style="{ color: '#fa8167' }">● 未完成:{{ allNum.typeTwo }}</div>
+            <div class="titleTex-item">
+              <span>已完成巡检</span>
+              <span class="b">{{ allNum.typeOne }}</span>
+            </div>
+            <div class="titleTex-item">
+              <span>未完成巡检</span>
+              <span class="b">{{ allNum.typeTwo }}</span>
+            </div>
+          </div>
         </div>
       </div>
       <div class="pietwo">
-        <div
-          id="myChartpietwo"
-          :style="{ width: '100%', height: '100%' }"
-        ></div>
+        <div class="pie-title">隐患整治数量(个)</div>
+        <div class="chars-wrapper">
+          <div id="myChartpietwo"></div>
+
           <div class="titleTex">
-          <div :style="{ color: '#5470c6' }">● 已完成:{{this.allNum.hiddenBookFinish}}</div>
-          <div :style="{ color: '#fa8167' }">● 未完成:{{this.allNum.hiddenBookUnFinish}}</div>
+            <div class="titleTex-item">
+              <span>已完成整治</span>
+              <span class="b">{{ allNum.hiddenBookFinish }}</span>
+            </div>
+            <div class="titleTex-item">
+              <span>未完成整治</span>
+              <span class="b">{{ allNum.hiddenBookUnFinish }}</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 任务完成率 -->
     <div class="leftbar3">
-      <div class="item1">
+      <div class="item3">
         <!-- <div class="fong-div"></div>
         <div class="fong-div" style="margin-left: 3px;"></div>
         <div class="fong-div" style="margin-left: 3px;"></div> -->
@@ -144,7 +142,12 @@ import { selectWorkOrderNum } from "@/api/operationMonitor/order";
 // require("echarts/lib/component/title");
 // let echarts = this.$echarts;
 
-import { getQLJG,getSGSL, getYHZZ, getYHTJ } from "@/api/bigWindow/charsData.js";
+import {
+  getQLJG,
+  getSGSL,
+  getYHZZ,
+  getYHTJ,
+} from "@/api/bigWindow/charsData.js";
 
 export default {
   data() {
@@ -158,7 +161,7 @@ export default {
         typeThree: 0,
         typeTwo: 0,
         hiddenBookFinish: 0,
-        hiddenBookUnFinish: 0
+        hiddenBookUnFinish: 0,
       },
       enterpriseIds: {
         enterpriseId: "",
@@ -241,7 +244,7 @@ export default {
       //     this.drawLine(this.datanow);
       //     this.getNum(index);
       // }else
-     console.log("===================>>>>>>>>>>>>>>>>>>",val)
+      console.log("===================>>>>>>>>>>>>>>>>>>", val);
       this.getNum(val);
       // if(index==1){
       //     this.datanow = this.dataone;
@@ -275,162 +278,110 @@ export default {
       // 绘制图表
       pieone.setOption({
         title: {
-          text:
-            "巡检任务数(个) : " + (this.allNum.typeOne + this.allNum.typeTwo),
+          text: "总量",
+          subtext: this.allNum.typeOne + this.allNum.typeTwo || "0",
           left: "center",
-          top: 0,
+          top: 25,
           textStyle: {
             color: "#cddbe4",
             fontSize: "16",
           },
+          subtextStyle: {
+            color: "#cddbe4",
+            fontSize: "16",
           },
-        grid: {
-          bottom: "7%",
-          containLabel: true,
         },
         tooltip: {
           trigger: "item",
+          show: false,
+        },
+        legend: {
+          top: "50%",
+          left: "center",
+          show: false,
         },
         series: [
           {
-            name: "任务概况",
+            color: ["#35A1FF", "#1EC9E3"],
+
+            name: "Access From",
             type: "pie",
-            radius: "55%",
-            center: ["50%", "58%"],
-            data: [
-              {
-                value: this.allNum.typeTwo,
-                name: "未完成",
-                itemStyle: { color: "#fa8167" },
-              },
-              {
-                value: this.allNum.typeOne,
-                name: "已完成",
-                itemStyle: { color: "#5470c6" },
-              },
-            ],
-            labelLine: {
-              length: 20,
-              length2: 50,
+            radius: ["70%", "90%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: "#fff",
+              borderWidth: 0,
             },
+            emphasis: {
               label: {
-              color: "#fff",
-              fontSize: 14,
-              // formatter:"{b}\n\n",
-              // padding:[0,-55],
-              normal: {
                 show: false,
-                position: "outer",
-                // formatter: '{d}%, {c} \n\n',
-                //模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
-                formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
-                // formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
-                borderWidth: 20,
-                borderRadius: 4,
-                padding: [0, -55],
-                rich: {
-                  a_set: {
-                    color: "#cddbe4",
-                    lineHeight: 20,
-                    align: "center",
-                    padding: [55, -40, -15, -40],
-                  },
-                  b_set: {
-                    color: "auto",
-                  },
-                },
-              },
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
+                fontSize: 40,
+                fontWeight: "bold",
               },
             },
             labelLine: {
               show: false,
             },
+            data: [
+              { value: 1048, name: "Search Engine" },
+              { value: 735, name: "Direct" },
+            ],
           },
         ],
       });
+
       pietwo.setOption({
         title: {
-          text: "隐患整治数(个) : " +(this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish),
+          text: "总量",
+          subtext: this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish || "0",
           left: "center",
-          top: 0,
+          top: 25,
           textStyle: {
             color: "#cddbe4",
             fontSize: "16",
           },
+          subtextStyle: {
+            color: "#cddbe4",
+            fontSize: "16",
           },
-        grid: {
-          bottom: "7%",
-          containLabel: true,
         },
         tooltip: {
           trigger: "item",
+          show: false,
+        },
+        legend: {
+          top: "50%",
+          left: "center",
+          show: false,
         },
         series: [
           {
-            name: "任务概况",
+            color: ["#FEA754", "#D8583E"],
+
+            name: "Access From",
             type: "pie",
-            radius: "55%",
-            center: ["50%", "58%"],
-            data: [
-              {
-                value: this.allNum.hiddenBookUnFinish,
-                name: "未完成",
-                itemStyle: { color: "#fa8167" },
-              },
-              {
-                value: this.allNum.hiddenBookFinish,
-                name: "已完成",
-                itemStyle: { color: "#5470c6" },
-              },
-            ],
-            labelLine: {
-              length: 20,
-              length2: 50,
+            radius: ["70%", "90%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: "#fff",
+              borderWidth: 0,
             },
+            emphasis: {
               label: {
-              color: "#fff",
-              fontSize: 14,
-              // formatter:"{b}\n\n",
-              // padding:[0,-55],
-              normal: {
                 show: false,
-                position: "outer",
-                // formatter: '{d}%, {c} \n\n',
-                //模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
-                formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
-                // formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
-                borderWidth: 20,
-                borderRadius: 4,
-                padding: [0, -55],
-                rich: {
-                  a_set: {
-                    color: "#cddbe4",
-                    lineHeight: 20,
-                    align: "center",
-                    padding: [55, -40, -15, -40],
-                  },
-                  b_set: {
-                    color: "auto",
-                  },
-                },
-              },
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
+                fontSize: 40,
+                fontWeight: "bold",
               },
             },
             labelLine: {
               show: false,
             },
+            data: [
+              { value: 1048, name: "Search Engine" },
+              { value: 735, name: "Direct" },
+            ],
           },
         ],
       });
@@ -464,8 +415,8 @@ export default {
           axisLabel: {
             show: true,
             interval: 0, //使x轴文字显示全
-            rotate:10,
-            fontSize:10
+            rotate: 10,
+            fontSize: 10,
           },
           axisTick: {
             //去掉坐标轴刻线
@@ -583,8 +534,8 @@ export default {
   margin-left: 2%;
 }
 .leftbar1 {
-  width: 85%;
-  height: 20%;
+  width: 80%;
+  height: 25%;
   padding-top: 10%;
   pointer-events: auto;
 }
@@ -597,7 +548,7 @@ export default {
 .leftbar3 {
   width: 85%;
   height: 32%;
-  padding-top: 15px;
+  padding-top: 20px;
   padding-bottom: 35px;
   pointer-events: auto;
 }
@@ -620,7 +571,16 @@ export default {
   font-size: 16px;
   font-weight: 700;
   margin-left: 5%;
-  margin-top: 40px;
+  margin-top: 25px;
+}
+.item3 {
+  width: 85%;
+  height: 30px;
+  font-size: 16px;
+  font-weight: 700;
+  margin-left: 5%;
+  padding-top: 25px;
+  line-height: 10px;
 }
 .fong-div {
   width: 4px;
@@ -633,7 +593,7 @@ export default {
   width: 85%;
   height: 2px;
   float: right;
-  background-image: linear-gradient(to left, #3bfafa, #ffffff00);
+  background-image: linear-gradient(to left, #47a0ff, #ffffff00);
   margin-top: 10px;
   margin-right: 50px;
 }
@@ -641,14 +601,16 @@ export default {
   width: 92%;
   height: 2px;
   float: right;
-  background-image: linear-gradient(to left, #3bfafa, #ffffff00);
+  background-image: linear-gradient(to left, #47a0ff, #ffffff00);
+
   margin-top: 10px;
 }
 .rightline3 {
   width: 95%;
   height: 2px;
   float: right;
-  background-image: linear-gradient(to left, #3bfafa, #ffffff00);
+  background-image: linear-gradient(to left, #47a0ff, #ffffff00);
+
   margin-top: 10px;
 }
 /* .dot {
@@ -701,13 +663,25 @@ export default {
         }
     } */
 .div-p {
-  width: 100%;
-  background: url("../../assets/ranqifirst/div-p.png");
+  // width: 100%;
+  width: 155px;
+  // background: url("../../assets/ranqifirst/div-p.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   cursor: pointer;
+  text-align: center;
   padding: 7px 0px;
-  color: #0ff;
+  // color: #0ff;
+}
+.div-p-value {
+  width: 155px;
+  height: 77px;
+  text-align: center;
+  font-family: "arialbd";
+  font-size: 35px;
+  color: rgb(255, 255, 255);
+  -webkit-background-clip: text;
+  background: url("~@/assets/firstimage/left-top-img.png") center;
 }
 
 .div-el {
@@ -756,15 +730,16 @@ export default {
     color: #1e516f;
 } */
 .titleTex {
-  width: 100%;
-  height: 20px;
-  margin-top: 0px;
-  text-align: center;
-  /* font-size: 15px;
-  display: flex;
-  justify-content: space-around;
-  align-items: center; */
-  padding: 0px 30px;
+  flex: 1;
+  align-content: center;
+  .titleTex-item {
+    color: #fff;
+    margin-left: 40px;
+    margin-bottom: 10px;
+    .b {
+      margin-left: 40px;
+    }
+  }
 }
 .leftyj {
   margin-top: 10px;
@@ -790,16 +765,45 @@ export default {
   line-height: 35px;
   padding: 10px 0 0 0;
 }
+
 .pieone {
-  width: 50%;
-  height: 60%;
-  float: left;
+  width: 80%;
+  height: 40%;
+  // float: left;
   margin-top: 30px;
+  margin-left: 40px;
+  .pie-title {
+    color: #fff;
+    margin-bottom: 10px;
+  }
+  .chars-wrapper {
+    width: 100%;
+    // height: 100%;
+    display: flex;
+  }
+  #myChartpieone {
+    width: 100px;
+    height: 100px;
+  }
 }
 .pietwo {
-  width: 50%;
-  height: 60%;
-  float: right;
-  margin-top: 30px;
+  width: 80%;
+  height: 40%;
+  margin-left: 40px;
+  .pie-title {
+    color: #fff;
+    margin-bottom: 10px;
+  }
+  .chars-wrapper {
+    width: 100%;
+    // height: 100%;
+    display: flex;
+  }
+  #myChartpietwo {
+    width: 100px;
+    height: 100px;
+  }
+  // float: right;
+  // margin-top: 30px;
 }
 </style>

zh-baseversion-web/src/components/bigWindow/rightBar.vue

@@ -12,12 +12,12 @@
       <span
         style="letter-spacing: 1px; color: #fff; float: left; margin-left: 50px"
       >
-        预警信息
+        资源统计
       </span>
       <div class="rightline1"></div>
     </div>
     <div class="rightbar1">
-      <div style="padding: 0px 10px; width: 100%; height: 40%">
+      <!-- <div style="padding: 0px 10px; width: 100%; height: 40%">
         <div class="yujingleft yujing">
           <div class="yujingtop">
             <img
@@ -57,53 +57,13 @@
             <span>0</span>
           </div>
         </div>
-      </div>
+      </div> -->
 
-      <div class="left">
       <div
-          class="bottom right-bottom-data-left"
-          @mouseover="mouseover"
-          @mouseout="mouseout"
-        >
-          <el-table
-            size="mini"
-            :data="tableData"
-            :height="tableHeight"
-            class="el-bottom"
-            ref="table"
+        class="echarts-one"
+        style="margin-top: 10px; width: 100%; height: 90%; margin-left: 10px"
       >
-            <el-table-column prop="unitName" label="所在单位" width="80">
-              <template slot-scope="scope">
-                <div class="zzz" :title="scope.row.unitName">
-                  {{ scope.row.unitName }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="detectorType" label="设备类型" width="80">
-              <template slot-scope="scope">
-                <div class="zzz" :title="scope.row.detectorType">
-                  {{ scope.row.detectorType }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="statusName" label="预警信息" width="80">
-              <template slot-scope="scope">
-                <div class="zzz" :title="scope.row.statusName">
-                  {{ scope.row.statusName }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="alarmTime" label="预警时间" width="100">
-            </el-table-column>
-            <el-table-column prop="handledStatus" label="状态">
-              <template slot-scope="scope">
-                <div class="zzz" :title="scope.row.handledStatus">
-                  {{ scope.row.handledStatus }}
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
+        <div id="myChartone" :style="{ width: '100%', height: '100%' }"></div>
       </div>
     </div>
 
@@ -129,14 +89,7 @@
           <div id="huanleft" style="width: 100%; height: 150px"></div>
           <div class="inyuan">
             <div style="letter-spacing: 2px">用户总数</div>
-            <!-- <span
-                    style="
-                      font-family: 'arialbd';
-                      letter-spacing: 2px;
-                      color: #00ffff;
-                      font-size: 20px;
-                    "
-                    >{{diviceNum.juminNum + diviceNum.shangNum + diviceNum.gongNum}}</span> -->
+
             <span
               style="
                 font-family: 'arialbd';
@@ -144,7 +97,7 @@
                 color: #00ffff;
                 font-size: 20px;
               "
-              >{{bingBottomData.totalNumberUsers}}</span
+              >{{ bingBottomData.totalNumberUsers }}</span
             >
           </div>
           <div class="usernum">
@@ -153,12 +106,8 @@
                 <span> ● </span>
                 <span style="color: #cddbe4">居民用户 </span>
               </div>
-
-              <!-- <span style="font-family: 'arialbd'; letter-spacing: 2px">
-                      : {{ diviceNum.juminNum }}</span
-                    > -->
               <span style="font-family: 'arialbd'; letter-spacing: 2px">
-                {{bingBottomData.residentUsers}}</span
+                {{ bingBottomData.residentUsers }}</span
               >
             </div>
             <div class="usernumin in5">
@@ -170,7 +119,7 @@
                       : {{ diviceNum.shangNum }}</span
                     > -->
               <span style="font-family: 'arialbd'; letter-spacing: 2px">
-                 {{bingBottomData.businessUser}}</span
+                {{ bingBottomData.businessUser }}</span
               >
             </div>
             <div class="usernumin in6">
@@ -182,19 +131,19 @@
                       : {{ diviceNum.gongNum }}</span
                     > -->
               <span style="font-family: 'arialbd'; letter-spacing: 2px">
-                 {{bingBottomData.industrialUsers}}</span
+                {{ bingBottomData.industrialUsers }}</span
               >
             </div>
-            <!-- <div class="usernumin in7">
+            <div class="usernumin in7">
               <div class="titletu">
                 <span> ● </span>
-                <span style="color: #cddbe4">餐饮单位用户 </span>
+                <span style="color: #cddbe4">液化气 </span>
               </div>
 
               <span style="font-family: 'arialbd'; letter-spacing: 2px">
                 585</span
               >
-            </div> -->
+            </div>
           </div>
         </div>
 
@@ -227,7 +176,7 @@
               >0
             </span>
           </div>
-          <div class="usernum" style="margin-left: 38px">
+          <div class="usernum" style="margin-left: 30px">
             <div class="usernumin in4">
               <!-- <span> ● </span>
                     <span style="color: #cddbe4">在线 </span>
@@ -315,8 +264,7 @@
                 0</span
               >
             </div>
-            <!-- <div class="usernumin in7">
-
+            <div class="usernumin in7">
               <span style="color: #cddbe4">在线 </span>
               <span
                 style="
@@ -339,7 +287,7 @@
               >
                 67</span
               >
-            </div> -->
+            </div>
           </div>
         </div>
       </div>
@@ -347,7 +295,7 @@
 
     <!-- 资源统计 -->
     <div class="rightbar3">
-      <div class="item1">
+      <div class="item3">
         <!-- <div class="fong-div"></div>
         <div class="fong-div" style="margin-left: 3px;"></div>
         <div class="fong-div" style="margin-left: 3px;"></div> -->
@@ -357,11 +305,52 @@
         <!-- <img src="../../assets/second1/ti-bg.png" alt=""> -->
         <div class="rightline3"></div>
       </div>
+
+      <div class="left">
         <div
-        class="echarts-one"
-        style="margin-top: 30px; width: 100%; height: 90%; margin-left: 10px"
+          class="bottom right-bottom-data-left"
+          @mouseover="mouseover"
+          @mouseout="mouseout"
         >
-        <div id="myChartone" :style="{ width: '100%', height: '100%' }"></div>
+          <el-table
+            size="mini"
+            :data="tableData"
+            :height="tableHeight"
+            class="el-bottom"
+            ref="table"
+          >
+            <el-table-column prop="unitName" label="所在单位" width="80">
+              <template slot-scope="scope">
+                <div class="zzz" :title="scope.row.unitName">
+                  {{ scope.row.unitName }}
+                </div>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="detectorType" label="设备类型" width="80">
+              <template slot-scope="scope">
+                <div class="zzz" :title="scope.row.detectorType">
+                  {{ scope.row.detectorType }}
+                </div>
+              </template>
+            </el-table-column> -->
+            <el-table-column prop="handledStatus" label="状态" width="80">
+              <template slot-scope="scope">
+                <div class="zzz" :title="scope.row.handledStatus">
+                  {{ scope.row.handledStatus }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="statusName" label="预警信息" width="80">
+              <template slot-scope="scope">
+                <div class="zzz" :title="scope.row.statusName">
+                  {{ scope.row.statusName }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="alarmTime" label="预警时间" width="100">
+            </el-table-column>
+          </el-table>
+        </div>
       </div>
     </div>
 
@@ -435,8 +424,26 @@ export default {
       changeTimer: false,
 
       repeatFinshed: false,
-      tableHeight: 135,
-      tableData: [],
+      tableHeight: 185,
+      tableData: [
+        // {
+        //   unitName: 123,
+        //   handledStatus: 123,
+        //   statusName: 345,
+        //   alarmTime: "2014-11-11 10:10:10",
+        // },
+        // {
+        //   unitName: 456,
+        //   handledStatus: 123,
+        //   statusName: 345,
+        //   alarmTime: "2014-11-11 10:10:10",
+        // },
+        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
+        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
+        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
+        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
+        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
+      ],
       yujingdata: {
         unitName: "省移动",
         detectorType: "",
@@ -508,6 +515,7 @@ export default {
     cancel1() {},
     getAlarm() {
       return alarmData().then((response) => {
+        // return;
         this.tableData = response.data.pageData;
         if (this.tableData.length > 0) {
           this.yujingdata = this.tableData[0];
@@ -523,7 +531,7 @@ export default {
     getYHTJ() {
       getYHTJ().then((res) => {
         console.log("cccccccc", res);
-        this.bingBottomData=res.data;
+        this.bingBottomData = res.data;
       });
     },
     getScrollHeight() {
@@ -560,7 +568,8 @@ export default {
       );
       clearInterval(this.timer);
       this.timer = setInterval(async () => {
-        if (selectWrap.scrollTop == this.scrollHeight) {
+        // console.log(selectWrap.scrollTop,this.scrollHeight)
+        if (selectWrap.scrollTop >= this.scrollHeight) {
           clearInterval(this.timer);
           await this.getAlarm();
           selectWrap.scrollTop = 0;
@@ -730,6 +739,8 @@ export default {
       // 绘制图表
       myChart1.setOption({
         legend: {
+          // top:"-10%",
+          right: "5%",
           textStyle: {
             fontSize: 12, //字体大小
             color: "#ffffff", //字体颜色
@@ -739,10 +750,10 @@ export default {
           trigger: "item",
         },
         grid: {
-          top: "20%",
+          top: "25%",
           left: "3%",
           right: "4%",
-          bottom: "10%",
+          bottom: "5%",
           containLabel: true,
         },
         dataset: {
@@ -990,6 +1001,7 @@ export default {
               { name: "居民用户", value: 1121 },
               { name: "商业用户", value: 41 },
               { name: "工业用户", value: 0 },
+              { name: "液化气", value: 10 },
               // { name: "餐饮单位用户", value: 543 },
             ],
           },
@@ -1147,23 +1159,22 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .rightb {
   width: 98%;
   height: 100%;
- 
 }
 .rightbar1 {
-  width: 90%;
-  height: 20%;
-  margin-left: 12%;
+  width: 80%;
+  height: 21%;
+  margin-left: 16%;
   pointer-events: auto;
 }
 .rightbar2 {
   width: 76%;
-  height: 37%;
+  height: 45%;
   padding-top: 30px;
-  margin-left: 20%;
+  margin-left: 22%;
   pointer-events: auto;
 }
 .rightbar3 {
@@ -1178,7 +1189,8 @@ export default {
   width: 85%;
   height: 2px;
   float: left;
-  background-image: linear-gradient(to right, #3bfafa, #ffffff00);
+  background-image: linear-gradient(to right, #47a0ff, #ffffff00);
+
   margin-top: 10px;
   margin-left: 50px;
 }
@@ -1186,14 +1198,16 @@ export default {
   width: 92%;
   height: 2px;
   float: left;
-  background-image: linear-gradient(to right, #3bfafa, #ffffff00);
+  background-image: linear-gradient(to right, #47a0ff, #ffffff00);
+
   margin-top: 10px;
 }
 .rightline3 {
   width: 95%;
   height: 2px;
   float: left;
-  background-image: linear-gradient(to right, #3bfafa, #ffffff00);
+  background-image: linear-gradient(to right, #47a0ff, #ffffff00);
+
   margin-top: 10px;
 }
 .titleTex {
@@ -1224,8 +1238,8 @@ export default {
   height: 30px;
   font-size: 16px;
   font-weight: 700;
-  margin-left: 14%;
-  padding-top: 25px;
+  margin-left: 5%;
+  margin-top: 15px;
   line-height: 10px;
 }
 .item1 img {
@@ -1237,7 +1251,16 @@ export default {
   font-size: 16px;
   font-weight: 700;
   margin-left: 5%;
-  margin-top: 40px;
+  margin-top: 15px;
+}
+.item3 {
+  width: 85%;
+  height: 30px;
+  font-size: 16px;
+  font-weight: 700;
+  margin-left: 10%;
+  margin-top: 15px;
+  line-height: 10px;
 }
 .dot {
   display: inline-block;
@@ -1328,14 +1351,15 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
+  margin-bottom: 5px;
 }
 .titletu {
-  margin-left: 50px;
+  margin-left: 40px;
   width: 120px;
   text-align: left;
 }
 titletu2 {
-  margin-left: 50px;
+  margin-left: 40px;
   width: 70px;
   text-align: left;
 }
@@ -1370,8 +1394,10 @@ titletu2 {
   border: 2px solid #125c9b;
   position: fixed;
   margin-bottom: 10px;
+  /* margin-top: -122px;
+  margin-left: 62px; */
   margin-top: -122px;
-  margin-left: 62px;
+  margin-left: 44px;
   font-size: 15px;
   color: #cddbe4;
   text-align: center;
@@ -1385,9 +1411,14 @@ titletu2 {
 }
 .left {
   margin-top: 10px;
-  width: 400px;
-  height: 55%;
-  margin-left: 55px;
+  width: 350px;
+  height: 75%;
+  margin-left: 35px;
+
+  .right-bottom-data-left {
+    height: 100%;
+    // background: red;
+  }
 }
 .yj {
   padding: 0px 10px;

zh-baseversion-web/src/utils/mapClass/config.js

 /*
  * @Author: your name
  * @Date: 2022-01-26 10:47:44
- * @LastEditTime: 2024-07-18 17:36:58
+ * @LastEditTime: 2024-07-19 10:38:10
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/config.js
@@ -37,6 +37,9 @@ export const svgUrl = {
   6: require("@/assets/firstimage/device/jmUser.png"),
   // 商业用户
   61:require("@/assets/firstimage/device/syUser.png"),
+  // 工业用户
+  62:require("@/assets/firstimage/device/syUser.png"),
+
   7: require("@/assets/image/zrxk.svg"),
   8: require("@/assets/image/zcrq.svg"),
 

zh-baseversion-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2024-07-18 17:07:55
+ * @LastEditTime: 2024-07-19 14:59:20
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -167,31 +167,29 @@ export class EditorMap {
         }
       }
     });
-    this.map.on("moveend", () => {
-      console.log("地图停止移动");
-      if (this.flag) {
-        console.log("弹框");
-        this.flag = false;
-      }
-      //居民用户
+    this.map.on("mousedown", () => {
+      console.log("mapONMousedown");
+
       if (this.detectorUserlabelsLayer != null) {
         const detectorUserHas = this.selarr.indexOf(6) >= 0;
         if (detectorUserHas) {
-          this.detectorUserlabelsLayer.show();
+          this.detectorUserlabelsLayer.hide();
         }
       }
+
       //商业用户
       if (this.businessDetectorUserlabelsLayer != null) {
         const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
         if (businessDetectorUserHas) {
-          this.businessDetectorUserlabelsLayer.show();
+          this.businessDetectorUserlabelsLayer.hide();
         }
       }
+
       // 调压箱
       if (this.tyxlabelsLayer != null) {
         const tyxHas = this.selarr.indexOf(2) >= 0;
         if (tyxHas) {
-          this.tyxlabelsLayer.show();
+          this.tyxlabelsLayer.hide();
         }
       }
 
@@ -199,7 +197,7 @@ export class EditorMap {
       if (this.fmjlabelLayer != null) {
         const fmjHas = this.selarr.indexOf(3) >= 0;
         if (fmjHas) {
-          this.fmjlabelLayer.show();
+          this.fmjlabelLayer.hide();
         }
       }
 
@@ -207,7 +205,7 @@ export class EditorMap {
       if (this.czlabelLayer != null) {
         const czHas = this.selarr.indexOf(4) >= 0;
         if (czHas) {
-          this.czlabelLayer.show();
+          this.czlabelLayer.hide();
         }
       }
 
@@ -215,7 +213,7 @@ export class EditorMap {
       if (this.videolabelLayer != null) {
         const videoHas = this.selarr.indexOf(5) >= 0;
         if (videoHas) {
-          this.videolabelLayer.show();
+          this.videolabelLayer.hide();
         }
       }
 
@@ -223,34 +221,31 @@ export class EditorMap {
       if (this.deviceUserlableLayer != null) {
         const deviceUserHas = this.selarr.indexOf(18) >= 0;
         if (deviceUserHas) {
-          this.deviceUserlableLayer.show();
+          this.deviceUserlableLayer.hide();
         }
       }
     });
-    this.map.on("movestart", () => {
-      console.log("地图开始移动");
-
+    this.map.on("mouseup", () => {
       //居民用户
+
       if (this.detectorUserlabelsLayer != null) {
         const detectorUserHas = this.selarr.indexOf(6) >= 0;
         if (detectorUserHas) {
-          this.detectorUserlabelsLayer.hide();
+          this.detectorUserlabelsLayer.show();
         }
       }
-
       //商业用户
       if (this.businessDetectorUserlabelsLayer != null) {
         const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
         if (businessDetectorUserHas) {
-          this.businessDetectorUserlabelsLayer.hide();
+          this.businessDetectorUserlabelsLayer.show();
         }
       }
-
       // 调压箱
       if (this.tyxlabelsLayer != null) {
         const tyxHas = this.selarr.indexOf(2) >= 0;
         if (tyxHas) {
-          this.tyxlabelsLayer.hide();
+          this.tyxlabelsLayer.show();
         }
       }
 
@@ -258,7 +253,7 @@ export class EditorMap {
       if (this.fmjlabelLayer != null) {
         const fmjHas = this.selarr.indexOf(3) >= 0;
         if (fmjHas) {
-          this.fmjlabelLayer.hide();
+          this.fmjlabelLayer.show();
         }
       }
 
@@ -266,7 +261,7 @@ export class EditorMap {
       if (this.czlabelLayer != null) {
         const czHas = this.selarr.indexOf(4) >= 0;
         if (czHas) {
-          this.czlabelLayer.hide();
+          this.czlabelLayer.show();
         }
       }
 
@@ -274,7 +269,7 @@ export class EditorMap {
       if (this.videolabelLayer != null) {
         const videoHas = this.selarr.indexOf(5) >= 0;
         if (videoHas) {
-          this.videolabelLayer.hide();
+          this.videolabelLayer.show();
         }
       }
 
@@ -282,10 +277,22 @@ export class EditorMap {
       if (this.deviceUserlableLayer != null) {
         const deviceUserHas = this.selarr.indexOf(18) >= 0;
         if (deviceUserHas) {
-          this.deviceUserlableLayer.hide();
+          this.deviceUserlableLayer.show();
         }
       }
     });
+    this.map.on("moveend", () => {
+      console.log("地图停止移动");
+      if (this.flag) {
+        console.log("弹框");
+        this.flag = false;
+      }
+    });
+    this.map.on("movestart", () => {
+      console.log("地图开始移动");
+      return;
+      //居民用户
+    });
     // this.map.on('zoomchange', () => {
     //   //获取当前最新的地图层级
     //    let Zoom = this.map.getZoom()
@@ -1368,10 +1375,12 @@ export class EditorMap {
       });
     }
     console.log(this.allDevice);
+    // return;
     for (let deviceItem in this.allDevice) {
       this.allDevice[deviceItem].forEach((device) => {
         const data = device.filterData || device.getExtData();
-        console.log(data.iconType);
+        console.log("data", data.filterData);
+        // console.log(data.iconType);
         // 设备过滤受到bigwindow页面的的两种制约，companyArr, typeArr 两个数组制约显示隐藏
         // 燃气没有公司，所以没有device.companyType不收到公司的控制
         const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
@@ -1382,8 +1391,10 @@ export class EditorMap {
         // 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
         if (enterprise || (deviceHas && (companyHas || !data.companyType))) {
           device.show();
+          // console.log(data.iconType,companyHas,deviceHas,enterprise,'show')
         } else {
           device.hide();
+          // console.log(data.iconType,companyHas,deviceHas,enterprise,"hide")
         }
       });
     }
@@ -1409,7 +1420,7 @@ export class EditorMap {
       }
     }
 
-    //判断是否需要显示  调压箱
+    // 判断是否需要显示  调压箱
     const tyxHas = typeArr.indexOf(2) >= 0;
     if (this.tyxlabelsLayer != null) {
       if (tyxHas) {
@@ -1419,7 +1430,7 @@ export class EditorMap {
       }
     }
 
-    //判断是否需要显示  阀门井
+    // 判断是否需要显示  阀门井
     const fmjHas = typeArr.indexOf(3) >= 0;
     if (this.fmjlabelLayer != null) {
       if (fmjHas) {

zh-baseversion-web/src/views/bigWindow/components/Top.vue

@@ -47,13 +47,12 @@
         <div
           class="devie-item zzz"
           v-for="item in searchList"
-          :key="item.id+''+item.type"
+          :key="item.id + '' + item.type"
           @click="deviceItemClick(item)"
         >
           <!-- {{ item.NAME }} -->
           <div class="a">{{ devviceData[item.type] }}</div>
           <div class="b">{{ item.NAME }}</div>
-
         </div>
       </div>
     </transition>
@@ -138,11 +137,11 @@ export default {
       }
     },
     searchClick() {
-      this.searchItemShow = true;
-
       searchDevice({ name: this.searchVal }).then((res) => {
         if (res.code == 200) {
           this.searchList = Object.values(res.data).flat();
+          this.searchItemShow = true;
+
           console.log(this.searchList);
         }
       });
@@ -150,10 +149,28 @@ export default {
     deviceItemClick(item) {
       searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
         if (res.code == 200) {
-          if (res.data.length == 0) return;
-          this.$emit("deviceSearchClick",item, res.data[0]);
+          let dataArr = null;
+          console.log(res)
+          // 1.阀井
+          // 2.调压箱
+          // 3.场站
+          // 4.居民用户
+          // 5.商业用户
+          // 6.工业用户
+          // 7.监控
+          // 8.餐饮单位液化气用户
+          // 9.管道
+          // 1,2,3的时候 是res.data.data才能获取数据，结构为数组。
+          // 4，5 是 res.data就能获取数据，结构为数组
+          // 7,8，9的时候，res.data能获取数据，结构为对象
+          // if (item.type == 1 || item.type == 2 || item.type == 3) {
+          //   dataArr = res.data.data;
+          // }else if(item.type == 4 || item.type == 5 || item.type == 6){
+
+          // }
+          // if (dataArr.length == 0) return;
+          // this.$emit("deviceSearchClick", item, res);
         }
-        console.log(res);
       });
     },
     clearSearchContainer() {

zh-baseversion-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2024-07-18 17:27:20
+ * @LastEditTime: 2024-07-19 16:18:43
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -49,12 +49,13 @@
     <!-- 头部 -->
     <div class="banner-test">
       <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
-      <img
+      <!-- <img
         v-if="this.enterpriseId == -2"
         src="../../assets/images/zibk.png"
         alt=""
       />
-      <img v-else src="../../assets/images/20230805152711.png" alt="" />
+      <img v-else src="../../assets/images/20230805152711.png" alt="" /> -->
+      智慧燃气安全监管平台
     </div>
 
     <!-- 左边 -->
@@ -397,21 +398,27 @@ export default {
       GetCompany: "bigWindowCompany/GetCompany",
     }),
     // 搜索设备上图功能
-    deviceSearchClick(device,deviceDetail){
-      console.log(device,deviceDetail)
+    deviceSearchClick(device, deviceDetail) {
+      console.log(device, deviceDetail);
+      // let Company =null;
+      // if(){
+
+      // }
+
+      // this.goMap(getEnterprise, this.addDevice, Company, true);
     },
     leftRightBarChange() {
       const scale = window.innerHeight / 1080;
       let right = 0;
       if (scale >= 1) {
-        right = (585 / 2) * (scale - 1) - 20;
+        right = (482 / 2) * (scale - 1) - 20;
       } else {
-        right = (585 / 2) * (scale - 1) - 20;
+        right = (482 / 2) * (scale - 1) - 20;
       }
 
       // console.log("right", right, "scale", scale);
       this.changeRightBarStyle = [
-        { right: right + "px" },
+        { right: right + 20 + "px" },
         { transform: `scale(${scale})` },
       ];
       this.changeLeftBarStyle = [
@@ -492,6 +499,7 @@ export default {
     ) {
       return httpFunc().then((res) => {
         // 给用户加icontype
+        console.log("管道", res.data);
         if (res.data && !res.data[0].iconType) {
           res.data.forEach((item) => {
             item.iconType = 6;
@@ -518,29 +526,32 @@ export default {
     labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
-        console.log("用户用户",mapData)
+        console.log("液化气用户用户", mapData);
 
         this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksVideoGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
-        const mapData = res.data;
-        console.log('Video',mapData)
+        const mapData = res;
+        console.log("Video", mapData);
         this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksCzGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
-        console.log("场站场站场站场站场站场站场站场站场站场站场站场站",mapData)
+        console.log(
+          "场站场站场站场站场站场站场站场站场站场站场站场站",
+          mapData
+        );
         this.map.labelsLayerMarksCzGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksFmjGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
-        console.log("阀门井",mapData)
+        console.log("阀门井", mapData);
 
         this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
       });
@@ -548,14 +559,14 @@ export default {
     labelsLayerMarksTysGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
-        console.log("调压箱",mapData)
+        console.log("调压箱", mapData);
         this.map.labelsLayerMarksTysGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
-        console.log("用户",mapData)
+        console.log("用户用户用户用户用户", mapData);
         this.map.labelsLayerMarksDetectorUserList(mapData, component, show);
       });
     },
@@ -661,7 +672,7 @@ export default {
       //   this.selarr1.push(item.val);
       // }
       this.selarr1 = [...selarr1];
-      console.log(this.selarr, this.selarr1)
+      console.log(this.selarr, this.selarr1);
       this.map.allfilter(this.selarr, this.selarr1);
     },
     //用户的设备center
@@ -772,7 +783,15 @@ export default {
 .banner-test {
   width: 100%;
   height: 85px;
+  font-family: "YouSheBiaoTiHei";
+  font-size: 40px;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.08em;
+
   position: relative;
+  color: #fff;
+  line-height: 85px;
   top: -10px;
   z-index: 998;
   text-align: center;
@@ -787,29 +806,35 @@ export default {
 }
 
 .leftbar {
-  width: 565px;
+  // width: 585px;
   // height: 93%;
-  height: 1010px;
+  // height: 1010px;
+  height: 933px;
+  width: 482px;
 
   position: fixed;
   // top: 70px;
   top: 50%;
-  margin-top: -470px;
+  margin-top: -450px;
   z-index: 999;
   background: url("../../assets/firstimage/le.png");
-  background-size: 105% 100%;
+  background-size: 100% 100%;
+
   background-repeat: no-repeat;
-  margin-left: -20px;
+  margin-left: 2px;
   pointer-events: none;
 }
 .rightbar {
-  width: 585px;
-  height: 1010px;
+  // width: 585px;
+  // height: 1010px;
+  height: 933px;
+  width: 482px;
   position: fixed;
   top: 50%;
-  margin-top: -470px;
+  margin-top: -450px;
   z-index: 999;
   // right: 861px;
+  margin-right: 4px;
   background: url("../../assets/firstimage/ri.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;