fix: 放开视频，添加字典映射，修改数据监测默认展示页

1 month ago · 287a6f3b58
9 changed files with 86 additions and 26 deletions
--- a/src/views/Main/Dike/components/DataStatistics.vue
+++ b/src/views/Main/Dike/components/DataStatistics.vue
@ -94,7 +94,7 @@ const props = defineProps({
  },
 });
 const cascaderOptions: any = ref([]);
-const showType: any = ref("1");
+const showType: any = ref("2");
 const cascaderArr: any = ref([]);
 const dateArr: any = ref([]);
 const cascaderProps: any = {
--- a/src/views/Main/Reservoir/components/BaseInfo.vue
+++ b/src/views/Main/Reservoir/components/BaseInfo.vue
@ -50,7 +50,7 @@
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 归口管理部门 </template>
-            {{ form.admDep }}
+            {{ departmentFormat(form.admDep) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> 水库主管部门 </template>
@ -562,6 +562,10 @@ const props = defineProps({
    type: Array<{ dictLabel: string; dictValue: string }>,
    default: [],
  },
+  departmentOptions: {
+    type: Array<{ dictLabel: string; dictValue: string }>,
+    default: [],
+  },
 });
 let myChart: any = null;
 let code: any = null;
@ -740,6 +744,9 @@ function gradeFormat(key: string) {
 function scaleFormat(key: string) {
  return getDictLabel(props.scaleOptions, key);
 }
+function departmentFormat(key: string) {
+  return getDictLabel(props.departmentOptions, key);
+}

 watch(
  () => props.resCode,
--- a/src/views/Main/Reservoir/components/DataStatistics.vue
+++ b/src/views/Main/Reservoir/components/DataStatistics.vue
@ -98,7 +98,7 @@ const props = defineProps({
  },
 });
 const cascaderOptions: any = ref([]);
-const showType: any = ref("1");
+const showType: any = ref("2");
 const cascaderArr: any = ref([]);
 const dateArr: any = ref([]);
 const cascaderProps: any = {
--- a/src/views/Main/Reservoir/components/VideoAnalysis.vue
+++ b/src/views/Main/Reservoir/components/VideoAnalysis.vue
@ -1,14 +1,29 @@
 <template>
  <div class="video-analysis">
    <div class="videoSelect">
-      <el-select placeholder="请选择视频" v-model="activeVideo" size="small" style="width: 240px" @change="videoChange">
-        <el-option v-for="item in videoList" :key="item" :label="item" :value="item" />
+      <el-select
+        placeholder="请选择视频"
+        v-model="activeVideo"
+        size="small"
+        style="width: 240px"
+        @change="videoChange"
+      >
+        <el-option
+          v-for="item in videoList"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
      </el-select>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="实时视频" name="realTime">
        <div class="videoBox">
-          <video style="width: 100%; height: 100%" :src="videoUrl" v-if="videoUrl"></video>
+          <video
+            style="width: 100%; height: 100%"
+            :src="videoUrl"
+            v-if="videoUrl"
+          ></video>
          <div v-else class="videoNull">
            <div class="videoContent">
              <img src="@/assets/image/videoNull.png" />
@ -40,8 +55,8 @@ onMounted(() => {
    pageSize: 100,
    resCode: props.resCode,
  }).then((res) => {
-    if (res.data) {
-      videoList.value = res.data.cameraIds;
+    if (res) {
+      videoList.value = res.cameraIds;
    }
  });
 });
@ -50,14 +65,15 @@ function videoChange(val: any) {
  getOperationPlay({
    cameraId: val,
  }).then((res) => {
-    if (res.data) {
-      videoUrl.value = res.data.urlsMap.flvPlayUrl;
+    if (res) {
+      videoUrl.value = res.urlsMap.flvPlayUrl;
    }
  });
 }
 </script>
 <style scoped lang="scss">
 .video-analysis {
+  padding: 4px 10px;
  .videoBox {
    height: 558px;
    video {
@ -87,8 +103,8 @@ function videoChange(val: any) {
  .videoSelect {
    position: absolute;
    z-index: 12;
-    right: 0;
-    top: 5px;
+    right: 12px;
+    top: 1px;
  }
 }
 </style>
--- a/src/views/Main/Reservoir/index.vue
+++ b/src/views/Main/Reservoir/index.vue
@ -21,6 +21,10 @@
          <BaseInfo
            ref="baseInfoRef"
            :resCode="resCode"
+            :gradeOptions="gradeOptions"
+            :projTypeOptions="projTypeOptions"
+            :scaleOptions="scaleOptions"
+            :departmentOptions="departmentOptions"
            @getResInfo="handleGetResInfo"
          ></BaseInfo>
        </el-tab-pane>
@ -36,10 +40,9 @@
            :resCode="resCode"
          ></MonitorWarning>
        </el-tab-pane>
-        <!-- <el-tab-pane label="视频分析" name="6" lazy>
+        <el-tab-pane label="视频影像" name="6" lazy>
          <VideoAnalysis ref="videoAnalysis" :resCode="resCode"></VideoAnalysis>
-        </el-tab-pane> -->
-        <el-tab-pane label="视频查看" name="6" disabled lazy> </el-tab-pane>
+        </el-tab-pane>
        <el-tab-pane label="巡查养护" name="7" disabled lazy> </el-tab-pane>
        <el-tab-pane label="动物防治" name="8" disabled lazy> </el-tab-pane>
        <el-tab-pane label="安全鉴定" name="9" disabled lazy> </el-tab-pane>
@ -64,7 +67,7 @@ import RS from "@/assets/map/reservoir_small.png";
 import { getDictLabel } from "@/utils/dictUtils";
 import { getDicts } from "@/api/common";

-// import VideoAnalysis from "./components/VideoAnalysis.vue";
+import VideoAnalysis from "./components/VideoAnalysis.vue";
 const props = defineProps({
  data: {
    type: Object,
@ -109,6 +112,7 @@ function handleClose() {
 const gradeOptions = ref([]);
 const projTypeOptions = ref([]);
 const scaleOptions = ref([]);
+const departmentOptions = ref([]);
 function initDict() {
  getDicts("reservoir_type").then((res) => {
    projTypeOptions.value = res || [];
@ -119,6 +123,9 @@ function initDict() {
  getDicts("engineering_scale").then((res) => {
    scaleOptions.value = res || [];
  });
+  getDicts("centralized_management_department").then((res) => {
+    departmentOptions.value = res || [];
+  });
 }

 function scaleFormat(key: string) {
--- a/src/views/Main/Sluice/components/BaseInfo.vue
+++ b/src/views/Main/Sluice/components/BaseInfo.vue
@ -92,7 +92,7 @@
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>归口管理部门</template>
-            {{ form.admDep }}
+            {{ departmentFormat(form.admDep) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>备注</template>
@ -213,6 +213,10 @@ const props = defineProps({
    type: Array<{ dictLabel: string; dictValue: string }>,
    default: [],
  },
+  departmentOptions: {
+    type: Array<{ dictLabel: string; dictValue: string }>,
+    default: [],
+  },
 });
 let code: any = null;
 const activeName: any = ref("1");
@ -277,6 +281,9 @@ function buildingLevelFormat(key: string) {
 function seismicFormat(key: string) {
  return getDictLabel(props.seismicOptions, key);
 }
+function departmentFormat(key: string) {
+  return getDictLabel(props.departmentOptions, key);
+}

 watch(
  () => props.resCode,
--- a/src/views/Main/Sluice/components/DataStatistics.vue
+++ b/src/views/Main/Sluice/components/DataStatistics.vue
@ -94,7 +94,7 @@ const props = defineProps({
  },
 });
 const cascaderOptions: any = ref([]);
-const showType: any = ref("1");
+const showType: any = ref("2");
 const cascaderArr: any = ref([]);
 const dateArr: any = ref([]);
 const cascaderProps: any = {
--- a/src/views/Main/Sluice/components/VideoAnalysis.vue
+++ b/src/views/Main/Sluice/components/VideoAnalysis.vue
@ -1,14 +1,29 @@
 <template>
  <div class="video-analysis">
    <div class="videoSelect">
-      <el-select placeholder="请选择视频" v-model="activeVideo" size="small" style="width: 240px" @change="videoChange">
-        <el-option v-for="item in videoList" :key="item" :label="item" :value="item" />
+      <el-select
+        placeholder="请选择视频"
+        v-model="activeVideo"
+        size="small"
+        style="width: 240px"
+        @change="videoChange"
+      >
+        <el-option
+          v-for="item in videoList"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
      </el-select>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="实时视频" name="realTime">
        <div class="videoBox">
-          <video style="width: 100%; height: 100%" :src="videoUrl" v-if="videoUrl"></video>
+          <video
+            style="width: 100%; height: 100%"
+            :src="videoUrl"
+            v-if="videoUrl"
+          ></video>
          <div v-else class="videoNull">
            <div class="videoContent">
              <img src="@/assets/image/videoNull.png" />
@ -40,8 +55,8 @@ onMounted(() => {
    pageSize: 100,
    resCode: props.resCode,
  }).then((res) => {
-    if (res.data) {
-      videoList.value = res.data.cameraIds;
+    if (res) {
+      videoList.value = res.cameraIds;
    }
  });
 });
@ -50,8 +65,8 @@ function videoChange(val: any) {
  getOperationPlay({
    cameraId: val,
  }).then((res) => {
-    if (res.data) {
-      videoUrl.value = res.data.urlsMap.flvPlayUrl;
+    if (res) {
+      videoUrl.value = res.urlsMap.flvPlayUrl;
    }
  });
 }
--- a/src/views/Main/Sluice/index.vue
+++ b/src/views/Main/Sluice/index.vue
@ -26,6 +26,7 @@
            :scaleOptions="scaleOptions"
            :buildingLevelOptions="buildingLevelOptions"
            :seismicOptions="seismicOptions"
+            :departmentOptions="departmentOptions"
            @getResInfo="handleGetResInfo"
          ></BaseInfo>
        </el-tab-pane>
@ -47,7 +48,9 @@
            :resCode="resCode"
          ></StatisticsAnalysis>
        </el-tab-pane>
-        <el-tab-pane label="视频查看" name="6" disabled lazy> </el-tab-pane>
+        <el-tab-pane label="视频查看" name="6" lazy disabled>
+          <!-- <VideoAnalysis></VideoAnalysis> -->
+        </el-tab-pane>
        <el-tab-pane label="巡查养护" name="7" disabled lazy> </el-tab-pane>
        <el-tab-pane label="动物防治" name="8" disabled lazy> </el-tab-pane>
        <el-tab-pane label="安全鉴定" name="9" disabled lazy> </el-tab-pane>
@ -64,6 +67,7 @@ import BaseInfo from "./components/BaseInfo.vue";
 import DataStatistics from "./components/DataStatistics.vue";
 import MonitorWarning from "./components/MonitorWarning.vue";
 import StatisticsAnalysis from "./components/StatisticsAnalysis.vue";
+// import VideoAnalysis from "./components/VideoAnalysis.vue";
 import { Close } from "@element-plus/icons-vue";
 import SB from "@/assets/map/sluice_big.png";
 import SM from "@/assets/map/sluice_middle.png";
@ -117,6 +121,7 @@ const projTypeOptions = ref([]);
 const scaleOptions = ref([]);
 const buildingLevelOptions = ref([]);
 const seismicOptions = ref([]);
+const departmentOptions = ref([]);

 function initDict() {
  getDicts("sluice_type").then((res) => {
@ -134,6 +139,9 @@ function initDict() {
  getDicts("design_seismic_intensity").then((res) => {
    seismicOptions.value = res || [];
  });
+  getDicts("centralized_management_department").then((res) => {
+    departmentOptions.value = res || [];
+  });
 }

 function scaleFormat(key: string) {