From 01a42a1e62e5c95b7a23f5ec86bc57782b7deca2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=BD=87=E5=86=9B?=
 <http://git.aihuoshi.net/huangxj>
Date: Tue, 26 Aug 2025 11:45:35 +0800
Subject: [PATCH] =?UTF-8?q?<feat>:=E6=8F=90=E4=BA=A4=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TaskScreenView/MapComponent copy.vue      | 168 ++++++++++++++++++
 .../TaskScreenView/MapComponent.vue           |  24 ++-
 .../TaskScreenView/components/BlockTitle.vue  |  52 ++++++
 .../TaskScreenView/images/block-title.png     | Bin 0 -> 4060 bytes
 .../ScreenViewManage/TaskScreenView/index.vue | 149 +++++++++-------
 5 files changed, 324 insertions(+), 69 deletions(-)
 create mode 100644 packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent copy.vue
 create mode 100644 packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/components/BlockTitle.vue
 create mode 100644 packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/images/block-title.png

diff --git a/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent copy.vue b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent copy.vue
new file mode 100644
index 0000000..a7c477b
--- /dev/null
+++ b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent copy.vue	
@@ -0,0 +1,168 @@
+<template>
+  <div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+/**
+ * props.rectangles: Array<{ id, name, status, geomWkt }>
+ *  - geomWkt: "POLYGON((lng lat,lng lat,...))"
+ *  - status: 施工中 | 已施工 | 未施工 | 故障 | 运行中 | 停机
+ */
+const STATUS_STYLE = {
+  施工中: { stroke: 'rgba(41,169,253,1)', fill: 'rgba(41,169,253,0.45)' },
+  已施工: { stroke: 'rgba(82,196,26,1)', fill: 'rgba(82,196,26,0.45)' },
+  未施工: { stroke: 'rgba(250,173,20,1)', fill: 'rgba(250,173,20,0.45)' },
+  故障: { stroke: 'rgba(219,77,77,1)', fill: 'rgba(219,77,77,0.6)' },
+  运行中: { stroke: 'rgba(19,194,194,1)', fill: 'rgba(19,194,194,0.45)' },
+  停机: { stroke: 'rgba(99,99,99,1)', fill: 'rgba(0,0,0,0.45)' }
+};
+
+export default {
+  name: 'TaskMapPolygon',
+  props: {
+    rectangles: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      map: null,
+      AMapIns: null,
+      polygons: [],
+      texts: [],
+      pointAll: { lng: [], lat: [] }
+    };
+  },
+  watch: {
+    rectangles: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (this.map && val?.length) {
+          this.clearLayers();
+          this.formatData(val);
+        }
+      }
+    }
+  },
+  mounted() {
+    this.initAMap();
+  },
+  beforeUnmount() {
+    this.map?.destroy();
+  },
+  methods: {
+    initAMap() {
+      const map_center = JSON.parse(this.$storage.get('map_center') || 'null');
+      let defaultCenterPoint = [121.5563, 32.107];
+      if (map_center) {
+        defaultCenterPoint = map_center.find((el) => el.key == 'default')?.value || defaultCenterPoint;
+      }
+
+      window._AMapSecurityConfig = { securityJsCode: '5869fe06ab3640b49006f4ec5e595e9f' };
+      AMapLoader.load({
+        key: '3758e4530242ba6282c77f96ea69262d',
+        version: '2.0',
+        plugins: ['AMap.MouseTool', 'AMap.Scale', 'AMap.Text']
+      })
+        .then((AMap) => {
+          this.AMapIns = AMap;
+          this.map = new AMap.Map('map', {
+            viewMode: '2D',
+            zoom: 12,
+            center: defaultCenterPoint
+          });
+          if (this.rectangles?.length) {
+            this.formatData(this.rectangles);
+          }
+        })
+        .catch(console.error);
+    },
+    clearLayers() {
+      if (!this.map) return;
+      this.map.remove(this.polygons);
+      this.map.remove(this.texts);
+      this.polygons = [];
+      this.texts = [];
+      this.pointAll = { lng: [], lat: [] };
+    },
+    formatData(data = []) {
+      // 解析 WKT -> AMap path，并着色绘制（使用原始坐标，不做偏移转换）
+      const list = (data || []).map((item, index) => {
+        const raw = (item.geomWkt || '')
+          .replace(/POLYGON\(\(/i, '')
+          .replace(/\)\)$/i, '')
+          .trim();
+        const points = raw.split(',');
+        const path = [];
+        for (let i = 0; i < points.length; i++) {
+          const parts = points[i].trim().split(/\s+/);
+          const lng = Number(parts[0]);
+          const lat = Number(parts[1]);
+          if (isNaN(lng) || isNaN(lat)) continue;
+          this.pointAll.lng.push(lng);
+          this.pointAll.lat.push(lat);
+          path.push([lng, lat]);
+        }
+        return { ...item, path, index };
+      });
+
+      list.forEach((it) => this.createPolygon(it));
+
+      // 视野自适配：基于多边形覆盖物
+      if (this.polygons.length) {
+        // padding: [top, right, bottom, left]
+        this.map.setFitView(this.polygons, false, [60, 60, 60, 60]);
+      }
+    },
+    createPolygon(item) {
+      const { path, status, name } = item;
+      const style = STATUS_STYLE[status] || STATUS_STYLE['未施工'];
+      const polygon = new this.AMapIns.Polygon({
+        path,
+        strokeColor: style.stroke,
+        strokeWeight: 2,
+        strokeOpacity: 1,
+        strokeStyle: 'solid',
+        fillColor: style.fill,
+        fillOpacity: 0.45,
+        cursor: 'pointer',
+        zIndex: 50
+      });
+      console.log(polygon, 'polygon');
+      this.map.add(polygon);
+      this.polygons.push(polygon);
+
+      // 居中名称标签
+      const text = new this.AMapIns.Text({
+        text: name || '',
+        anchor: 'center',
+        style: { 'background-color': 'transparent', border: 'none', color: '#ffffff', 'font-size': '12px' }
+      });
+      // 计算简单中心点
+      const mid = path[Math.floor(path.length / 2)] || path[0];
+      if (mid) text.setPosition(mid);
+      text.setMap(this.map);
+      this.texts.push(text);
+
+      // hover 高亮
+      polygon.on('mouseover', () => {
+        polygon.setOptions({ fillOpacity: 0.55 });
+      });
+      polygon.on('mouseout', () => {
+        polygon.setOptions({ fillOpacity: 0.35 });
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+#map {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue
index a7c477b..f502d6a 100644
--- a/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue
+++ b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
+  <div style="position: relative; height: 100%; width: 100%; overflow: hidden">
+    <div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
+    <div v-if="darkMask" class="dark-mask"></div>
+  </div>
 </template>
 
 <script>
@@ -25,6 +28,11 @@ export default {
     rectangles: {
       type: Array,
       default: () => []
+    },
+    // 进一步压暗卫星底图的遮罩
+    darkMask: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -70,10 +78,13 @@ export default {
       })
         .then((AMap) => {
           this.AMapIns = AMap;
+          // 使用卫星图层（不叠加道路线）
+          const satellite = new AMap.TileLayer.Satellite();
           this.map = new AMap.Map('map', {
             viewMode: '2D',
             zoom: 12,
-            center: defaultCenterPoint
+            center: defaultCenterPoint,
+            layers: [satellite]
           });
           if (this.rectangles?.length) {
             this.formatData(this.rectangles);
@@ -165,4 +176,13 @@ export default {
   width: 100%;
   height: 100%;
 }
+.dark-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 10, 26, 0.25);
+  pointer-events: none;
+}
 </style>
diff --git a/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/components/BlockTitle.vue b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/components/BlockTitle.vue
new file mode 100644
index 0000000..ffc1554
--- /dev/null
+++ b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/components/BlockTitle.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="block-title">
+    <div class="title-left">
+      <img src="../images/block-title.png" alt="logo" />
+      <div class="title-text">{{ title }}</div>
+    </div>
+    <div class="title-more">
+      <slot name="more"> </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BlockTitle',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.block-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 28px;
+  img {
+    height: 26px;
+    width: auto;
+    margin-right: 8px;
+  }
+  .title-left {
+    display: flex;
+    align-items: center;
+  }
+  .title-text {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600;
+    font-size: 20px;
+    color: #333333;
+  }
+  .title-more {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #4886e0;
+  }
+}
+</style>
diff --git a/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/images/block-title.png b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/images/block-title.png
new file mode 100644
index 0000000000000000000000000000000000000000..c665701c86c6c596b35f955e0b75e72ee2340ba9
GIT binary patch
literal 4060
zcmV<24<qo2P)<h;3K|Lk000e1NJLTq0027x001=z1^@s6|1Xon000k>Nkl<ZcmeE~
zS&U`HdB^`>o#pQLc2D>18HO=4(+rkll!#%mh~$SE<sm^La*zzKmK7<Hq9hWL5`nRq
z;W2qYRvam^5(x3Y5CIR!aug}Dl8F@s#R(3H051%)0JHUa_wAgjFaJ8XZ_nP-(_k54
zj_%i0r>ag>{p$aHRp+$9FVXcW>?c+1PnG>t*-yX<eCo!Z01>Z=@Uc}^Rb^t=ocR_C
ze=e}!{%?(*eqRfRRl}Q|(;A?8`DOUI$x}}ugTC2*uGQXmc&+j+mmPXj<6b@eg0uF!
zrBk@)FW=GJW;&Zd9s`26-a`2K&yUjw4<UFNFuop8*-T&8Yx9x9deEs#dY^T8)>(W}
ztvk{}vj2~60PI1I9U~kN?)w1IA{OIDxRk>jVw^)%KZS?@!QsRBc)*T9k%6k3y{gDr
z>-I`&j%-ho{nt}C0|f%?LD)Ht{MinQalT#*<Jn@TgA#xuE&tE|huoLHjF9aO@3-{Z
z@`IO-=0Pik^b1zqGpe#zordb@bSeSU-OdF^8a>=~rNW1~DzCqeF#0J9^%AB+)1Pwr
zK_w8>0$?g1qoxU}g$U(Bu~Te>$o<oCL@&Lh!KLGGHg7iD@Ote$=u`#w!I-~wR_E0r
zq#MH#cFjVyx;wS@g{fw;4(vf6d>ui$7lk{vV}4H!Pw$+LzZfIfApvIj_}pNa&M``7
zf&r#Pqe`5jv~3%5_4=tT0e>jiF{qEx^cku-4@Kw!3A_%g3RqvRdYdA6p}dsb_4I#e
z;Xxp%?L}cO#ok;FPdde2<$UmG+p59+q1ev|>@5)4L1pKt<4hqoQ?7<e*hZ;x+n!wg
zzMBW$GVDcA5LD&~m4RBT;%x%$Rrc`eB(&DuM$bOFjCB8r<CroDc2`RH)6`*il0up0
zrt;=1)x6woj1X9EacXy3Yj>nhW{qOXT2vU}#ftO5W0zK?{<!hACD=neUaDo>n>swB
zItKMn9?%=dR&{_c^C@>`WaR`_>ptUDjwXryjWCBl8K&4dvKS@~?NrfoieOvG{AMxM
zUoqlt713LS3LD6r9obnUm>LX*)iE$#`aVQ!XYvhc%?(>z(O?4VG<_D1pp4Nm2-bj@
zdUYM3OkJunsaK~$b)urtowdmPb*r!Y`XdZ`BQ%+|2;L@i*C}+a8r)rqWp6059dO&7
z(;dd3o*Fx&#$>>Qh%W7r+y5}a&1_mX1^aE)s9H|%Rf1Bzc~0uG%_vimkP|qcdh_LA
zV}hc<5kFTm5zDJ5o7lh5(V#s<yO*HRPtc-`fgN1E8ho~x$E{%?vk1%#7i-Qq)Wg_p
z^T3fo*(=;UfqcD==q1$v8(bWEgW5}~JZSH<2Q|-nPy&pPmo+#}9+|0dPBcqBoG9DU
zd`E&jN4ulOKYXS$P_sJF!tqtyf1#ssYk*E?hz3<|^;5JHi>@k?dL`Ih2(iPc&KeI)
z(KBFUwwVzw#_(-)X})}Hq%cSJ6WQ22Xy;UNk5&8~-D!RTn!$16lhntkk5A1&0k+G`
zD_Rs_U&X-Jbw)sIDB2o`tPW6oX9Wk(w2)uzqf6kX2ks{5j2wC#Gp*OmZKWKxgTSJg
zRSyihw6ilKn@nHawCK|NukX?~g!Q2PQ@Gnfo>MhEUWB`@P(^QGdeJ6u9)6N1Bl4m$
zUl9RS?<Jz`5pC#!0lKhR?Q8k?iav0*g<^xituESh=hk3^E*G#zDePP=*j*}^?Lk0A
z#mtD2y3*4_Dr~uFO@Nnq4wnf`ce;x0sseVr{_~*S53oOl`+H9QcB)FyYr}cKiLot3
z06$ld#i&<Qc-~SmP`S)nRJSu!!m7VF%^}JsR`j>eG*NCP=&@agz?~uUsgpi9?2ZcN
zi;>=9L}&Q6Ru4^37lYYQu#JmaOYN|XCJI%H_+@@fTnT(#*bMY!vfri25eDJys^VY$
zsH9$ESU+AoVCKRO@OkJMl$#Mk5gnwW-30Vapi9smL9^87Y2Bd)t$|hv{5$8Gs8I0%
zVY`DAy-|t*6{atU?wAht6?51bh|D;_tl^R5)Xq9dr-HzgWi%+}1-Y6<#04^{7tdhB
zf~$TWw0$DE%SrGZb!J`_YoKEg595s!$YRh#I(M-y0~M7!r$r*DaI)aUFWN}Qc|!8Y
zxtLF2x+ATgTy_sFc2H$(kA^9$ZDxE52`6lJ)`HJf3ub5N6?Sf$5uvg&rA{hIV2Yz6
za<OYf$4()<^bF>+m$Uj0@AiAiuZfZ8>9$l9fd{$LGEf3e%KgUU^Yj8K7?r!Z=EXpe
zT43lc1w8a9)wOhdPZ+*Yunp_!vf#bp!c<N!xi2kuP~*;=vX3Fh8?pZs3Tp)6u4%cm
z;uSXHcjPK5s!pXGN}LZYKMjjP$a+(Mn9-z4F9$A%Wnp)E^f{<JZ~Y5{ZVr@_plc(u
z0%vmnc7sYJ***JFP8QriGH{<y9kM)+7o>ztXg<yAxG;$oL+JA9RsF4IU#p2K*Bz-P
zC?9nYD2Iu6Z42(I7BFXw%PS-=0df)|Ryz#ipkg8esl1Ntza8LZXzM>^PJ;Ljy2Ex=
zm`fpiULCS{^r^qU+%&6;jG_>L^I=<d=xEldaJICyGWO%2o%F-8;MguR)+q~^H>uT_
zDp$Gq$__JA@Zujf5itmgv8gd*xDJNi#WjGi1%Dmd<-f~dg&Rpw!T0$Z_&6uirg2F*
zK|cYSU9&7ksens8#JJvZw{Wa)3`Ac$r#ehIBMwUu#1F!3HjArLU%)x}#M`8801WD7
zd97ZOvy2805r~3WcEg73-LACt#BxVZbCM$?!HCY9P~9|iIhQMzUE-kaHuTUTusN=9
zV*r0VBQ1K-KiEVb<I1lCdr%K^rKwdarl4|}F(!p?MDoLPjypAH$Js|bE5gjc*$NHZ
zp=rk7Bg=b|(9=+(I6!}{BL8;ll$_v)yM_jlw;(`3)PSn$YFAHRXuA`MMMK4O#Azo8
zg0AafIAGM%BP@4xw|D?b5#cZ6|6FO0-7d|rZ(elPJ*KH<zyu%fybc~pJhU%!DqL7!
zCM-u5n|>o&>;i9`=hAXb;}FOPKrR3XvThMaAK&YGT|Sil_KN)L?iqQvk_U1j@)3>F
z=GZ)9iq)Q;S!lbHNvccizM<AOm^SS&>G1!Vy-*56=_BPF+}lrqRheC_EY_~a?v-Xd
zj9z5CJx;f6)5cJAU&aP52PJH#FjIxn3o<ue>?+<`ROKX*<Eh7YTzDf8a-kp}V$H_+
zVr2Ta*37@m&&s>g1(;HVBA+Wp28Ad<4uW8{i}R};cgk8_q@v4kSTdm@v^E%pZI_}K
zDhAsFjPN$>p+jR(@bdFua_yf79=hnLsyyx#Evl)`L#?YxI5)No-a@iC_9@@txT9jJ
zqj>v*Whki>BcQxyrBJ05LQ1^%R*6lY$H}qV=WueSgs_xHIUk`M8<e7ujv)w}JzZSs
z*!R7nR?M<-b`j781i^BkVS}H49i*-PD8}f2_91=vVK}<5V(r=x*0=d{D$KL~sI&4l
z=d`T~M`-@Rx@DjWue>)ni_D#^73CWcmgv$yS#Ssq0b`&NgB0tg)f@(Uw&CADTgT~o
z2~jzZDi@&QVX3S?&2o*tF0Xdo2Z`0C38;lxU`#9#Vs$hcw4+g>8&6jU!{bOE5wSw4
zJ;TJ<Zj!xz>VXlNqb|{}IV&x-I)++P)e+96D%m2aD7|28thcNqurhx1$BbbfO~S(-
zwSp+mNUaqxny<@$-d@);^$KDxM2%LZi&t|YN&%2>53t<mX$Go-WucljGz)5U*(RgL
zC>^w?D*1L$L%)3sMh6anqh8IkDOmrQ2e#Ths?I&Zn9P8^qDnIUGL^XqB)zCO<4QcN
ze_0qLfCqk)$5IriRC9`{0+M~R=8b)IIbScExST_+M5CfrDq0Ey<k}-$X>{$`Bz4Q0
zxvnnqEL-Hb%W)X4#D%ySa%1WT7_@(i(LvxUMX`2m8rHY}=E3QPO82OPK0y^*ZlW;P
z(Sx%rgZAlV;H>x1{yq3Y%gGz>J4fY4^E2khbl(+jMul>Y>=C9sDC@?cjL}wKPp7Jj
zV^A!DuA4etj$ODS30j2`Izg?HDSGfAEUs`}Kktd%6s&*91BdPIQC0H<p<3Milqp>1
zz7&?Od)YlVG<rf7!~T_!->B|f)3x|z^R1mVd_Y&u6=QmJgc{R|SCr>z%+JBoje-7*
z=jeGZ<f1scU_)K-pd4jY1TC9Gx8J3r-gT)cAnThEu5p=bl-;oCn-5JldINLRruucq
zU79Lpz?>8^&<QX>vwMqiIXxleO8}pHG8ZO)L#V&X^IzyxvK&XKFrLeF-LN-uZ!Wjf
z{~aan44=OM=y|BQ5I9{D>sDjLO*=w2Fc>RJP}xAy3DA~c{lm{aB#l&~7u0!RVGL)x
zG5;VlP7;o4Yi2B?FFGd;y7M=3x!ln^(sS>%R`H|M%C~s54Eb`Ak3tbD|AXbO{(x^{
zr&RSE`#+~@&KqH@28_{o4YYO<bR*aGbDh|hVSNW4*a?BHew{BLZSKlSgY(K#%}i;Z
zQc<U9IH%um(tGhcU%|?O1A9hi6iveYFjf3TXt11Gyt>j#zc(7{yJF<5Hy7x6iGqdH
zx)m3oS%`g%jzJGl(anPT`F<!^-+>2~9)STL!)*ep2UbQ8RrD$=W46inm?wi`bo3wp
zU}_bNExMh1U>}m7wb5*}@LFqtM_1Z-v6tABDcpiUFGL701lBDDL#)QRxS6b=Tiu1s
zbv-Ei;3(Mi^`T+?NY8y$8r=bbxoHt_4VWh)w{0rkWSb|Y5WVm!+cCfX<76}7;WC;(
zc^_{tBsi<Rv}s(t3L7maF;-HWHu}<O*AjGh{VMvqu<`M--uX2$9|^4Q*Mkgf>jmfN
z(pEcEm|1O6;X`H+J@4y%yDQBDzj7zi$^iTy6Z)gD)TK+ehrMPem!J~{#ZJFh?!5yH
z|LbKWY;SMIbuS(7BZKvwzWUYahHZDBSL<C`&oXwO42In!uRbabUw=J21n52YARQh*
zmQ1A>w%<E7JlAOt_|RbGo#Vq(2}a)KA9+OV_4?RM`9})t2YmI>=|;zNj#w*Sl3epS
zfA7mTGODHC4jw#UUwMU}W{Z20hkt$7XmJmc2Oij${2mvA_1yM0>gC3DA33Za^83HP
zt@*t_jDPgq->tX({pL;d@L_Rl3c5$YuNFWFdQ%(G^~U?Tz+P{#n<>u#{fmOPn|W}9
zwjW#A4d%S%s!w6JymY_72RAeHFO{<Y4*&rF{~1QLp#T5?21!IgR09CbW_|&<q>jk|
O0000<MNUMnLSTYe^Vk6Z

literal 0
HcmV?d00001

diff --git a/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue
index b7a6224..c224c54 100644
--- a/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue
+++ b/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="task-screen">
-    <div class="map-wrap">
+    <!-- <div class="map-wrap">
       <MapComponent :rectangles="rectangles" />
       <div class="legend">
         <div class="legend-item" v-for="(item, i) in legends" :key="i">
@@ -8,22 +8,20 @@
           <span class="text">{{ item.label }}</span>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <div class="side left">
       <div class="panel">
-        <div class="panel-title">
-          <img class="titleIcon" :src="titleIcon" />
-          <span>工区统计</span>
-          <span class="more">更多</span>
-        </div>
-
+        <BlockTitle title="工区统计">
+          <template #right>
+            <span>更多</span>
+          </template>
+        </BlockTitle>
         <div class="progress-group">
           <div class="progress-row">
             <div class="label">工区总进度</div>
             <div class="value">{{ areaProgress }}%</div>
           </div>
-          <fks-progress :percentage="areaProgress" :stroke-width="8" color="#4dabf7" />
           <div class="progress-sub">
             <div class="sub-row" v-for="(p, pi) in subProgress" :key="pi">
               <div class="name">{{ p.name }}</div>
@@ -33,24 +31,21 @@
               <div class="num">{{ p.value }}</div>
             </div>
           </div>
+          <fks-table :data="areaTable" border height="220">
+            <fks-table-column prop="name" label="工区名称" min-width="74" />
+            <fks-table-column prop="pile" label="桩条安装进度(%)" width="90" />
+            <fks-table-column prop="module" label="组件安装进度(%)" width="90" />
+            <fks-table-column prop="year" label="10号车" width="74" />
+          </fks-table>
         </div>
-
-        <fks-table :data="areaTable" border height="280">
-          <fks-table-column type="index" label="#" width="50" />
-          <fks-table-column prop="name" label="工区名称" min-width="90" />
-          <fks-table-column prop="pile" label="桩条安装进度(%)" width="140" />
-          <fks-table-column prop="module" label="组件安装进度(%)" width="140" />
-          <fks-table-column prop="owner" label="负责安环" width="90" />
-          <fks-table-column prop="year" label="10号车" width="80" />
-        </fks-table>
       </div>
 
       <div class="panel">
-        <div class="panel-title">
-          <img class="titleIcon" :src="titleIcon" />
-          <span>材料统计</span>
-          <span class="more">更多</span>
-        </div>
+        <BlockTitle title="材料统计">
+          <template #right>
+            <span>更多</span>
+          </template>
+        </BlockTitle>
         <fks-table :data="materialTable" border height="300">
           <fks-table-column prop="name" label="材料名称" min-width="100" />
           <fks-table-column prop="used" label="当日消耗量" width="120" />
@@ -61,12 +56,11 @@
 
     <div class="side right">
       <div class="panel">
-        <div class="panel-title">
-          <img class="titleIcon" :src="titleIcon" />
-          <span>设备信息</span>
-          <span class="more">更多</span>
-        </div>
-
+        <BlockTitle title="设备信息">
+          <template #right>
+            <span>更多</span>
+          </template>
+        </BlockTitle>
         <div class="kpibox">
           <div class="kpi">
             <div class="kpi-label">当前设备在线数量</div>
@@ -115,11 +109,12 @@
 <script>
 import Mix from '@/mixins/module';
 import MapComponent from './MapComponent.vue';
+import BlockTitle from './components/BlockTitle.vue';
 
 export default {
   name: 'TaskScreenView',
   mixins: [Mix],
-  components: { MapComponent },
+  components: { MapComponent, BlockTitle },
   data() {
     return {
       titleIcon: require('@/assets/img/Automated/titleIcon1.png'),
@@ -165,17 +160,17 @@ export default {
       ],
       rectangles: [
         // 西湖区（放大范围，近似行政区外包）
-        { id: '1', name: '西湖区', status: '施工中', geomWkt: 'POLYGON((120.0000 30.1500,120.2500 30.1500,120.2500 30.3700,120.0000 30.3700,120.0000 30.1500))' },
+        { id: '1', name: '西湖区', status: '施工中', geomWkt: 'POLYGON((120.0000 30.1500,120.2500 30.1500,120.2500 30.3700,120.0000 30.3700,120.0000 30.1500))' }
         // 拱墅区（放大范围，近似行政区外包）
-        { id: '2', name: '拱墅区', status: '已施工', geomWkt: 'POLYGON((120.0900 30.3000,120.2300 30.3000,120.2300 30.4200,120.0900 30.4200,120.0900 30.3000))' },
-        // 上城区（放大范围，近似行政区外包）
-        { id: '3', name: '上城区', status: '未施工', geomWkt: 'POLYGON((120.1400 30.2000,120.2600 30.2000,120.2600 30.3100,120.1400 30.3100,120.1400 30.2000))' },
-        // 滨江区（放大范围，近似行政区外包）
-        { id: '4', name: '滨江区', status: '故障', geomWkt: 'POLYGON((120.0900 30.1400,120.2700 30.1400,120.2700 30.2400,120.0900 30.2400,120.0900 30.1400))' },
-        // 萧山区（放大范围，近似行政区外包）
-        { id: '5', name: '萧山区', status: '运行中', geomWkt: 'POLYGON((120.1800 30.0200,120.5300 30.0200,120.5300 30.3300,120.1800 30.3300,120.1800 30.0200))' },
-        // 余杭区（放大范围，近似行政区外包）
-        { id: '6', name: '余杭区', status: '停机', geomWkt: 'POLYGON((119.8000 30.1800,120.1000 30.1800,120.1000 30.5000,119.8000 30.5000,119.8000 30.1800))' }
+        // { id: '2', name: '拱墅区', status: '已施工', geomWkt: 'POLYGON((120.0900 30.3000,120.2300 30.3000,120.2300 30.4200,120.0900 30.4200,120.0900 30.3000))' },
+        // // 上城区（放大范围，近似行政区外包）
+        // { id: '3', name: '上城区', status: '未施工', geomWkt: 'POLYGON((120.1400 30.2000,120.2600 30.2000,120.2600 30.3100,120.1400 30.3100,120.1400 30.2000))' },
+        // // 滨江区（放大范围，近似行政区外包）
+        // { id: '4', name: '滨江区', status: '故障', geomWkt: 'POLYGON((120.0900 30.1400,120.2700 30.1400,120.2700 30.2400,120.0900 30.2400,120.0900 30.1400))' },
+        // // 萧山区（放大范围，近似行政区外包）
+        // { id: '5', name: '萧山区', status: '运行中', geomWkt: 'POLYGON((120.1800 30.0200,120.5300 30.0200,120.5300 30.3300,120.1800 30.3300,120.1800 30.0200))' },
+        // // 余杭区（放大范围，近似行政区外包）
+        // { id: '6', name: '余杭区', status: '停机', geomWkt: 'POLYGON((119.8000 30.1800,120.1000 30.1800,120.1000 30.5000,119.8000 30.5000,119.8000 30.1800))' }
       ],
       legends: [
         { label: '施工中', color: '#3fa7ff' },
@@ -191,12 +186,27 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// 重置区域开始
+* {
+  box-sizing: border-box;
+  color: #333333;
+}
+::v-deep .fks-table {
+  table {
+    th {
+      font-size: 12px !important;
+      padding: 4px 0 !important;
+      color: #999 !important;
+      background: #f9f9f9 !important;
+    }
+  }
+}
+// 重置区域结束
 .task-screen {
   position: relative;
   display: flex;
   height: 100%;
   width: 100%;
-  background: #0b1535;
 }
 .map-wrap {
   position: relative;
@@ -225,18 +235,19 @@ export default {
       margin-right: 6px;
     }
     .text {
-      color: #cfe6ff;
       font-size: 12px;
     }
   }
 }
 
 .side {
-  width: 360px;
-  padding: 12px;
+  width: 392px;
+  padding: 24px;
   box-sizing: border-box;
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
   .panel + .panel {
-    margin-top: 12px;
+    margin-top: 20px;
   }
 }
 .left {
@@ -255,15 +266,13 @@ export default {
 }
 
 .panel {
-  background: rgba(0, 12, 32, 0.7);
-  border: 1px solid rgba(91, 166, 255, 0.35);
-  border-radius: 8px;
-  padding: 12px;
+  .block-title {
+    margin-bottom: 10px;
+  }
   .panel-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: #cfe6ff;
     font-size: 14px;
     margin-bottom: 10px;
     .titleIcon {
@@ -275,44 +284,52 @@ export default {
       display: inline-flex;
       align-items: center;
     }
-    .more {
-      color: #6bb1ff;
-      cursor: pointer;
-      font-size: 12px;
-    }
   }
 }
 
 .progress-group {
-  margin-bottom: 12px;
+  background: linear-gradient(180deg, #ffffff 0%, rgba(242, 249, 255, 0.5) 100%);
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid #dcedff;
   .progress-row {
+    height: 34px;
+    background: linear-gradient(90deg, #e6f5ff 0%, #d3eeff 100%), linear-gradient(90deg, #e6f5ff 0%, #d8efff 75%, rgba(214, 238, 255, 0.89) 79%, rgba(211, 238, 255, 0.58) 100%);
+    margin-bottom: 12px;
     display: flex;
-    justify-content: space-between;
-    color: #cfe6ff;
-    margin-bottom: 6px;
+    align-items: center;
+    justify-content: center;
+    gap: 0 8px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
     .label {
-      font-size: 13px;
+      color: #333333;
     }
     .value {
-      font-size: 13px;
+      color: #4886e0;
     }
   }
   .progress-sub {
     margin-top: 8px;
+    padding: 12px;
     .sub-row {
       display: grid;
-      grid-template-columns: 120px 1fr 36px;
+      grid-template-columns: 92px 1fr 18px;
       align-items: center;
-      color: #cfe6ff;
-      font-size: 12px;
       margin-bottom: 6px;
+      gap: 0 16px;
       .name {
-        opacity: 0.85;
+        font-size: 12px;
+        color: #999;
       }
       .bar {
         padding: 0 8px;
       }
       .num {
+        font-family: DIN, DIN;
+        font-weight: bold;
+        font-size: 16px;
+        color: #4886e0;
         text-align: right;
       }
     }
@@ -330,7 +347,6 @@ export default {
     border-radius: 6px;
     padding: 10px 8px;
     .kpi-label {
-      color: #94b8ff;
       font-size: 12px;
       margin-bottom: 4px;
       white-space: nowrap;
@@ -338,7 +354,6 @@ export default {
       text-overflow: ellipsis;
     }
     .kpi-value {
-      color: #e8f3ff;
       font-weight: 600;
       font-size: 18px;
       line-height: 1.2;