设备 弹窗 修改提交

ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue

@@ -1,15 +1,18 @@
 <template>
   <div class='Descriptions' :style="getStyle()">
     <div class="item" v-for="(item, index) in list" :key="`${item.key || item.label}${index}`"
-      :style="[gridStyle(item, index), resolveStyle(itemStyle)]">
-      <div class="title text" :style="resolveStyle(titleStyle)">
+      :style="[gridStyle(item, index), transformStyle(itemStyle)]">
+      <div class="title text" :style="transformStyle(titleStyle)">
         <slot :name="`title-${item.key || item.label}`" :data="item">
           {{ item.label || '-' }}:
         </slot>
       </div>
-      <div class="content text" :style="resolveStyle(contentStyle)">
+      <div class="content text" :style="{
+        ...transformStyle(titleStyle),
+        ...getDisplayColor(item)
+      }">
         <slot :name="`content-${item.key || item.label}`" :data="item">
-          {{ data[item.key] || '-' }}
+          {{ getText(item) || '-' }}
         </slot>
       </div>
     </div>
@@ -17,6 +20,8 @@
 </template>
 
 <script>
+import * as EnumMap from "@screen/utils/enum.js"
+
 export default {
   name: 'Descriptions',
   props: {
@@ -67,10 +72,21 @@ export default {
         gridTemplateColumns: `repeat(${this.column}, 1fr)`,
       }
     },
+    getText(item) {
+      const result = this.data[item.key];
+
+      if (item.enum) return EnumMap[item.enum][result]?.text;
+
+      const templateResult = item.key?.replace(/\$\{[^}]+\}/g, (key) => this.data[key.slice(2, -1)]);
+
+      if (templateResult && templateResult != item.key) return templateResult
+
+      return result
+    },
     getComponent(type) {
       return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}`
     },
-    resolveStyle(style) {
+    transformStyle(style) {
       if (typeof style != 'string') return style;
 
       return style.split(';').reduce((prev, cur) => {
@@ -79,7 +95,18 @@ export default {
         prev[key] = value;
 
         return prev;
-      }, {})
+      }, {});
+    },
+    getDisplayColor(item) {
+      const style = {};
+
+      if (item.enum) {
+        const config = EnumMap[item.enum][this.data[item.key]];
+
+        if (config?.color) style.color = config.color;
+      }
+
+      return style;
 
     },
   }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue

@@ -18,43 +18,7 @@
       </div>
 
       <div class="content">
-        <div class="left">
-          <p class="desc-item">
-            <span>设备名称: </span>
-            <span>{{ dialogData.camName || '-' }}</span>
-          </p>
-          <p class="desc-item">
-            <span>设备编号: </span>
-            <span>{{ dialogData.deviceCode || '-' }}</span>
-          </p>
-          <div>
-            <p class="desc-item">
-              <span>设备桩号: </span>
-              <span>{{ dialogData.stakeMarkId || '-' }}</span>
-            </p>
-            <p class="desc-item">
-              <span>方向: </span>
-              <span class="color1">
-                {{ { 1: '上行(菏泽方向)', 2: '中', 3: '下行(济南方向)' }[dialogData.direction] }}
-              </span>
-            </p>
-          </div>
-          <p class="desc-item">
-            <span>经/纬度: </span>
-            <span>{{ dialogData.longitude || '-' }} / {{ dialogData.latitude || '-' }}</span>
-          </p>
-          <p class="desc-item">
-            <span>道路名称: </span>
-            <span>{{ dialogData.roadName }}</span>
-          </p>
-          <p class="desc-item">
-            <span>设备状态: </span>
-            <span class="color1">
-              {{ { 0: '异常', 1: '正常' }[dialogData.device_state] }}
-            </span>
-          </p>
-
-        </div>
+        <Descriptions :list="list" :data="dialogData" style="gap: 18px" />
         <div class="dash-line"></div>
         <div class="right">
           <div class="direction">
@@ -86,9 +50,9 @@
 import Dialog from "@screen/components/Dialog/index.vue"
 import Button from "@screen/components/Buttons/Button.vue"
 import Video from "@screen/components/Video";
+import Descriptions from '@screen/components/Descriptions.vue';
 
 import { dialogDelayVisible } from "./../mixin"
-import { CameraStatusEnum, CameraDirectionEnum } from "@screen/utils/enum.js"
 import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 import { throttle } from "lodash"
 
@@ -100,12 +64,50 @@ export default {
   components: {
     Dialog,
     Button,
-    Video
+    Video,
+    Descriptions
   },
   data() {
     return {
-      statusEnum: CameraStatusEnum[this.dialogData.status] || {},
-      cameraDirection: CameraDirectionEnum[this.dialogData.camOrientation]?.text,
+      // statusEnum: CameraStatusEnum[this.dialogData.status] || {},
+      // cameraDirection: CameraDirectionEnum[this.dialogData.camOrientation]?.text,
+      data: {
+        direction: 1,
+        longitude: 'longitude2',
+        latitude: 'latitude2',
+      },
+      list: [
+        {
+          label: '设备名称',
+          key: "deviceName",
+        },
+        {
+          label: '设备编号',
+          key: "deviceCode",
+        },
+        {
+          label: '设备桩号',
+          key: "stakeMarkId",
+        },
+        {
+          label: '设备方向',
+          key: "direction",
+          enum: "CameraDirectionEnum"
+        },
+        {
+          label: '经/纬度',
+          key: "${longitude} / ${latitude}",
+        },
+        {
+          label: '道路名称',
+          key: "roadName",
+        },
+        {
+          label: '设备状态',
+          key: "device_state",
+          enum: "DeviceTypeEnum"
+        },
+      ],
       options: [
         {
           label: "变倍",

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue

@@ -5,16 +5,9 @@
 
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
         <ElTabPane label="详细设计" name="first">
-          <Descriptions :list="list" :data="dialogData" style="gap: 18px">
-            <template #direction>
-              {{ { 1: '上行(菏泽方向)', 2: '中', 3: '下行(济南方向)' }[dialogData.direction] }}
-            </template>
-            <template #device_state>
-              {{ { 0: '异常', 1: '正常' }[dialogData.device_state] }}
-            </template>
-          </Descriptions>
+          <Descriptions :list="list" :data="dialogData" style="gap: 18px" />
         </ElTabPane>
-        <ElTabPane label="设备参数" name="second">摄相机参数</ElTabPane>
+        <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
       </ElTabs>
 
       <div class="bottom">
@@ -56,8 +49,8 @@ export default {
         deviceType: "行车诱导",
         deviceStation: "k094+079",
         roadName: "G35济泽高速",
-        deviceDirection: "济南方向",
-        deviceStatus: "在线",
+        direction: "1",
+        device_state: "0",
         deviceVendors: "XXX厂家",
       },
       list: [
@@ -76,10 +69,12 @@ export default {
         {
           label: '设备方向',
           key: "direction",
+          enum: "CameraDirectionEnum"
         },
         {
           label: '设备状态',
           key: "device_state",
+          enum: "DeviceTypeEnum"
         },
         {
           label: '设备厂商',
@@ -99,7 +94,8 @@ export default {
         if (code != 200) return;
 
         this.dialogData.brand = data.brand;
-      }).catch((err) => {
+      })
+      .catch((err) => {
 
       });
 

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@@ -1,9 +1,5 @@
-import { axiosIns } from "@screen/utils/axios/auth.js";
-import { Message } from "element-ui";
 import { getDeviceList } from "./httpList";
 
-const PilePointJSON = require(`@screen/pages/Home/components/AMapContainer/data/lcz.json`);
-
 import { setMarkToMap } from "./map";
 
 // 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js

@@ -128,7 +128,7 @@ export function getDeviceList(deviceType) {
     url: "/business/device/query",
     method: "get",
     params: {
-      deviceType: 12,
+      deviceType,
     },
   })
     .then(({ code, data }) => {

ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@@ -50,12 +50,15 @@ export const CameraDirectionEnum = {
   },
 };
 
+// 设备的状态
 export const DeviceTypeEnum = {
   0: {
     text: "异常",
+    color: "#FF5F5F",
   },
   1: {
     text: "正常",
+    color: "#19E1B1",
   },
 };