refactor: 设备ID 站点名称统一;站点名称->+ID;概览图表颜色设置;设备管理加状态字段;远动参数去掉时间,采集个数disabled,盐雾改盐分

src/components/commands/search-commands.vue

@@ -3,7 +3,12 @@
     <el-form-item label="选择站点">
       <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
         <!-- <el-option label="全部" value></el-option> -->
-        <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
+        <el-option
+          v-for="item in devices"
+          :key="item.deviceId"
+          :label="`${item.address}-${item.deviceId}`"
+          :value="item.deviceId"
+        ></el-option>
       </el-select>
     </el-form-item>
 
@@ -24,7 +29,10 @@
     </el-form-item>
 
     <el-form-item>
-      <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i>查询</el-button>
+      <el-button type="primary" @click="onSubmit">
+        <i class="el-icon-search mr-2"></i>
+        查询
+      </el-button>
     </el-form-item>
   </el-form>
 </template>

src/components/config/device-select-and-status.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch, defineProps } from 'vue';
+import { computed, defineProps, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { PEND_TYPE } from '@/config/config';
 
@@ -36,7 +36,12 @@ function onChange(event) {
   <div class="mb-3">
     <span class="text-sm text-gray-500">选择站点：</span>
     <el-select v-model="deviceId" placeholder="选择站点" @change="onChange">
-      <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
+      <el-option
+        v-for="item in devices"
+        :key="item.deviceId"
+        :label="`${item.address}-${item.deviceId}`"
+        :value="item.deviceId"
+      ></el-option>
     </el-select>
 
     <!-- <span class="text-sm text-gray-500 ml-10">获取状态：</span>

src/components/config/function-config-pending.vue

@@ -18,23 +18,11 @@
         </el-form-item>
       </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="盐雾采样频率(分钟)" prop="frequency.salt">
+        <el-form-item label="盐分采样频率(分钟)" prop="frequency.salt">
           <el-input-number v-model="data.frequency.salt" :min="0" />
         </el-form-item>
       </el-col>
 
-      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="时间" prop="time">
-          <!-- <el-input v-model="data.time"></el-input> -->
-          <el-date-picker v-model="data.time" placeholder="设置时间" type="datetime"></el-date-picker>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="金属腐蚀采集个数" prop="count">
-          <el-input-number v-model="data.count" :min="0" />
-        </el-form-item>
-      </el-col>
-
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="电池电压低阈值(V)" prop="batteryLow">
           <el-input-number v-model="data.batteryLow" :min="0" />
@@ -67,10 +55,12 @@
           <el-input-number v-model="data.temperatureHigh" :min="0" />
         </el-form-item>
       </el-col>
-    </el-row>
-
-    <el-row :gutter="20">
-      <el-col :span="12">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="金属腐蚀采集个数" prop="count">
+          <el-input v-model="data.count" :min="0" disabled style="width: 180px" />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="安全模式" prop="securityMode">
           <!-- <el-input v-model="data.securityMode"></el-input> -->
           <el-radio v-model="data.securityMode" label="OPEN">不加密</el-radio>
@@ -96,6 +86,8 @@
         <el-form-item prop="report.timePoints" style="margin-bottom: 10px !important">
           <el-time-picker v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`" format="HH:mm"></el-time-picker>
         </el-form-item>
+        <i class="el-icon-semi-select"></i>
+        <el-button circle type="danger"></el-button>
       </el-col>
       <el-col v-if="!data.report.timePoints || data.report.timePoints.length < 6" :lg="6" :md="8" :sm="12" :xl="4">
         <el-button plain @click="addTimePoints">

src/components/device/device-create.vue

@@ -1,11 +1,18 @@
 <template>
-  <el-form ref="deviceCreate" :model="data" :rules="rules" label-position="top">
+  <el-form ref="deviceCreate" :model="data" :rules="deviceRules" label-position="top">
     <el-row :gutter="20">
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设备ID号(6位)" prop="deviceId">
+        <el-form-item label="设备ID(6位)" prop="deviceId">
           <el-input v-model="data.deviceId"></el-input>
         </el-form-item>
       </el-col>
+
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="站点名称" prop="address">
+          <el-input v-model="data.address"></el-input>
+        </el-form-item>
+      </el-col>
+
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设备完整ID" prop="deviceFullId">
           <el-input v-model="data.deviceFullId"></el-input>
@@ -17,11 +24,6 @@
           <el-input v-model="data.area"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="安装地点名称" prop="address">
-          <el-input v-model="data.address"></el-input>
-        </el-form-item>
-      </el-col>
 
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="联系人" prop="contact">
@@ -130,49 +132,12 @@
 
 <script setup>
 import { defineEmits, reactive, ref } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
 import { useStore } from 'vuex';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { createDevice } from 'apis';
+import { deviceData, deviceRules } from '@/config/config';
 
-const data = reactive({
-  deviceId: '', // 设备id
-  deviceFullId: '', // 设备完整id
-  deviceDirection: '', // 设备朝向
-  area: '', // 地区
-  address: '', // 安装地点名称
-  contact: '', // 联系人
-  phone: '', // 联系人电话
-  lon: '', // 经度
-  lat: '', // 纬度
-  head: '', // 负责人
-  installLocation: '', // 安装位置
-  installTime: '', // 安装时间
-  runTime: '', // 正式运行时间
-  linkAddress: '', // 链路地址
-  probNo: '', // 探头编号
-  simple: '', // 试样
-  sim1: '', // sim卡1
-  protocolVersion: '', // 协议版本
-  joint: '', // 主站后台联调情况
-  operationRecord: '', // 维修记录
-  remark: '', // 备注
-});
-
-const rules = {
-  deviceId: [
-    {
-      required: true,
-      message: '请输入设备ID号',
-      trigger: 'blur',
-    },
-    {
-      len: 6,
-      message: '请输入6位设备ID号',
-      trigger: 'blur',
-    },
-  ],
-};
-
+const data = reactive(deviceData);
 const deviceCreate = ref(null); // form
 const store = useStore();
 const emit = defineEmits(['hide']);

src/components/history/device.vue

@@ -118,7 +118,7 @@ function formatTime(time) {
 
   <template v-if="data">
     <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceNo" />
       <el-table-column align="center" label="采集时间" min-width="170">
         <template #default="scope">
           {{ formatTime(+scope.row.time) }}

src/components/history/local.vue

@@ -114,7 +114,7 @@ function formatTime(time) {
 
   <template v-if="data">
     <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceNo" />
       <el-table-column align="center" label="采集时间" min-width="170">
         <template #default="scope">
           {{ formatTime(+scope.row.time) }}

src/components/history/search-bar-data.vue

@@ -3,7 +3,12 @@
     <el-form-item label="选择站点：">
       <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
         <!-- <el-option label="全部" value></el-option> -->
-        <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
+        <el-option
+          v-for="item in devices"
+          :key="item.deviceId"
+          :label="`${item.address}-${item.deviceId}`"
+          :value="item.deviceId"
+        ></el-option>
       </el-select>
     </el-form-item>
 

src/components/overview/chart-device-detail.vue

@@ -15,13 +15,6 @@
           <div :style="{ width: `${countPercent.normal}` }" class="line bg-lime-300"></div>
         </div>
       </el-col>
-      <el-col :span="12" class="mt-10">
-        <div class="text-sm text-gray-400">在线数量</div>
-        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.online }}</div>
-        <div class="line-wrap bg-green-50">
-          <div :style="{ width: `${countPercent.online}` }" class="line bg-green-300"></div>
-        </div>
-      </el-col>
       <el-col :span="12" class="mt-10">
         <div class="text-sm text-gray-400">离线数量</div>
         <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.offline }}</div>
@@ -36,6 +29,13 @@
           <div :style="{ width: `${countPercent.warning}` }" class="line bg-yellow-300"></div>
         </div>
       </el-col>
+      <el-col :span="12" class="mt-10">
+        <div class="text-sm text-gray-400">在线数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.online }}</div>
+        <div class="line-wrap bg-green-50">
+          <div :style="{ width: `${countPercent.online}` }" class="line bg-green-300"></div>
+        </div>
+      </el-col>
       <el-col :span="12" class="mt-10">
         <div class="text-sm text-gray-400">故障数量</div>
         <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.fault }}</div>

src/components/overview/device-table.vue

@@ -2,12 +2,12 @@
   <template v-if="devicesAll && devicesAll.data">
     <el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
       <el-table-column align="center" label="站点名称" min-width="150" prop="address" />
-      <el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
+      <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
       <el-table-column align="center" label="注册时间" min-width="200" prop="signupTime" />
       <el-table-column align="center" label="最近上传时间" min-width="200" prop="lastUploadTime" />
       <el-table-column align="center" header-align="center" label="设备状态" min-width="150">
         <template #default="scope">
-          {{ scope.row.status }}
+          <el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color">{{ STATUS_COLOR[scope.row.status].text }} </el-tag>
         </template>
       </el-table-column>
       <el-table-column align="center" header-align="center" label="产品类型" min-width="150">
@@ -41,6 +41,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import DeviceEdit from 'components/device/device-edit.vue';
+import { STATUS_COLOR } from '@/config/config';
 
 let timer = null;
 const store = useStore();

src/components/realtime/search-bar.vue

@@ -3,14 +3,25 @@
     <el-form-item label="选择站点">
       <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
         <el-option v-if="showAll" label="全部" value></el-option>
-        <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
+        <el-option
+          v-for="item in devices"
+          :key="item.deviceId"
+          :label="`${item.address}-${item.deviceId}`"
+          :value="item.deviceId"
+        ></el-option>
       </el-select>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i>查询</el-button>
+      <el-button type="primary" @click="onSubmit">
+        <i class="el-icon-search mr-2"></i>
+        查询
+      </el-button>
     </el-form-item>
     <el-form-item v-if="showRefresh">
-      <el-button type="primary" @click="$emit('refresh')"><i class="el-icon-refresh mr-2"></i>刷新</el-button>
+      <el-button type="primary" @click="$emit('refresh')">
+        <i class="el-icon-refresh mr-2"></i>
+        刷新
+      </el-button>
     </el-form-item>
   </el-form>
 </template>

src/components/statistical/search-bar.vue

@@ -3,7 +3,12 @@
     <el-form-item label="选择站点：">
       <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
         <!-- <el-option label="全部" value></el-option> -->
-        <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
+        <el-option
+          v-for="item in devices"
+          :key="item.deviceId"
+          :label="`${item.address}-${item.deviceId}`"
+          :value="item.deviceId"
+        ></el-option>
       </el-select>
     </el-form-item>
     <el-form-item v-if="showTypeSelect" label="类型：">

src/config/config.js

@@ -65,7 +65,7 @@ export const deviceData = {
   deviceFullId: '', // 设备完整id
   deviceDirection: '', // 设备朝向
   area: '', // 地区
-  address: '', // 安装地点名称
+  address: '', // 站点名称
   contact: '', // 联系人
   phone: '', // 联系人电话
   lon: '', // 经度
@@ -78,10 +78,35 @@ export const deviceData = {
   probNo: '', // 探头编号
   simple: '', // 试样
   sim1: '', // sim卡1
+  protocolVersion: '', // 协议版本
   joint: '', // 主站后台联调情况
+  operationRecord: '', // 维修记录
   remark: '', // 备注
 };
 
+// 设备添加编辑 规则
+export const deviceRules = {
+  deviceId: [
+    {
+      required: true,
+      message: '请输入设备ID号',
+      trigger: 'blur',
+    },
+    {
+      len: 6,
+      message: '请输入6位设备ID号',
+      trigger: 'blur',
+    },
+  ],
+  address: [
+    {
+      required: true,
+      message: '请输入站点名称',
+      trigger: 'blur',
+    },
+  ],
+};
+
 // 下发类型
 export const PEND_TYPE = {
   PENDING: {
@@ -100,3 +125,27 @@ export const PEND_TYPE = {
 
 // 实时查询数据的轮询时间 1分钟
 export const REALTIME_DATA_INTERVAL = 60000 * 5;
+
+// 设备状态 情景
+export const STATUS_COLOR = {
+  FAULT: {
+    text: '故障',
+    color: '#FCA5A5',
+  },
+  WARNING: {
+    text: '报警',
+    color: '#FCD34D',
+  },
+  NORMAL: {
+    text: '正常',
+    color: '#BEF264',
+  },
+  OFFLINE: {
+    text: '离线',
+    color: '#CBD5E1',
+  },
+  ONLINE: {
+    text: '在线',
+    color: '#6EE7B7',
+  },
+};

src/config/log.js

@@ -42,6 +42,48 @@ export const CODE = {
   },
 };
 
+// 传输方向
+export const DIRECTION = {
+  IACD2SERVER: '上行',
+  SERVER2IACD: '下行',
+};
+
+// 传输启动
+export const PRM = {
+  ACK: '传输结束',
+  REQ: '传输启动',
+};
+
+// 流控
+export const DFC = {
+  CONTINUE: '有后续包',
+  OVER: '无后续包',
+};
+
+// 安全方式
+export const SER = {
+  OPEN: '不加密',
+  ENCRYPTION: '加密',
+};
+
+// 类型标识
+export const ASDU_TYPE = {
+  IACD: {
+    code: 1,
+    text: '大气腐蚀',
+  },
+  OTHER: {
+    code: 2,
+    text: '其他',
+  },
+};
+
+// 信息体序
+export const INFO_ORDER = {
+  NoOrder: '无序',
+  HasOrder: '有序',
+};
+
 // 传输原因
 export const REASON = {
   None: {
@@ -65,21 +107,3 @@ export const REASON = {
     text: '人工上报',
   },
 };
-
-// 传输方向
-export const DIRECTION = {
-  IACD2SERVER: '上行',
-  SERVER2IACD: '下行',
-};
-
-// 流控
-export const DFC = {
-  CONTINUE: '有后续包',
-  OVER: '无后续包',
-};
-
-// 信息体序
-export const INFO_ORDER = {
-  NoOrder: '无序',
-  HasOrder: '有序',
-};

src/utils/overview.js

@@ -1,3 +1,5 @@
+import { STATUS_COLOR } from '@/config/config';
+
 /**
  * 生成设备概览 数量数据
  * @param {object} count
@@ -38,7 +40,7 @@ export function generateChartOption(count) {
           show: true,
           position: 'inside',
           fontSize: 17,
-          color: '#FFF',
+          color: '#323232',
           // formatter: '{b}\n{c}',
           lineHeight: 40,
         },
@@ -53,13 +55,13 @@ export function generateChartOption(count) {
         data: [
           {
             value: count.online,
-            name: '在线',
-            itemStyle: { color: '#4ADE80' },
+            name: STATUS_COLOR.ONLINE.text,
+            itemStyle: { color: STATUS_COLOR.ONLINE.color },
           },
           {
             value: count.offline,
-            name: '离线',
-            itemStyle: { color: '#94A3B8' },
+            name: STATUS_COLOR.OFFLINE.text,
+            itemStyle: { color: STATUS_COLOR.OFFLINE.color },
           },
         ],
       },
@@ -92,24 +94,24 @@ export function generateChartOption(count) {
         data: [
           {
             value: count.fault,
-            name: '故障',
-            itemStyle: { color: '#FCA5A5' },
+            name: STATUS_COLOR.FAULT.text,
+            itemStyle: { color: STATUS_COLOR.FAULT.color },
           },
           {
             value: count.warning,
-            name: '报警',
-            itemStyle: { color: '#FDE047' },
+            name: STATUS_COLOR.WARNING.text,
+            itemStyle: { color: STATUS_COLOR.WARNING.color },
           },
           {
             value: count.normal,
-            name: '正常',
-            itemStyle: { color: '#6EE7B7' },
+            name: STATUS_COLOR.NORMAL.text,
+            itemStyle: { color: STATUS_COLOR.NORMAL.color },
           },
           {
             value: count.offline,
-            name: '离线',
+            name: STATUS_COLOR.OFFLINE.text,
             itemStyle: {
-              color: '#fff',
+              color: STATUS_COLOR.OFFLINE.color,
               opacity: 0,
             },
           },

src/views/commands.vue

@@ -2,37 +2,63 @@
   <SearchCommands @search="onSearch" />
   <template v-if="data">
     <el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备ID" min-width="140" prop="deviceId" />
-      <el-table-column align="center" label="类型" min-width="100">
+      <el-table-column align="center" fixed label="设备ID" min-width="100" prop="deviceId" />
+      <el-table-column align="center" label="传输方向" min-width="80">
         <template #default="scope">
-          {{ computeType(scope.row.type) }}
+          {{ log.DIRECTION[scope.row.dir] }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="状态" min-width="100">
+      <el-table-column align="center" label="传输启动" min-width="80">
         <template #default="scope">
-          <el-tag :type="computeStatus(scope.row.status)">{{ scope.row.status }}</el-tag>
+          {{ log.PRM[scope.row.prm] }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="起始时间" min-width="200">
+      <el-table-column align="center" label="安全模式" min-width="80">
         <template #default="scope">
-          {{ formatDate(+scope.row.startTime) }}
+          {{ log.SER[scope.row.ser] }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="截止时间" min-width="200">
+      <el-table-column align="center" label="流控" min-width="80">
         <template #default="scope">
-          {{ formatDate(+scope.row.endTime) }}
+          {{ log.DFC[scope.row.dfc] }}
         </template>
       </el-table-column>
+
+      <el-table-column align="center" label="功能码" min-width="180">
+        <template #default="scope">
+          {{ log.CODE[scope.row.code].text }}
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="包序号" min-width="80" prop="serialNo" />
+
+      <el-table-column align="center" label="类型标识" min-width="80">
+        <template #default="scope">
+          {{ log.ASDU_TYPE[scope.row.type] }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="信息体顺序" min-width="90">
+        <template #default="scope">
+          {{ log.INFO_ORDER[scope.row.infoOrder] }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="信息体个数" min-width="90" prop="infoNum" />
+
+      <el-table-column align="center" label="传输原因" min-width="180">
+        <template #default="scope">
+          {{ log.REASON[scope.row.reason] }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="协议内容" min-width="300" prop="contents" />
     </el-table>
   </template>
 </template>
 
 <script setup>
 import SearchCommands from 'components/commands/search-commands.vue';
-import { getCommansStatus } from 'apis';
 import { onMounted, ref } from 'vue';
 import { ElMessage } from 'element-plus';
-import dayjs from 'dayjs';
+import * as log from '@/config/log';
 
 const data = ref([]);
 let contentHeight = 600;
@@ -50,56 +76,11 @@ onMounted(() => {
  */
 async function onSearch(options) {
   try {
-    data.value = await getCommansStatus(options);
+    console.log(options);
+    // data.value = await getCommandsStatus(options);
   } catch (error) {
     ElMessage.error('查询失败');
     throw new Error(error);
   }
 }
-
-/**
- * 计算状态
- * @param {string} status
- * @returns {string}
- */
-function computeStatus(status) {
-  let statusStyle = 'success';
-  switch (status) {
-    case 'PENDING':
-      statusStyle = 'primary';
-      break;
-    case 'FAIL':
-      statusStyle = 'danger';
-      break;
-    case 'SUCCESS':
-      statusStyle = 'success';
-      break;
-    default:
-      statusStyle = 'primary';
-      break;
-  }
-  return statusStyle;
-}
-
-/**
- * 转换类型
- * @param {string} type
- * @returns {string}
- */
-function computeType(type) {
-  return type === 'DATA' ? '业务' : '事件';
-}
-
-/**
- * 格式化时间为日期格式
- * @param {number} time
- * @returns {string}
- */
-function formatDate(time) {
-  try {
-    return dayjs(time).format('YYYY-MM-DD');
-  } catch (error) {
-    return '';
-  }
-}
 </script>

src/views/data-realtime.vue

@@ -3,7 +3,7 @@
 
   <template v-if="data">
     <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceNo" />
       <el-table-column align="center" label="采集时间" min-width="170">
         <template #default="scope">
           {{ formatTime(+scope.row.time) }}

src/views/device-edit.vue

@@ -1,108 +1,120 @@
 <template>
-  <el-form label-position="top" :model="data" ref="deviceEdit">
+  <el-form ref="deviceEdit" :model="data" :rules="deviceRules" label-position="top">
     <el-row :gutter="20">
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="设备ID号" prop="deviceId">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="设备ID" prop="deviceId">
           <el-input v-model="data.deviceId" disabled></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="站点名称" prop="address">
+          <el-input v-model="data.address"></el-input>
+        </el-form-item>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设备完整ID" prop="deviceFullId">
           <el-input v-model="data.deviceFullId"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="地区" prop="area">
           <el-input v-model="data.area"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="安装地点名称" prop="address">
-          <el-input v-model="data.address"></el-input>
-        </el-form-item>
-      </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="联系人" prop="contact">
           <el-input v-model="data.contact"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="电话" prop="phone">
           <el-input v-model="data.phone"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="经度" prop="lon">
           <el-input v-model="data.lon"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="纬度" prop="lat">
           <el-input v-model="data.lat"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="负责人" prop="head">
           <el-input v-model="data.head"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="安装位置" prop="installLocation">
           <el-input v-model="data.installLocation"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="安装时间" prop="installTime">
-          <el-date-picker style="width: 100%" v-model="data.installTime" type="datetime" placeholder="安装时间"></el-date-picker>
+          <el-date-picker v-model="data.installTime" placeholder="安装时间" style="width: 100%" type="datetime"></el-date-picker>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="正式运行时间" prop="runTime">
-          <el-date-picker style="width: 100%" v-model="data.runTime" type="datetime" placeholder="正式运行时间"></el-date-picker>
+          <el-date-picker v-model="data.runTime" placeholder="正式运行时间" style="width: 100%" type="datetime"></el-date-picker>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="链路地址" prop="linkAddress">
           <el-input v-model="data.linkAddress"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="探头编号" prop="probNo">
           <el-input v-model="data.probNo"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="试样" prop="simple">
           <el-input v-model="data.simple"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="sim卡1" prop="sim1">
           <el-input v-model="data.sim1"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设备朝向" prop="deviceDirection">
           <el-input v-model="data.deviceDirection"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="与主站后台联调情况" prop="joint">
-          <el-input v-model="data.joint"></el-input>
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="协议版本" prop="protocolVersion">
+          <el-input v-model="data.protocolVersion"></el-input>
         </el-form-item>
       </el-col>
     </el-row>
 
     <el-row :gutter="20">
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="与主站后台联调情况" prop="joint">
+          <el-input v-model="data.joint" type="textarea"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="维修记录" prop="operationRecord">
+          <el-input v-model="data.operationRecord" type="textarea"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="备注" prop="remark">
           <el-input v-model="data.remark" type="textarea"></el-input>
         </el-form-item>
@@ -119,11 +131,11 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed, watch, defineEmits } from 'vue';
+import { computed, defineEmits, reactive, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { updateDevice } from 'apis';
 import { ElMessage } from 'element-plus';
-import { deviceData } from '@/config/config';
+import { deviceData, deviceRules } from '@/config/config';
 
 let data = reactive(deviceData);
 
@@ -131,7 +143,6 @@ const deviceEdit = ref(null); // form
 const store = useStore();
 const device = computed(() => store.getters['device/current']);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
-
 const emit = defineEmits(['cancel']);
 
 watch(
@@ -139,12 +150,16 @@ watch(
   newValue => {
     data = newValue;
   },
-  { immediate: true, deep: true },
+  {
+    immediate: true,
+    deep: true,
+  },
 );
 
 // 提交表单
 const onSubmit = () => {
-  deviceEdit.value.validate(async () => {
+  deviceEdit.value.validate(async valid => {
+    if (valid) {
       if (data.installTime) {
         data.installTime = new Date(data.installTime).getTime();
       }
@@ -161,6 +176,7 @@ const onSubmit = () => {
         ElMessage.error('更新失败, 请稍后重试');
         throw new Error(error);
       }
+    }
   });
 };
 </script>

src/views/device-list.vue

@@ -25,10 +25,15 @@
           </el-row>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
-      <el-table-column align="center" label="完整ID" min-width="150" prop="deviceFullId" />
-      <el-table-column align="left" header-align="center" label="地点" min-width="150" prop="address" />
+      <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
+      <el-table-column align="center" label="设备完整ID" min-width="150" prop="deviceFullId" />
+      <el-table-column align="left" header-align="center" label="站点" min-width="150" prop="address" />
       <el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" />
+      <el-table-column align="center" label="状态" min-width="70">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color">{{ STATUS_COLOR[scope.row.status].text }} </el-tag>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="联系人" min-width="100" prop="contact" />
       <el-table-column align="center" label="联系电话" min-width="150" prop="phone" />
       <el-table-column align="center" label="安装时间" min-width="200" prop="installTime" />
@@ -95,6 +100,7 @@ import SearchBar from 'components/realtime/search-bar.vue';
 import DeviceEdit from 'components/device/device-edit.vue';
 import DeviceCreate from 'components/device/device-create.vue';
 import useDeviceCreate from '@/hooks/useDeviceCreate';
+import { STATUS_COLOR } from '@/config/config';
 
 let timer = null;
 const store = useStore();