Merge branch 'kanban' of shuzhihua/pms-iot-vue into videoCenter

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径  http://192.168.188.149:48080  https://iot.deepoil.cc
-VITE_BASE_URL='http://192.168.188.149:48080'
+VITE_BASE_URL='https://iot.deepoil.cc'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

package.json

@@ -33,6 +33,7 @@
     "@fullcalendar/interaction": "^6.1.17",
     "@fullcalendar/vue3": "^6.1.17",
     "@iconify/iconify": "^3.1.1",
+    "@kjgl77/datav-vue3": "^1.7.4",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@number-flow/vue": "^0.4.8",
     "@riophae/vue-treeselect": "^0.4.0",
@@ -61,6 +62,7 @@
     "element-china-area-data": "^6.1.0",
     "element-plus": "2.9.1",
     "fast-xml-parser": "^4.3.2",
+    "file-save": "^0.2.0",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.9.0",
     "jsencrypt": "^3.3.2",
@@ -83,6 +85,7 @@
     "qs": "^6.12.0",
     "sortablejs": "1.15.0",
     "steady-xml": "^0.1.0",
+    "three": "^0.182.0",
     "url": "^0.11.3",
     "v3-jsoneditor": "^0.0.6",
     "video.js": "^7.21.5",

src/components/ModelViewer.vue

@@ -0,0 +1,116 @@
+<template>
+  <div ref="container" class="w-full h-full z-999 cursor-pointer"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+
+const container = ref<HTMLDivElement>()
+
+let scene: THREE.Scene
+let camera: THREE.PerspectiveCamera
+let renderer: THREE.WebGLRenderer
+let controls: OrbitControls
+let model: THREE.Group
+
+const init = () => {
+  scene = new THREE.Scene()
+  // scene.background = new THREE.Color(0x0a0a0a) // 移除深色背景
+
+  camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
+  camera.position.set(3, 3, 3)
+  camera.lookAt(0, 0, 0)
+
+  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+  renderer.setSize(2000, 1000)
+  renderer.shadowMap.enabled = true
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap
+  container.value?.appendChild(renderer.domElement)
+
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.dampingFactor = 0.05
+  controls.enableZoom = true
+  controls.enablePan = false
+
+  const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 2) // 增加强度从1到2
+  scene.add(hemisphereLight)
+
+  const pointLight = new THREE.PointLight(0xffffff, 2, 100) // 增加强度从1到2
+  pointLight.position.set(0, 5, 5)
+  scene.add(pointLight)
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5) // 增加强度从0.8到1.5
+  directionalLight.position.set(10, 10, 5)
+  directionalLight.castShadow = true
+  scene.add(directionalLight)
+
+  // 添加额外的环境光
+  const ambientLight = new THREE.AmbientLight(0x404040, 0.6) // 添加环境光
+  scene.add(ambientLight)
+
+  const modelUrl = new URL('../assets/model/industrialEquipment.glb', import.meta.url).href
+  console.log('模型URL:', modelUrl)
+  const loader = new GLTFLoader()
+  loader.load(
+    modelUrl,
+    (gltf) => {
+      console.log('模型加载成功:', gltf)
+      model = gltf.scene
+      model.scale.set(7, 7, 7) // 增加缩放
+      model.position.set(0, 0, 0)
+      scene.add(model)
+    },
+    (progress) => {
+      console.log('模型加载进度:', progress) // 加载进度
+    },
+    (error) => {
+      console.error('模型加载失败:', error)
+    }
+  )
+
+  const animate = () => {
+    requestAnimationFrame(animate)
+    controls.update()
+    if (model) {
+      model.rotation.y += 0.005
+    } else {
+      scene.children.forEach((child) => {
+        if (child instanceof THREE.Mesh && child.geometry instanceof THREE.BoxGeometry) {
+          child.rotation.y += 0.01
+        }
+      })
+    }
+    renderer.render(scene, camera)
+  }
+  animate()
+
+  const resize = () => {
+    if (container.value) {
+      const width = container.value.clientWidth
+      const height = container.value.clientHeight
+      camera.aspect = width / height
+      camera.updateProjectionMatrix()
+      renderer.setSize(width, height)
+    }
+  }
+  window.addEventListener('resize', resize)
+  resize()
+}
+
+onMounted(() => {
+  init()
+})
+
+onUnmounted(() => {
+  if (renderer) {
+    renderer.dispose()
+  }
+  if (controls) {
+    controls.dispose()
+  }
+})
+</script>

src/main.ts

@@ -44,6 +44,8 @@ import mqttTool from '@/utils/mqttTool' // Mqtt工具
 
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
 
+import DataVVue3 from '@kjgl77/datav-vue3'
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
@@ -66,6 +68,8 @@ const setupAll = async () => {
 
   await router.isReady()
 
+  app.use(DataVVue3)
+
   app.use(VueDOMPurifyHTML)
   app.config.globalProperties.$mqttTool = mqttTool
 

src/views/pms/device/completeKanban/data-row.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    style="border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); border-radius: 5px"
+    :class="[
+      'flex items-center justify-between border-b border-cyan-500/20 hover:bg-cyan-500/10 transition-colors px-2 -mx-2 rounded',
+      compact ? 'py-1' : 'py-2'
+    ]"
+  >
+    <span class="text-cyan-200">{{ label }}</span>
+    <div class="flex items-center gap-2">
+      <span class="font-mono text-white font-bold">{{ value }}</span>
+      <button
+        v-if="button"
+        style="border-radius: 5px"
+        :class="[
+          'px-3 py-1 rounded text-white text-sm transition-all',
+          buttonColor === 'green'
+            ? 'bg-green-600 hover:bg-green-500 shadow-[0_0_10px_rgba(22,163,74,0.5)]'
+            : 'bg-red-600 hover:bg-red-500 shadow-[0_0_10px_rgba(220,38,38,0.5)]'
+        ]"
+      >
+        {{ button }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  label: string
+  value: string
+  button?: string
+  buttonColor?: 'green' | 'red'
+  compact?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  compact: false
+})
+</script>

src/views/pms/device/completeKanban/index.vue

@@ -0,0 +1,344 @@
+<template>
+  <div
+    class="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 text-cyan-100 p-6 relative overflow-hidden"
+  >
+    <!-- Animated background grid -->
+    <div class="absolute inset-0 opacity-20">
+      <div class="absolute inset-0 grid-pattern"></div>
+    </div>
+
+    <!-- Scanning line effect -->
+    <div class="absolute inset-0 pointer-events-none">
+      <div class="scan-line"></div>
+    </div>
+
+    <!-- Header -->
+    <div class="relative z-10 mb-6">
+      <div class="flex items-center justify-between border-b-2 border-cyan-500/30 pb-4">
+        <div class="flex items-center gap-8 text-sm">
+          <div
+            style="border: 0.5px solid #085b77"
+            v-for="(item, i) in leftNavItems"
+            :key="i"
+            class="px-4 py-2 bg-cyan-500/10 border border-[#085b77] skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
+          >
+            <span class="inline-block skew-x-[12deg]">{{ item }}</span>
+          </div>
+        </div>
+        <h1 class="text-2xl font-bold text-center flex-1 text-cyan-300 tracking-wider">
+          PSA3000万70MPa制氮装置监控系统
+        </h1>
+
+        <div class="flex items-center gap-8 text-sm">
+          <div
+            v-for="(item, i) in rightNavItems"
+            :key="i"
+            style="border: 0.5px solid #085b77"
+            class="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
+          >
+            <span class="inline-block skew-x-[12deg]">{{ item }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <dv-border-box1 class="relative z-10">
+      <div class="relative z-10 grid grid-cols-12 gap-4 mt-5 p-6">
+        <!-- Left panels -->
+        <div class="col-span-3 space-y-4">
+          <!-- PSA核心参数 -->
+          <div class="panel">
+            <div class="flex justify-between items-center panel-title">
+              <h4>PSA核心参数</h4>
+              <dv-decoration3 style="width: 120px; height: 30px" />
+            </div>
+
+            <div class="space-y-3">
+              <!-- <DataRow label="氧气纯度" value="99.66 %" button="启停按钮" button-color="green" /> -->
+              <DataRow label="氧气压力" value="0.54 MPa" />
+              <DataRow label="氧气瞬时流量" value="3002.10 Nm³" />
+              <DataRow label="氧气累计流量" value="219.6217 万Nm³" />
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">运行状态</span>
+                <div class="status-indicator status-active"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 空气处理参数 -->
+          <div class="panel">
+            <div class="flex justify-between items-center panel-title">
+              <h4>空气处理参数</h4>
+              <dv-decoration3 style="width: 120px; height: 30px" />
+            </div>
+            <div class="space-y-3">
+              <!-- <DataRow label="出口温度" value="6.7 ℃" button="启停按钮" button-color="green" /> -->
+              <DataRow label="出口压力" value="0.6 MPa" />
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">冷干机运行状态</span>
+                <div class="status-indicator status-inactive"></div>
+              </div>
+
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">风机运行状态</span>
+                <div class="status-indicator status-active"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 1800中压机参数 -->
+          <div class="panel">
+            <div class="flex justify-between items-center panel-title">
+              <h4>1800中压机参数</h4>
+              <dv-decoration3 style="width: 120px; height: 30px" />
+            </div>
+
+            <div class="space-y-3">
+              <!-- <DataRow label="排气压力" value="3.47 MPa" button="启停按钮" button-color="green" /> -->
+              <DataRow label="排气温度" value="107.0 ℃" />
+              <DataRow label="总用电能" value="247406.4 kWh" />
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">运行状态</span>
+                <div class="status-indicator status-active"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-span-6 space-y-4">
+          <div class="panel relative overflow-hidden">
+            <div class="relative h-[450px] flex items-center justify-center">
+              <ModelViewer />
+              <!-- <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div> -->
+            </div>
+          </div>
+
+          <!-- 1050空压机参数 -->
+          <div class="panel">
+            <div class="mb-2">
+              <dv-decoration7>
+                <h3 class="text-cyan-300 text-lg font-bold px-1"> 1050空压机参数 </h3>
+              </dv-decoration7>
+            </div>
+            <!-- <h3 class="panel-title">1050空压机参数</h3> -->
+            <div class="grid grid-cols-5 gap-4">
+              <div v-for="(unit, i) in compressorUnits" :key="i" class="space-y-2 text-center">
+                <div class="text-cyan-300 font-bold mb-2">{{ unit.name }}</div>
+                <div class="text-sm">
+                  <div class="text-cyan-200">排气压力</div>
+                  <div class="text-white font-mono">{{ unit.pressure }}</div>
+                </div>
+                <div class="text-sm">
+                  <div class="text-cyan-200">排气温度</div>
+                  <div class="text-white font-mono">{{ unit.temp }}</div>
+                </div>
+                <div class="text-sm">
+                  <div class="text-cyan-200">总用电能</div>
+                  <div class="text-white font-mono text-xs">{{ unit.energy }}</div>
+                </div>
+                <div
+                  :class="[
+                    'w-8 h-8 mx-auto rounded-full animate-pulse',
+                    unit.status === 'active' ? 'status-active' : 'status-inactive'
+                  ]"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right panel -->
+        <div class="col-span-3">
+          <div class="panel h-full">
+            <div class="flex items-center justify-between mb-4 border-b border-cyan-500/30 pb-2">
+              <h3 class="text-cyan-300 text-lg font-bold">液驱压缩机参数</h3>
+              <dv-decoration8 :reverse="true" style="width: 110px; height: 20px" />
+            </div>
+            <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
+              <DataRow label="入口压力" value="3.30 MPa" :compact="true" />
+              <DataRow label="一级入口压力" value="3.32 MPa" :compact="true" />
+              <DataRow label="A级一级出口温度" value="104.5 ℃" :compact="true" />
+              <DataRow label="A级一级冷却后温度" value="16.6 ℃" :compact="true" />
+              <DataRow label="A级二级入口压力" value="8.40 MPa" :compact="true" />
+              <DataRow label="A级二级出口温度" value="134.3 ℃" :compact="true" />
+              <DataRow label="A级二级冷却后温度" value="27.6 ℃" :compact="true" />
+              <DataRow label="A级三级入口压力" value="22.57 MPa" :compact="true" />
+              <DataRow label="B级一级出口温度" value="109.6 ℃" :compact="true" />
+              <DataRow label="B级一级冷却后温度" value="16.5 ℃" :compact="true" />
+              <DataRow label="B级二级入口压力" value="8.23 MPa" :compact="true" />
+              <DataRow label="B级二级出口温度" value="130.0 ℃" :compact="true" />
+              <DataRow label="B级二级冷却后温度" value="21.5 ℃" :compact="true" />
+              <DataRow label="B级三级入口压力" value="22.46 MPa" :compact="true" />
+              <DataRow label="三级出口温度" value="83.6 ℃" :compact="true" />
+              <DataRow label="总出口温度" value="26.1 ℃" :compact="true" />
+              <DataRow label="总出口压力" value="40.82 MPa" :compact="true" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </dv-border-box1>
+
+    <!-- Main content -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataRow from './data-row.vue'
+import ModelViewer from '@/components/ModelViewer.vue'
+const leftNavItems = ['箱变', '1050空压机', 'PSA数据', '空气处理镜']
+const rightNavItems = ['主界面', '液驱及中压', '报警监控']
+
+const compressorUnits = [
+  {
+    name: '空压机1',
+    pressure: '0.68 MPa',
+    temp: '77.0 ℃',
+    energy: '124361.6 kWh',
+    status: 'active'
+  },
+  {
+    name: '空压机2',
+    pressure: '0.69 MPa',
+    temp: '78.0 ℃',
+    energy: '136750.4 kWh',
+    status: 'active'
+  },
+  {
+    name: '空压机3',
+    pressure: '0.69 MPa',
+    temp: '77.0 ℃',
+    energy: '134804.8 kWh',
+    status: 'active'
+  },
+  {
+    name: '空压机4',
+    pressure: '0.67 MPa',
+    temp: '84.0 ℃',
+    energy: '133656.0 kWh',
+    status: 'active'
+  },
+  {
+    name: '空压机5',
+    pressure: '0.00 MPa',
+    temp: '0.0 ℃',
+    energy: '12456.0 kWh',
+    status: 'inactive'
+  }
+]
+</script>
+
+<style scoped>
+/* @keyframes scan {
+  0% {
+    top: 0;
+  }
+  100% {
+    top: 100%;
+  }
+} */
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+.grid-pattern {
+  background-image: linear-gradient(rgba(6, 182, 212, 0.3) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+}
+
+.scan-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, transparent, rgb(6, 182, 212), transparent);
+  opacity: 0.3;
+  animation: scan 4s linear infinite;
+}
+
+.scan-line-fast {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(to right, transparent, rgba(6, 182, 212, 0.6), transparent);
+  animation: scan 3s linear infinite;
+}
+
+.panel {
+  background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.8), rgba(30, 58, 138, 0.5));
+  backdrop-filter: blur(4px);
+  border: 2px solid rgba(6, 182, 212, 0.4);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
+  transition: all 0.3s;
+}
+
+.panel:hover {
+  box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
+}
+
+.panel-title {
+  color: rgb(103, 232, 249);
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
+  font-weight: bold;
+  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
+  padding-bottom: 0.5rem;
+}
+
+.status-indicator {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.status-active {
+  background: rgb(34, 197, 94);
+  box-shadow: 0 0 15px rgba(34, 197, 94, 0.8);
+}
+
+.status-inactive {
+  background: rgb(239, 68, 68);
+  box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
+}
+
+.btn {
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  color: white;
+  transition: all 0.3s;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.btn-green {
+  background: rgb(22, 163, 74);
+  box-shadow: 0 0 10px rgba(22, 163, 74, 0.5);
+}
+
+.btn-green:hover {
+  background: rgb(34, 197, 94);
+  box-shadow: 0 0 20px rgba(22, 163, 74, 0.8);
+  transform: translateY(-1px);
+}
+
+.btn-red {
+  background: rgb(220, 38, 38);
+  box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
+}
+
+.btn-red:hover {
+  background: rgb(239, 68, 68);
+  box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
+  transform: translateY(-1px);
+}
+</style>

src/views/pms/stat/rdkb.vue

@@ -1458,7 +1458,7 @@ const projectDataRowClick = (row, column, event) => {
 const domesticData = ref<any[]>([
   {
     index: 1,
-    dept: '公滩',
+    dept: '公摊',
     count: 13,
     orig_value: 1506.88,
     net_value: 559.95,

src/views/report-statistics/fault_report/index.vue

@@ -125,7 +125,7 @@
         <el-col :span="4">
           <div class="bg-[#fff] p-2 py-4 rounded-lg">
             <el-form ref="queryFormRef" :model="queryParams">
-              <el-form-item label="上报时间" prop="createTime">
+              <!-- <el-form-item label="上报时间" prop="createTime">
                 <el-date-picker
                   v-model="queryParams.createTime"
                   value-format="YYYY-MM-DD HH:mm:ss"
@@ -135,7 +135,7 @@
                   :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                   class="!w-220px"
                 />
-              </el-form-item>
+              </el-form-item> -->
 
               <el-form-item>
                 <el-button @click="handleQuery"
@@ -156,6 +156,16 @@
         </el-col>
       </el-row>
 
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-radio-group v-model="dateType" size="default" fill="#409eff">
+            <el-radio-button label="年" value="year" />
+            <el-radio-button label="月" value="month" />
+            <el-radio-button label="日" value="day" />
+          </el-radio-group>
+        </el-col>
+      </el-row>
+
       <!-- 列表 -->
       <ContentWrap style="border: 0; margin-top: 10px">
         <el-table
@@ -258,6 +268,7 @@
 
 <script setup lang="ts">
 import { IotInspectOrderApi, IotInspectOrderVO } from '@/api/pms/inspect/order'
+import { watch } from 'vue'
 
 import { DICT_TYPE } from '@/utils/dict'
 import DeptTree from '@/views/system/user/DeptTree.vue'
@@ -381,6 +392,65 @@ onMounted(() => {
   }
   getList()
 })
+
+let dateType = ref('year')
+watch(
+  dateType,
+  () => {
+    const now = new Date()
+    let startTime: Date
+    let endTime: Date
+
+    switch (dateType.value) {
+      case 'year':
+        // 当年：1月1日 00:00:00 到 12月31日 23:59:59
+        startTime = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0)
+        endTime = new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999)
+        break
+
+      case 'month':
+        // 当月：月初 00:00:00 到 月末 23:59:59
+        startTime = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0)
+        // 下个月的第0天就是当月的最后一天
+        endTime = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999)
+        break
+
+      case 'day':
+        // 当日：当天 00:00:00 到 23:59:59
+        const year = now.getFullYear()
+        const month = now.getMonth()
+        const date = now.getDate()
+        startTime = new Date(year, month, date, 0, 0, 0, 0)
+        endTime = new Date(year, month, date, 23, 59, 59, 999)
+        break
+
+      default:
+        startTime = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0)
+        endTime = new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999)
+    }
+
+    // 使用本地时间格式化函数，避免时区转换问题
+    const formatLocalDateTime = (date: Date): string => {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    }
+    // 设置查询参数 - 使用本地时间格式化
+    queryParams.createTime = [formatLocalDateTime(startTime), formatLocalDateTime(endTime)]
+
+    const currentStatus = Object.keys(statusList.value).find((key) => statusList.value[key])
+    queryParams.pageNo = 1
+    getList(currentStatus || 'all', false) // 不重置状态
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 <style scoped>
 /* 添加异常行高亮样式 */