细节优化

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/MapBottom.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-13 10:27:33
- * @LastEditTime: 2022-04-14 17:36:16
+ * @LastEditTime: 2022-04-14 17:59:39
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Bottom.vue
@@ -87,6 +87,7 @@
 
           <div class="bottom-wrapper">
             <el-date-picker
+              style="width: 100%"
               v-model="searchData.value"
               type="daterange"
               start-placeholder="开始日期"
@@ -145,7 +146,9 @@
             <el-table-column prop="handle" label="操作" width="90">
               <template v-slot="scope">
                 <el-button @click="mapDo(scope.row)" type="text"
-                  ><span :class="{target:target==scope.row.id}">巡检信息</span></el-button
+                  ><span :class="{ target: target == scope.row.id }"
+                    >巡检信息</span
+                  ></el-button
                 >
               </template>
             </el-table-column>
@@ -169,9 +172,9 @@
 
 <script>
 import { XjxcMap } from "@/utils/mapClass/xjxcmap";
-import Null from "@/components/bigWindow/Null"
+import Null from "@/components/bigWindow/Null";
 import moment from "moment";
-import Pipe from "./Pipe.vue"
+import Pipe from "./Pipe.vue";
 
 let arr = [
   {
@@ -198,7 +201,7 @@ let arr = [
     id: 3,
     name: "忠诚燃最最最最最做做气",
     unt: 2,
-    type: 4,
+    type: 3,
     state: 1,
     utl: 2,
     value: ["2022-4-1", "2022-4-12"],
@@ -207,7 +210,7 @@ let arr = [
   {
     id: 4,
     name: "忠诚燃最最最最最做做气",
-    unt: 3,
+    unt: 2,
     type: 1,
     state: 3,
     utl: 1,
@@ -244,7 +247,7 @@ let arr = [
     id: 8,
     name: "忠诚燃最最最最最做做气",
     unt: 1,
-    type: 4,
+    type: 3,
     state: 2,
     utl: 3,
   },
@@ -308,7 +311,7 @@ let arr = [
     id: 16,
     name: "忠诚燃最最最最最做做气",
     unt: 1,
-    type: 4,
+    type: 3,
     state: 3,
     utl: 1,
   },
@@ -316,7 +319,7 @@ let arr = [
     id: 17,
     name: "忠诚燃最最最最最做做气",
     unt: 1,
-    type: 4,
+    type: 3,
     state: 1,
     utl: 3,
   },
@@ -343,25 +346,22 @@ export default {
       map: null,
       loading: false,
       // 点击巡检信息的选中状态
-      target:null,
+      target: null,
       // 任务类型选项
       unt: [
-        { value: 1, label: "单位A" },
-        { value: 2, label: "单位B" },
-        { value: 3, label: "单位C" },
-        { value: 4, label: "单位D" },
+        { value: 1, label: "中燃翔科技" },
+        { value: 2, label: "中诚燃气" },
       ],
       type: [
-        { value: 1, label: "类型A" },
-        { value: 2, label: "类型B" },
-        { value: 3, label: "类型C" },
-        { value: 4, label: "类型D" },
+        { value: 1, label: "入户安检" },
+        { value: 2, label: "巡检" },
+        { value: 3, label: "其他" },
       ],
       state: [
-        { value: 1, label: "状态A" },
-        { value: 2, label: "状态B" },
-        { value: 3, label: "状态C" },
-        { value: 4, label: "状态D" },
+        { value: 1, label: "派发中" },
+        { value: 2, label: "已接单" },
+        { value: 3, label: "已反馈" },
+        { value: 4, label: "已归档" },
       ],
       searchData: {
         // 任务名称
@@ -399,14 +399,14 @@ export default {
         state: "",
         value: [],
       };
+      this.enter();
     },
     enter() {
       this.loading = true;
       this.map.infowindowClose();
-      this.target=null;
+      this.target = null;
       this.map.remove();
 
-
       setTimeout(() => {
         this.page = 1;
         const { task, unt, type, state, value } = this.searchData;
@@ -442,13 +442,13 @@ export default {
     },
     mapDo(data) {
       // 暂无信息
-      if(!Array.isArray (eval(data.path) )){
-        this.msgError("暂无巡检信息")
+      if (!Array.isArray(eval(data.path))) {
+        this.msgError("暂无巡检信息");
         return;
       }
-      this.target=data.id;
+      this.target = data.id;
       this.map.remove();
-      this.map.create(data,Null,Pipe)
+      this.map.create(data, Null, Pipe);
     },
   },
 };
@@ -522,8 +522,8 @@ export default {
       .table {
         flex: 1;
         background-color: red;
-        .target{
-          color: #FFC337;
+        .target {
+          color: #ffc337;
           font-weight: 600;
         }
       }

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Pipe.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-14 15:49:20
- * @LastEditTime: 2022-04-14 17:35:00
+ * @LastEditTime: 2022-04-14 17:52:06
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Pipe.vue
@@ -82,7 +82,7 @@ export default {
 
 <style lang="scss" scoped>
 .pipe-wrapper {
-  width: 268px;
+  width: 230px;
   padding: 10px 0 12px;
   background-color: #fff;
   box-sizing: border-box;
@@ -131,6 +131,9 @@ export default {
       > div {
         width: 80px;
         color: #333333;
+        &.left{
+          font-weight: 500;
+        }
         &.right {
           text-align: left;
         }

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Right.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-11 15:07:47
- * @LastEditTime: 2022-04-13 09:25:51
+ * @LastEditTime: 2022-04-14 18:00:06
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
@@ -15,9 +15,9 @@
       <div class="right">进行中</div>
     </div>
     <div class="three flex">
-      <div class="left zzz">123</div>
+      <div class="left zzz">15</div>
       <div class="middle zzz">13</div>
-      <div class="right zzz">123</div>
+      <div class="right zzz">2</div>
     </div>
 
     <div class="four all-flex-h">