From 20617cf378d82e12ef8a259f6353c80e60d0e1e3 Mon Sep 17 00:00:00 2001
From: zhangyue <zhangyue@zcloudchina.com>
Date: Tue, 10 Jun 2025 19:07:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=BE=E7=9F=BF=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  14 +-
 .../tailings_reservoir/components/add.vue     | 398 ++++++++++++++++++
 src/views/tailings_reservoir/index.vue        | 199 +++++++++
 3 files changed, 610 insertions(+), 1 deletion(-)
 create mode 100644 src/views/tailings_reservoir/components/add.vue
 create mode 100644 src/views/tailings_reservoir/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 15b2d43..225801a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -141,6 +141,17 @@ const routes = [
             },
             component: () => import("@/views/emergency_storage/index"),
           },
+          {
+            path: "/tailings_reservoir",
+            name: "/tailings_reservoir",
+            meta: {
+              title: "尾矿库",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/tailings_reservoir/index"),
+          },
           {
             path: "/system_management/data_dictionary",
             name: "/system_management/data_dictionary",
@@ -150,7 +161,8 @@ const routes = [
               isMenu: true,
               isSubMenu: false,
             },
-            component: () => import("@/views/system_management/data_dictionary/index"),
+            component: () =>
+              import("@/views/system_management/data_dictionary/index"),
           },
         ],
       },
diff --git a/src/views/tailings_reservoir/components/add.vue b/src/views/tailings_reservoir/components/add.vue
new file mode 100644
index 0000000..58993e4
--- /dev/null
+++ b/src/views/tailings_reservoir/components/add.vue
@@ -0,0 +1,398 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="100px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="尾矿库名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入尾矿库名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="尾矿库地址" prop="address">
+            <el-input v-model="form.address" placeholder="请输入尾矿库地址" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="form.area"
+              v-model:name="form.areaName"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="false"
+              :level="4"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="运行状态" prop="runningStatus">
+            <el-select
+              v-model="form.runningStatus"
+              placeholder="请选择运行状态"
+            >
+              <el-option
+                v-for="item in runningStatusList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="是否有生产经营主体" prop="hasProductionEntity">
+            <el-select
+              v-model="form.hasProductionEntity"
+              placeholder="请选择是否有生产经营主体"
+            >
+              <el-option
+                v-for="item in hasOrNoList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="是否为”头顶库“" prop="isOverheadVault">
+            <el-select
+              v-model="form.isOverheadVault"
+              placeholder="请选择是否为”头顶库“"
+            >
+              <el-option
+                v-for="item in yesOrNoList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="矿种" prop="mineralSpecies">
+            <el-select v-model="form.mineralSpecies" placeholder="请选择矿种">
+              <el-option
+                v-for="item in mineralSpeciesList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="设计等别" prop="designGrade">
+            <el-select v-model="form.designGrade" placeholder="请选择设计等别">
+              <el-option
+                v-for="item in designGradeList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="现状等别" prop="currentGrade">
+            <el-select v-model="form.currentGrade" placeholder="请选择现状等别">
+              <el-option
+                v-for="item in currentGradeList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="设计坝高" prop="designDamHeight">
+            <el-input-number
+              v-model="form.designDamHeight"
+              :precision="2"
+              :step="0.1"
+              placeholder="请输入设计坝高"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="现状坝高" prop="currentDamHeight">
+            <el-input-number
+              v-model="form.currentDamHeight"
+              :precision="2"
+              :step="0.1"
+              placeholder="请输入现状坝高"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="人口数" prop="population">
+            <el-input-number
+              v-model="form.population"
+              placeholder="请输入人口数"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="险情等级" prop="dangerousSituation">
+            <el-select
+              v-model="form.dangerousSituation"
+              placeholder="请选择险情等级"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in dangerousSituationList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="勘察情况" prop="surveySituation">
+            <el-input
+              v-model="form.surveySituation"
+              placeholder="请输入勘察情况"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="治理情况" prop="governanceSituation">
+            <el-input
+              v-model="form.governanceSituation"
+              placeholder="请输入治理情况"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="搬迁情况" prop="relocationSituation">
+            <el-input
+              v-model="form.relocationSituation"
+              placeholder="请输入搬迁情况"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="风险等级" prop="riskLevel">
+            <el-select v-model="form.riskLevel" placeholder="请选择风险等级">
+              <el-option label="低风险" value="1" />
+              <el-option label="中风险" value="2" />
+              <el-option label="高风险" value="3" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="规模与形态描述" prop="scaleDescription">
+            <el-input
+              v-model="form.scaleDescription"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入规模与形态描述"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <div style="display: flex">
+            <el-form-item label="经度" prop="longitude" style="flex: 1">
+              <el-input v-model="form.longitude" placeholder="请选择经度" />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude" style="flex: 1">
+              <el-input v-model="form.latitude" placeholder="请选择纬度" />
+            </el-form-item>
+            <el-form-item label-width="10px">
+              <el-button
+                class="ml-10"
+                type="primary"
+                @click="fnSelectedPosition"
+                >点击定位</el-button
+              >
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+
+    <app-map
+      v-model:visible="mapDialog.visible"
+      v-model:longitude="mapDialog.longitude"
+      v-model:latitude="mapDialog.latitude"
+      @submit="fnMapSubmit"
+    />
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import { ElMessage } from "element-plus";
+import { reactive, ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import AppMap from "@/components/map/map.vue";
+import {
+  setGeologicalDisasterAdd,
+  setGeologicalDisasterUpdate,
+} from "@/request/kangzai.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+// 字典数据
+const runningStatusList = ref([]);
+const mineralSpeciesList = ref([]);
+const designGradeList = ref([]);
+const currentGradeList = ref([]);
+const yesOrNoList = [
+  { name: "是", bianma: "1" },
+  { name: "否", bianma: "2" },
+];
+const hasOrNoList = [
+  { name: "有", bianma: "1" },
+  { name: "无", bianma: "2" },
+];
+const fnGetDictData = async () => {
+  const [runningStatusRes, mineralSpeciesRes, designGradeRes, currentGradeRes] =
+    await Promise.all([
+      getDataDictionary({ parentId: "b62cbaa90f9936bca50e48e8e853150a" }),
+      getDataDictionary({ parentId: "306f753002bc728163a3b14911b21d1d" }),
+      getDataDictionary({ parentId: "f32b9172ba95c27041c2289d03e6133f" }),
+      getDataDictionary({ parentId: "039bed1c0f108325bf800e4e4fe88b12" }),
+      getDataDictionary({ parentId: "c8e9f0a1b2c347d56e7f8a9b0c1d2e3f" }),
+    ]);
+  runningStatusList.value = runningStatusRes.dictionariesList;
+  mineralSpeciesList.value = mineralSpeciesRes.dictionariesList;
+  designGradeList.value = designGradeRes.dictionariesList;
+  currentGradeList.value = currentGradeRes.dictionariesList;
+};
+fnGetDictData();
+
+const data = reactive({
+  rules: {
+    name: [{ required: true, message: "请输入尾矿库名称", trigger: "blur" }],
+    area: [{ required: true, message: "请选择区域", trigger: "blur" }],
+    mineralSpecies: [
+      { required: true, message: "请选择灾害类型", trigger: "change" },
+    ],
+    scale: [{ required: true, message: "请选择规模", trigger: "change" }],
+    stability: [{ required: true, message: "请选择稳定性", trigger: "change" }],
+    households: [{ required: true, message: "请输入户数", trigger: "blur" }],
+    population: [{ required: true, message: "请输入人口数", trigger: "blur" }],
+    dangerousSituation: [
+      { required: true, message: "请选择险情等级", trigger: "change" },
+    ],
+    surveySituation: [
+      { required: true, message: "请选择勘察情况", trigger: "change" },
+    ],
+    governanceSituation: [
+      { required: true, message: "请选择治理情况", trigger: "change" },
+    ],
+    relocationSituation: [
+      { required: true, message: "请选择搬迁情况", trigger: "change" },
+    ],
+    riskLevel: [
+      { required: true, message: "请选择风险等级", trigger: "change" },
+    ],
+    longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
+    latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+  },
+});
+
+const mapDialog = ref({
+  visible: false,
+  longitude: "",
+  latitude: "",
+});
+const fnSelectedPosition = () => {
+  mapDialog.value.visible = true;
+  mapDialog.value.longitude = form.value.longitude;
+  mapDialog.value.latitude = form.value.latitude;
+};
+const fnMapSubmit = ({ longitude, latitude }) => {
+  form.value.longitude = longitude;
+  form.value.latitude = latitude;
+};
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const param = {
+      ...form.value,
+      areaName: form.value.areaName.join("-"),
+      province: form.value.area[0],
+      city: form.value.area[1],
+      county: form.value.area[2],
+      village: form.value.area[3],
+      street: form.value.area[4],
+    };
+    delete param.area;
+
+    if (props.type === "add") {
+      await setGeologicalDisasterAdd(param);
+    } else if (props.type === "edit") {
+      await setGeologicalDisasterUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/tailings_reservoir/index.vue b/src/views/tailings_reservoir/index.vue
new file mode 100644
index 0000000..27a641c
--- /dev/null
+++ b/src/views/tailings_reservoir/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="灾害点名称" prop="disasterName">
+          <el-input
+            v-model="searchForm.disasterName"
+            placeholder="请输入灾害点名称"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="属地" prop="area">
+          <layout-cascader
+            v-model="searchForm.area"
+            :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+            :check-strictly="true"
+            :level="5"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="地形地貌" prop="terrain">
+          <el-select v-model="searchForm.terrain" placeholder="请选择地形地貌">
+            <el-option
+              v-for="item in terrainList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="灾害类型" prop="disasterType">
+          <el-select
+            v-model="searchForm.disasterType"
+            placeholder="请选择灾害类型"
+          >
+            <el-option
+              v-for="item in disasterTypeList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="disasterName" label="灾害点名称" />
+      <el-table-column prop="areaName" label="属地" />
+      <el-table-column prop="terrainName" label="地形地貌" />
+      <el-table-column prop="disasterTypeName" label="灾害类型" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.geologicalDisasterId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from "vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import {
+  getGeologicalDisasterPage,
+  setGeologicalDisasterDelete,
+} from "@/request/kangzai.js";
+import Add from "./components/add.vue";
+
+const terrainList = ref([]);
+const disasterTypeList = ref([]);
+
+const fnGetDictData = async () => {
+  const [terrainRes, disasterTypeRes] = await Promise.all([
+    getDataDictionary({ parentId: "b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q" }),
+    getDataDictionary({ parentId: "c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r" }),
+  ]);
+  terrainList.value = terrainRes.dictionariesList;
+  disasterTypeList.value = disasterTypeRes.dictionariesList;
+};
+fnGetDictData();
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getGeologicalDisasterPage,
+  {
+    beforeGetData: (searchForm) => {
+      const area = searchForm.area || [];
+      searchForm.province = area[0];
+      searchForm.city = area[1];
+      searchForm.county = area[2];
+      searchForm.village = area[3];
+      searchForm.street = area[4];
+    },
+    callback: (list) => {
+      list.forEach((item) => {
+        item.terrainName =
+          terrainList.value.find((dict) => dict.bianma === item.terrain)
+            ?.name || item.terrain;
+        item.disasterTypeName =
+          disasterTypeList.value.find(
+            (dict) => dict.bianma === item.disasterType
+          )?.name || item.disasterType;
+      });
+    },
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      disasterName: "",
+      province: "",
+      city: "",
+      county: "",
+      village: "",
+      street: "",
+      area: [],
+      areaName: [],
+      terrain: "",
+      disasterType: "",
+      scaleDescription: "",
+      scale: "",
+      stability: "",
+      households: "",
+      population: "",
+      dangerousSituation: "",
+      surveySituation: "",
+      governanceSituation: "",
+      relocationSituation: "",
+      riskLevel: "",
+      longitude: "",
+      latitude: "",
+    },
+  },
+});
+
+const fnDelete = async (geologicalDisasterId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setGeologicalDisasterDelete({ geologicalDisasterId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  await nextTick();
+  data.addOrEditDialog.form = {};
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = row;
+    data.addOrEditDialog.form.area = [
+      row.province,
+      row.city,
+      row.county,
+      row.village,
+      row.street,
+    ];
+    data.addOrEditDialog.form.areaName = row.areaName.split("-");
+  }
+};
+</script>
+
+<style scoped></style>