feat: 添加字典映射值

src/api/common/index.ts

@@ -0,0 +1,14 @@
+import { request } from '../axios';
+import { getCookie } from '@/utils';
+// 获取cookie
+const shuili = getCookie('Admin-Token');
+// 获取字典列表
+export function getDicts(dictType: string) {
+  return request({
+    url: `/system/dict/data/type/${dictType}`,
+    method: "get",
+    headers: {
+      shuili: 'water ' + shuili
+    }
+  });
+}

src/hooks/web/useProject.tsx

@@ -280,27 +280,30 @@ export function useLayer() {
     const selectLayers: any = projectStore.selectedLayers.filter((item: any) => item.isNeedCluster !== "1");
     queryLayersByPos(e.wgs84SurfacePosition, selectLayers, (res: any) => {
       if (res?.attributes?.showCode) {
-        const { showCode, showName, scale, layerName } = res?.attributes;
+        const { showCode, showName, scale,type, layerName } = res?.attributes;
         switch (layerName) {
           case "水库点":
             window.$bus.$emit("open-reservoir-dialog", {
               code: showCode,
               name: showName,
-              scale
+              scale,
+              type
             });
             break;
           case "堤防":
             window.$bus.$emit("open-dike-dialog", {
               code: showCode,
               name: showName,
-              scale
+              scale,
+              type
             });
             break;
           case "水闸":
             window.$bus.$emit("open-sluice-dialog", {
               code: showCode,
               name: showName,
-              scale
+              scale,
+              type
             });
             break;
         }

src/utils/dictUtils.ts

@@ -0,0 +1,15 @@
+// 获取字典的dictLabel
+export const getDictLabel = (dictData: {dictLabel: string; dictValue: string}[], key: string) => {
+  if(dictData?.length && key){
+    let resStr = ''
+    let keyArr = key.split(',')
+    for (let i = 0; i < keyArr.length; i++) {
+      const element = dictData.find(item => item.dictValue === keyArr[i])
+      if(element){
+        resStr += element.dictLabel + ','
+      }
+    }
+    return resStr.slice(0, -1)
+  }
+  return '-'
+}

src/utils/mapUtils.ts

@@ -145,11 +145,15 @@ export const queryLayersByPos = (position: any, layerList = [], cb: any) => {
           const scaleIndex = fieldInfos.findIndex((f: any) =>
             ["eng_scal", "dike_grad", "waga_scale"].includes(f.name)
           );
+          const typeIndex = fieldInfos.findIndex((f: any) =>
+            ["dike_type", "waga_type", "res_type"].includes(f.name)
+          );
           resData = {
             attributes: {
               showCode: "" + currentFeature?.fieldValues[codeIndex],
               showName: "" + currentFeature?.fieldValues[nameIndex],
               scale: "" + currentFeature?.fieldValues[scaleIndex],
+              type: "" + currentFeature?.fieldValues[typeIndex],
               layerName: layer.nameCn,
             },
           };

src/views/Main/Dike/components/BaseInfo.vue

@@ -24,7 +24,7 @@
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 堤防型式 </template>
-            {{ form.dikePatt }}
+            {{ pattFormat(form.dikePatt) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 起点经度 </template>
@@ -45,11 +45,11 @@
 
           <el-descriptions-item>
             <template #label> 堤防类型 </template>
-            {{ form.dikeType }}
+            {{ projTypeFormat(form.dikeType) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 堤防级别 </template>
-            {{ form.dikeGrad }}
+            {{ gradFormat(form.dikeGrad) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 高程转换值 </template>
@@ -275,8 +275,10 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { getJbxx, listSwtz } from "@/api/dike";
+import { getDictLabel } from "@/utils/dictUtils";
+import { getDicts } from "@/api/common";
 
 const props = defineProps({
   resCode: {
@@ -292,6 +294,11 @@ let typeApi: any = {
 };
 const form: any = ref({});
 const emits = defineEmits(["getResInfo"]);
+
+const pattOptions = ref([]);
+const projTypeOptions = ref([]);
+const levelOptions = ref([]);
+
 function initBaseInfo() {
   getJbxx(props.resCode).then((res) => {
     if (res) {
@@ -330,12 +337,35 @@ function initData() {
 function handleChangeTab() {
   typeApi[activeName.value] && typeApi[activeName.value](code);
 }
+function initDict() {
+  getDicts("embankment_form").then((res) => {
+    pattOptions.value = res || [];
+  });
+  getDicts("embankment_type").then((res) => {
+    projTypeOptions.value = res || [];
+  });
+  getDicts("embankment_level").then((res) => {
+    levelOptions.value = res || [];
+  });
+}
+// 类型
+function projTypeFormat(key: string) {
+  return getDictLabel(projTypeOptions.value, key);
+}
+function pattFormat(key: string) {
+  return getDictLabel(pattOptions.value, key);
+}
+function gradFormat(key: string) {
+  return getDictLabel(levelOptions.value, key);
+}
+
 watch(
   () => props.resCode,
   (val) => {
     initData();
+    initDict();
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 // onMounted(() => {

src/views/Main/Dike/components/DataStatistics.vue

@@ -21,7 +21,9 @@
           end-placeholder="结束日期"
         >
         </el-date-picker>
-        <el-button type="primary" class="!ml-12" @click="handleSearch">查询</el-button>
+        <el-button type="primary" class="!ml-12" @click="handleSearch"
+          >查询</el-button
+        >
       </div>
 
       <el-radio-group v-model="showType" @change="handleChangeShowType">
@@ -32,10 +34,18 @@
     <div class="mt-24 statistics-main">
       <!-- 指标 -->
       <div v-if="showType === '1'">
-        <div class="attributes-box" v-for="(item, index) in attributesList" :key="index">
+        <div
+          class="attributes-box"
+          v-for="(item, index) in attributesList"
+          :key="index"
+        >
           <div class="title">{{ item.group }}</div>
           <div class="list-box">
-            <div class="list-item" v-for="(item2, index2) in item.items" :key="index2">
+            <div
+              class="list-item"
+              v-for="(item2, index2) in item.items"
+              :key="index2"
+            >
               <div class="item-title">{{ item2.zhName }}({{ item2.unit }})</div>
               <div class="item-value">
                 {{ item2.value == null ? "-" : item2.value }}
@@ -43,7 +53,12 @@
             </div>
           </div>
         </div>
-        <div v-if="!attributesList || !attributesList.length" class="pt-30 text-center">-暂无指标数据-</div>
+        <div
+          v-if="!attributesList || !attributesList.length"
+          class="pt-30 text-center"
+        >
+          -暂无指标数据-
+        </div>
       </div>
       <!-- 图表 -->
       <div v-else-if="showType === '2'" class="echarts-box">
@@ -364,12 +379,18 @@ onMounted(() => {
         padding: 16px 24px;
         margin-right: 16px;
         margin-bottom: 12px;
-        background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff;
+        background: linear-gradient(
+            180deg,
+            #eafffc 0%,
+            rgba(222, 255, 250, 0) 100%
+          ),
+          #ffffff;
         overflow: hidden;
         &::after {
           position: absolute;
           content: "";
-          background: url("@/assets/img/icon-attr-bg.png") no-repeat center center;
+          background: url("@/assets/img/icon-attr-bg.png") no-repeat center
+            center;
           width: 64px;
           height: 64px;
           right: -12px;
@@ -389,16 +410,11 @@ onMounted(() => {
   }
 
   .echarts-box {
-    display: flex;
-    flex-wrap: wrap;
     width: 100%;
     height: 100%;
     padding: 24px 12px;
     .echarts-dom-box {
       margin-bottom: 24px;
-      &:nth-child(2n) {
-        margin-left: 24px;
-      }
       .title {
         padding-left: 10px;
         font-size: 14px;
@@ -418,7 +434,7 @@ onMounted(() => {
         }
       }
       .echarts-dom {
-        width: 478px;
+        width: 100%;
         height: 260px;
         border: 1px solid #f0f0f0;
       }

src/views/Main/Dike/index.vue

@@ -2,8 +2,10 @@
   <div class="project-detail-wrapper">
     <div class="header">
       <div class="title">
-        <img :src="waterIcon" />
+        <img style="width: 28px; height: 28px" :src="waterIcon" />
         <span>{{ data.name }}</span>
+        <!-- <span>{{ data.scale }}</span>
+        <span>{{ data.type }}</span> -->
       </div>
       <div class="btns">
         <el-icon @click="handleClose">
@@ -14,20 +16,41 @@
     <div class="content">
       <el-tabs class="main-tabs" :tab-position="'left'" v-model="activeTab">
         <el-tab-pane label="基础信息" name="1" lazy>
-          <BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
+          <BaseInfo
+            ref="baseInfoRef"
+            :resCode="resCode"
+            @getResInfo="handleGetResInfo"
+          ></BaseInfo>
         </el-tab-pane>
         <el-tab-pane label="监测数据" name="2" lazy>
-          <DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
+          <DataStatistics
+            ref="dataStatisticsRef"
+            :resCode="resCode"
+          ></DataStatistics>
         </el-tab-pane>
         <el-tab-pane label="监测预警" name="3" lazy>
-          <MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
+          <MonitorWarning
+            ref="monitorWarning"
+            :resCode="resCode"
+          ></MonitorWarning>
         </el-tab-pane>
-        <el-tab-pane label="巡查养护统计" name="4" lazy>
+        <el-tab-pane label="视频查看" name="3-1" lazy disabled> </el-tab-pane>
-          <StatisticsAnalysis ref="statAnalysis" :resCode="resCode"></StatisticsAnalysis>
+        <el-tab-pane label="巡查养护" name="4" lazy>
+          <StatisticsAnalysis
+            ref="statAnalysis"
+            :resCode="resCode"
+          ></StatisticsAnalysis>
         </el-tab-pane>
-        <el-tab-pane :label="`有害动物防治统计`" name="5" lazy>
+        <el-tab-pane :label="`动物防治`" name="5" lazy>
-          <PestAnimalAnalysis ref="statAnalysis" :resCode="resCode"></PestAnimalAnalysis>
+          <PestAnimalAnalysis
+            ref="statAnalysis"
+            :resCode="resCode"
+          ></PestAnimalAnalysis>
         </el-tab-pane>
+        <el-tab-pane label="安全鉴定" name="" lazy disabled> </el-tab-pane>
+        <el-tab-pane label="病险核查" name="" lazy disabled> </el-tab-pane>
+        <el-tab-pane label="防汛物资" name="" lazy disabled> </el-tab-pane>
+        <el-tab-pane label="档案管理" name="" lazy disabled> </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -91,7 +114,7 @@ watch(
       resCode.value = val.code;
     }
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 onMounted(() => {
@@ -123,6 +146,7 @@ onMounted(() => {
     .title {
       display: flex;
       align-items: center;
+      font-size: 20px;
       img {
         width: 16px;
         height: 16px;

src/views/Main/Reservoir/components/BaseInfo.vue

@@ -22,7 +22,7 @@
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 水库类型 </template>
-            {{ form.resType }}
+            {{ projTypeFormat(form.resType) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 水库状态 </template>
@@ -30,11 +30,11 @@
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 工程规模 </template>
-            {{ form.engScal }}
+            {{ scaleFormat(form.engScal) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 工程等别 </template>
-            {{ form.engGrad }}
+            {{ gradeFormat(form.engGrad) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 曾用名 </template>
@@ -515,13 +515,22 @@
       </el-tab-pane>
       <el-tab-pane label="责任人信息" name="4">
         <div class="sub-title">责任人信息</div>
-        <el-table class="mt-16" :data="dutyPersonList" border style="width: 100%">
+        <el-table
-          <el-table-column type="index" label="序号" width="60"> </el-table-column>
+          class="mt-16"
-          <el-table-column prop="dutyName" label="负责人" width="120"> </el-table-column>
+          :data="dutyPersonList"
-          <el-table-column prop="dutyType" label="负责人类别" width="120"> </el-table-column>
+          border
+          style="width: 100%"
+        >
+          <el-table-column type="index" label="序号" width="60">
+          </el-table-column>
+          <el-table-column prop="dutyName" label="负责人" width="120">
+          </el-table-column>
+          <el-table-column prop="dutyType" label="负责人类别" width="120">
+          </el-table-column>
           <el-table-column prop="phone" label="电话"> </el-table-column>
           <el-table-column prop="manageUnit" label="单位"> </el-table-column>
-          <el-table-column prop="createTime" label="数据创建时间"> </el-table-column>
+          <el-table-column prop="createTime" label="数据创建时间">
+          </el-table-column>
         </el-table>
       </el-tab-pane>
     </el-tabs>
@@ -530,7 +539,12 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import * as echarts from "echarts";
-import { getReservoirBaseDetailData, getReservoirRsppDetailData } from "@/api/reservoir";
+import {
+  getReservoirBaseDetailData,
+  getReservoirRsppDetailData,
+} from "@/api/reservoir";
+import { getDictLabel } from "@/utils/dictUtils";
+import { getDicts } from "@/api/common";
 
 const props = defineProps({
   resCode: {
@@ -705,12 +719,40 @@ function handleChangeTab() {
   typeApi[activeName.value] && typeApi[activeName.value](code);
 }
 
+// 字典回显
+const gradeOptions = ref([]);
+const projTypeOptions = ref([]);
+const scaleOptions = ref([]);
+function initDict() {
+  getDicts("reservoir_type").then((res) => {
+    projTypeOptions.value = res || [];
+  });
+  getDicts("engineering_grade").then((res) => {
+    gradeOptions.value = res || [];
+  });
+  getDicts("engineering_scale").then((res) => {
+    scaleOptions.value = res || [];
+  });
+}
+
+// 类型
+function projTypeFormat(key: string) {
+  return getDictLabel(projTypeOptions.value, key);
+}
+function gradeFormat(key: string) {
+  return getDictLabel(gradeOptions.value, key);
+}
+function scaleFormat(key: string) {
+  return getDictLabel(scaleOptions.value, key);
+}
+
 watch(
   () => props.resCode,
   (val) => {
     initData();
+    initDict();
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 // onMounted(() => {

src/views/Main/Reservoir/components/DataStatistics.vue

@@ -21,7 +21,9 @@
           end-placeholder="结束日期"
         >
         </el-date-picker>
-        <el-button type="primary" class="!ml-12" @click="handleSearch">查询</el-button>
+        <el-button type="primary" class="!ml-12" @click="handleSearch"
+          >查询</el-button
+        >
       </div>
 
       <el-radio-group v-model="showType" @change="handleChangeShowType">
@@ -32,10 +34,18 @@
     <div class="mt-24 statistics-main">
       <!-- 指标 -->
       <div v-if="showType === '1'">
-        <div class="attributes-box" v-for="(item, index) in attributesList" :key="index">
+        <div
+          class="attributes-box"
+          v-for="(item, index) in attributesList"
+          :key="index"
+        >
           <div class="title">{{ item.group }}</div>
           <div class="list-box">
-            <div class="list-item" v-for="(item2, index2) in item.items" :key="index2">
+            <div
+              class="list-item"
+              v-for="(item2, index2) in item.items"
+              :key="index2"
+            >
               <div class="item-title">{{ item2.zhName }}({{ item2.unit }})</div>
               <div class="item-value">
                 {{ item2.value == null ? "-" : item2.value }}
@@ -43,7 +53,12 @@
             </div>
           </div>
         </div>
-        <div v-if="!attributesList || !attributesList.length" class="pt-30 text-center">-暂无指标数据-</div>
+        <div
+          v-if="!attributesList || !attributesList.length"
+          class="pt-30 text-center"
+        >
+          -暂无指标数据-
+        </div>
       </div>
       <!-- 图表 -->
       <div v-else-if="showType === '2'" class="echarts-box">
@@ -372,12 +387,18 @@ onMounted(() => {
         padding: 16px 24px;
         margin-right: 16px;
         margin-bottom: 12px;
-        background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff;
+        background: linear-gradient(
+            180deg,
+            #eafffc 0%,
+            rgba(222, 255, 250, 0) 100%
+          ),
+          #ffffff;
         overflow: hidden;
         &::after {
           position: absolute;
           content: "";
-          background: url("@/assets/img/icon-attr-bg.png") no-repeat center center;
+          background: url("@/assets/img/icon-attr-bg.png") no-repeat center
+            center;
           width: 64px;
           height: 64px;
           right: -12px;
@@ -397,16 +418,11 @@ onMounted(() => {
   }
 
   .echarts-box {
-    display: flex;
-    flex-wrap: wrap;
     width: 100%;
     height: 100%;
     padding: 24px 12px;
     .echarts-dom-box {
       margin-bottom: 24px;
-      &:nth-child(2n) {
-        margin-left: 24px;
-      }
       .title {
         padding-left: 10px;
         font-size: 14px;
@@ -426,7 +442,7 @@ onMounted(() => {
         }
       }
       .echarts-dom {
-        width: 478px;
+        width: 100%;
         height: 260px;
         border: 1px solid #f0f0f0;
       }

src/views/Main/Reservoir/index.vue

@@ -2,8 +2,10 @@
   <div class="project-detail-wrapper">
     <div class="header">
       <div class="title">
-        <img :src="waterIcon" />
+        <img style="width: 28px; height: 28px" :src="waterIcon" />
         <span>{{ data.name }}</span>
+        <!-- <span>{{ data.scale }}</span>
+        <span>{{ data.type }}</span> -->
       </div>
       <div class="btns">
         <el-icon @click="handleClose">
@@ -14,17 +16,34 @@
     <div class="content">
       <el-tabs class="main-tabs" :tab-position="'left'" v-model="activeTab">
         <el-tab-pane label="基础信息" name="1" lazy>
-          <BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
+          <BaseInfo
+            ref="baseInfoRef"
+            :resCode="resCode"
+            @getResInfo="handleGetResInfo"
+          ></BaseInfo>
         </el-tab-pane>
         <el-tab-pane label="监测数据" name="2" lazy>
-          <DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
+          <DataStatistics
+            ref="dataStatisticsRef"
+            :resCode="resCode"
+          ></DataStatistics>
         </el-tab-pane>
         <el-tab-pane label="监测预警" name="5" lazy>
-          <MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
+          <MonitorWarning
+            ref="monitorWarning"
+            :resCode="resCode"
+          ></MonitorWarning>
         </el-tab-pane>
         <!-- <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 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>
+        <el-tab-pane label="病险核查" name="10" disabled lazy> </el-tab-pane>
+        <el-tab-pane label="防汛物资" name="11" disabled lazy> </el-tab-pane>
+        <el-tab-pane label="档案管理" name="12" disabled lazy> </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -34,6 +53,7 @@ import { ref, watch, onMounted } from "vue";
 import BaseInfo from "./components/BaseInfo.vue";
 import DataStatistics from "./components/DataStatistics.vue";
 import MonitorWarning from "./components/MonitorWarning.vue";
+
 import { Close } from "@element-plus/icons-vue";
 import RB from "@/assets/map/reservoir_big.png";
 import RN from "@/assets/map/reservoir_normal.png";
@@ -79,6 +99,7 @@ function handleGetResInfo(data: any) {
 function handleClose() {
   window.$bus.$emit("close-reservoir-dialog");
 }
+
 watch(
   () => props.data,
   (val) => {
@@ -86,7 +107,7 @@ watch(
       resCode.value = val.code;
     }
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 onMounted(() => {
@@ -118,6 +139,7 @@ onMounted(() => {
     .title {
       display: flex;
       align-items: center;
+      font-size: 20px;
       img {
         width: 16px;
         height: 16px;

src/views/Main/Sluice/components/BaseInfo.vue

@@ -24,11 +24,11 @@
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 水闸类型 </template>
-            {{ form.wagaType }}
+            {{ projTypeFormat(form.wagaType) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 工程规模 </template>
-            {{ form.engScal }}
+            {{ scaleFormat(form.engScal) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 水闸所在位置 </template>
@@ -36,11 +36,11 @@
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 工程等别 </template>
-            {{ form.engGrad }}
+            {{ gradeFormat(form.engGrad) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 主要建筑物级别 </template>
-            {{ form.mainBuildGrad }}
+            {{ buildingLevelFormat(form.mainBuildGrad) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label> 水准基面 </template>
@@ -76,7 +76,7 @@
           >.
           <el-descriptions-item>
             <template #label>设计地震烈度</template>
-            {{ form.freqin }}
+            {{ seismicFormat(form.freqin) }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>建成时间</template>
@@ -186,6 +186,8 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import { getJbxx, listSwtz } from "@/api/sluice";
+import { getDictLabel } from "@/utils/dictUtils";
+import { getDicts } from "@/api/common";
 
 const props = defineProps({
   resCode: {
@@ -240,12 +242,54 @@ function handleChangeTab() {
   typeApi[activeName.value] && typeApi[activeName.value](code);
 }
 
+// 字典回显
+const gradeOptions = ref([]);
+const projTypeOptions = ref([]);
+const scaleOptions = ref([]);
+const buildingLevelOptions = ref([]);
+const seismicOptions = ref([]);
+function initDict() {
+  getDicts("sluice_type").then((res) => {
+    projTypeOptions.value = res || [];
+  });
+  getDicts("engineering_grade").then((res) => {
+    gradeOptions.value = res || [];
+  });
+  getDicts("engineering_scale").then((res) => {
+    scaleOptions.value = res || [];
+  });
+  getDicts("building_level").then((res) => {
+    buildingLevelOptions.value = res || [];
+  });
+  getDicts("design_seismic_intensity").then((res) => {
+    seismicOptions.value = res || [];
+  });
+}
+
+// 类型
+function projTypeFormat(key: string) {
+  return getDictLabel(projTypeOptions.value, key);
+}
+function gradeFormat(key: string) {
+  return getDictLabel(gradeOptions.value, key);
+}
+function scaleFormat(key: string) {
+  return getDictLabel(scaleOptions.value, key);
+}
+function buildingLevelFormat(key: string) {
+  return getDictLabel(buildingLevelOptions.value, key);
+}
+function seismicFormat(key: string) {
+  return getDictLabel(seismicOptions.value, key);
+}
+
 watch(
   () => props.resCode,
   (val) => {
     initData();
+    initDict();
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 // onMounted(() => {

src/views/Main/Sluice/components/DataStatistics.vue

@@ -21,7 +21,9 @@
           end-placeholder="结束日期"
         >
         </el-date-picker>
-        <el-button type="primary" class="!ml-12" @click="handleSearch">查询</el-button>
+        <el-button type="primary" class="!ml-12" @click="handleSearch"
+          >查询</el-button
+        >
       </div>
 
       <el-radio-group v-model="showType" @change="handleChangeShowType">
@@ -32,10 +34,18 @@
     <div class="mt-24 statistics-main">
       <!-- 指标 -->
       <div v-if="showType === '1'">
-        <div class="attributes-box" v-for="(item, index) in attributesList" :key="index">
+        <div
+          class="attributes-box"
+          v-for="(item, index) in attributesList"
+          :key="index"
+        >
           <div class="title">{{ item.group }}</div>
           <div class="list-box">
-            <div class="list-item" v-for="(item2, index2) in item.items" :key="index2">
+            <div
+              class="list-item"
+              v-for="(item2, index2) in item.items"
+              :key="index2"
+            >
               <div class="item-title">{{ item2.zhName }}({{ item2.unit }})</div>
               <div class="item-value">
                 {{ item2.value == null ? "-" : item2.value }}
@@ -43,7 +53,12 @@
             </div>
           </div>
         </div>
-        <div v-if="!attributesList || !attributesList.length" class="pt-30 text-center">-暂无指标数据-</div>
+        <div
+          v-if="!attributesList || !attributesList.length"
+          class="pt-30 text-center"
+        >
+          -暂无指标数据-
+        </div>
       </div>
       <!-- 图表 -->
       <div v-else-if="showType === '2'" class="echarts-box">
@@ -364,12 +379,18 @@ onMounted(() => {
         padding: 16px 24px;
         margin-right: 16px;
         margin-bottom: 12px;
-        background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff;
+        background: linear-gradient(
+            180deg,
+            #eafffc 0%,
+            rgba(222, 255, 250, 0) 100%
+          ),
+          #ffffff;
         overflow: hidden;
         &::after {
           position: absolute;
           content: "";
-          background: url("@/assets/img/icon-attr-bg.png") no-repeat center center;
+          background: url("@/assets/img/icon-attr-bg.png") no-repeat center
+            center;
           width: 64px;
           height: 64px;
           right: -12px;
@@ -389,16 +410,11 @@ onMounted(() => {
   }
 
   .echarts-box {
-    display: flex;
-    flex-wrap: wrap;
     width: 100%;
     height: 100%;
     padding: 24px 12px;
     .echarts-dom-box {
       margin-bottom: 24px;
-      &:nth-child(2n) {
-        margin-left: 24px;
-      }
       .title {
         padding-left: 10px;
         font-size: 14px;
@@ -418,7 +434,7 @@ onMounted(() => {
         }
       }
       .echarts-dom {
-        width: 478px;
+        width: 100%;
         height: 260px;
         border: 1px solid #f0f0f0;
       }

src/views/Main/Sluice/index.vue

@@ -2,8 +2,10 @@
   <div class="project-detail-wrapper">
     <div class="header">
       <div class="title">
-        <img :src="waterIcon" />
+        <img style="width: 28px; height: 28px" :src="waterIcon" />
         <span>{{ data.name }}</span>
+        <!-- <span>{{ data.scale }}</span>
+        <span>{{ data.type }}</span> -->
       </div>
       <div class="btns">
         <el-icon @click="handleClose">
@@ -14,17 +16,37 @@
     <div class="content">
       <el-tabs class="main-tabs" :tab-position="'left'" v-model="activeTab">
         <el-tab-pane label="基础信息" name="1" lazy>
-          <BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
+          <BaseInfo
+            ref="baseInfoRef"
+            :resCode="resCode"
+            @getResInfo="handleGetResInfo"
+          ></BaseInfo>
         </el-tab-pane>
         <el-tab-pane label="监测数据" name="2" lazy>
-          <DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
+          <DataStatistics
+            ref="dataStatisticsRef"
+            :resCode="resCode"
+          ></DataStatistics>
         </el-tab-pane>
         <el-tab-pane label="监测预警" name="3" lazy>
-          <MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
+          <MonitorWarning
+            ref="monitorWarning"
+            :resCode="resCode"
+          ></MonitorWarning>
         </el-tab-pane>
-        <el-tab-pane label="巡查养护统计" name="4" lazy>
+        <el-tab-pane label="巡查养护" name="4" lazy>
-          <StatisticsAnalysis ref="statAnalysis" :resCode="resCode"></StatisticsAnalysis>
+          <StatisticsAnalysis
+            ref="statAnalysis"
+            :resCode="resCode"
+          ></StatisticsAnalysis>
         </el-tab-pane>
+        <el-tab-pane label="视频查看" name="6" disabled lazy> </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>
+        <el-tab-pane label="病险核查" name="10" disabled lazy> </el-tab-pane>
+        <el-tab-pane label="防汛物资" name="11" disabled lazy> </el-tab-pane>
+        <el-tab-pane label="档案管理" name="12" disabled lazy> </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -86,7 +108,7 @@ watch(
       resCode.value = val.code;
     }
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 onMounted(() => {
@@ -118,6 +140,7 @@ onMounted(() => {
     .title {
       display: flex;
       align-items: center;
+      font-size: 20px;
       img {
         width: 16px;
         height: 16px;