Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev

packages/screen/src/router/index.js

@@ -16,6 +16,11 @@ const routes = [
     path: '/yhz',
     name: 'yhz',
     component: () => import('../views/ServiceStationManagePage/index.vue')
+  },
+  {
+    path: '/yhzsb',
+    name: 'yhzsb',
+    component: () => import('../views/EquipmentManagement/index.vue')
   }
 ]
 

packages/screen/src/views/EquipmentManagement/index.js

@@ -0,0 +1,224 @@
+import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
+import { request } from "@/utils/request";
+import { Search } from "@element-plus/icons-vue";
+import MyDialog from "../../component/MyDialog";
+import { ElMessage } from "element-plus";
+
+const treeData = ref([]);
+const treeProps = {
+    children: "children",
+    label: "name",
+    key: "id",
+}
+const filterText = ref(''); // 树节点过滤条件
+const tableData = ref([]);
+const qxmc = ref(''); // 区县名称
+const yhzid = ref(''); // 养护站id
+const filterData = reactive({
+    sbmc: '',
+    sbdl: '',
+    sblx: '',
+    sbzt: '',
+}); // 表格过滤条件
+const pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    pageSizes: [10, 20, 50],
+    layout: "prev, pager, next, jumper",
+    onChange: (page, pageSize) => {
+        pagination.current = page;
+        pagination.pageSize = pageSize;
+        getyhzsbList(filterData);
+    },
+});
+
+// 节点过滤函数
+const filterNode = (value, node) => {
+    const keyword = (value || '').toLowerCase();
+
+    const nodeData = node || {}
+
+    // 处理区域节点匹配
+    if (nodeData.type === 'area') {
+        return (nodeData.rawName || '').toLowerCase().includes(keyword)
+    }
+
+    // 处理站点节点匹配
+    if (nodeData.type === 'site') {
+        const parentData = node.parent?.data?.type === 'area' ? node.parent.data : {}
+        const parentMatch = (parentData.rawName || '').toLowerCase().includes(keyword)
+        return parentMatch || (nodeData.name || '').toLowerCase().includes(keyword)
+    }
+
+    return false
+}
+// 获取养护站列表分组
+const getTreeData = async () => {
+    try {
+        const res = await request({
+            url: '/api/yhz/listAreaGroup',
+            method: 'GET'
+        })
+        if (res.code === '00000') {
+            treeData.value = Object.entries(res.data).map(([areaName, sites]) => ({
+                id: areaName,
+                name: `${areaName}(${sites.length})`,
+                type: 'area',
+                children: sites.map(site => ({
+                    id: site.id,
+                    name: site.mc,
+                    type: 'site'
+                })),
+                rawName: areaName // 原始名称
+            }));
+            console.log('treeData', toRaw(treeData.value))
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+// 处理节点点击事件
+const handleNodeClick = (data) => {
+    if (data.type === 'area') {
+        console.log('你点击的是区县', data.id)
+        yhzid.value = ''; // 重置养护站id
+        qxmc.value = data.id; // 保存区县名称
+
+    }
+    if (data.type === 'site') {
+        console.log('你点击的是站点', data.name)
+        yhzid.value = data.id; // 保存养护站id
+        qxmc.value = ''; // 重置区县名称
+    }
+};
+
+// 获取养护站设备列表
+const getyhzsbList = async (qxmc, yhzid, filterData) => {
+    try {
+        const data = {
+            qxmc: qxmc,
+            yhzid: yhzid,
+            sbmc: filterData?.sbmc || '',
+            sbdl: filterData?.sbdl || '',
+            sblx: filterData?.sblx || '',
+            sbzt: filterData?.sbzt || '',
+            pageNum: pagination.current,
+            pageSize: pagination.pageSize,
+        }
+        const res = await request({
+            url: '/api/yjsb/list',
+            method: 'GET',
+            params: data,
+        })
+        if (res.code === '00000') {
+            tableData.value = res.data.records;
+            pagination.total = res.data.total;
+        } else {
+            tableData.value = [];
+            pagination.total = 0;
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+
+const columns = [
+    {
+        prop: 'sbzt',
+        label: '设备状态',
+    },
+    {
+        prop: 'sbmc',
+        label: '设备名称',
+    },
+    {
+        prop: 'sbbh',
+        label: '设备编号',
+    },
+    {
+        prop: 'sbxh',
+        label: '设备型号',
+    },
+    {
+        prop: 'sbdl',
+        label: '设备大类',
+    },
+    {
+        prop: 'sblx',
+        label: '设备类型',
+    },
+    {
+        prop: 'gzrq',
+        label: '购置日期',
+    },
+    {
+        prop: 'gmfy',
+        label: '购买费用（万元）',
+    },
+    {
+        prop: 'qxmc',
+        label: '所属区县',
+    },
+    {
+        label: "操作",
+        fixed: "right",
+        width: 150,
+        render: (row) => () =>
+            h("div", { class: "action-btns" }, [
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            await getDetailData(row);
+                            dialogVisible.value = true;
+                        },
+                    },
+                    () => "详情"
+                ),
+            ]),
+    },
+]
+
+
+export default () => {
+
+    const treeRef = ref(null);
+    watch(() => filterText.value, (val) => {
+        treeRef.value.filter(val || '')
+    })
+
+    watch(
+        [() => filterData, qxmc, yhzid],
+        ([newFilterData, newQxmc, newYhzid]) => {
+            getyhzsbList(newQxmc, newYhzid, newFilterData)
+        },
+        { deep: true }
+    )
+
+
+    onMounted(() => {
+        getTreeData();
+        getyhzsbList();
+    });
+    return {
+        treeRef,
+        treeData,
+        treeProps,
+        filterText,
+        filterNode,
+        handleNodeClick,
+
+        tableData,
+        filterData,
+        pagination,
+        columns,
+    }
+}

packages/screen/src/views/EquipmentManagement/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="root">
+    <div class="left-tree">
+      <div class="fillter-box">
+        <el-input
+          v-model="script.filterText.value"
+          placeholder="请输入搜索内容"
+          clearable
+        ></el-input>
+      </div>
+      <div class="tree-box">
+        <el-tree
+          ref="treeRef"
+          :data="script.treeData.value"
+          :props="script.treeProps"
+          @node-click="script.handleNodeClick"
+          accordion
+          :filter-node-method="script.filterNode"
+        />
+      </div>
+    </div>
+    <div class="right-form">
+      <div class="select-box">
+        <div class="inline-flex">
+          <label>设备名称:</label>
+          <el-input v-model="script.filterData.sbmc"></el-input>
+        </div>
+        <div class="inline-flex">
+          <label>设备大类:</label>
+          <el-input v-model="script.filterData.sbdl"></el-input>
+        </div>
+        <div class="inline-flex">
+          <label>设备类型:</label>
+          <el-input v-model="script.filterData.sblx"></el-input>
+        </div>
+        <div class="inline-flex">
+          <label>状态:</label>
+          <el-select
+            v-model="script.filterData.sbzt"
+            placeholder="请选择"
+            clearable
+            style="width: 150px;"
+          >
+            <el-option label="完好" value="完好" />
+            <el-option label="损坏" value="损坏" />
+          </el-select>
+        </div>
+      </div>
+      <div class="form-box">
+        <div class="event-box">
+          <el-button type="primary" size="large" @click="openAddEquipmentModel"
+            >新增设备</el-button
+          >
+          <el-button type="info" size="large" @click="handelExport"
+            >导出</el-button
+          >
+        </div>
+        <div class="form-content">
+          <DynamicTable
+            :dataSource="script.tableData.value"
+            :columns="script.columns"
+            :autoHeight="true"
+            :pagination="script.pagination"
+          ></DynamicTable>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script  setup>
+import scriptFn from "./index.js";
+import DynamicTable from "../../component/DynamicTable";
+const script = scriptFn();
+const { treeRef } = script;
+</script>
+<style>
+/* * {
+  border: 1px solid #ccc;
+} */
+.root {
+  height: 100%;
+  padding: 45px;
+  display: flex;
+  gap: 20px;
+}
+
+/* 左侧树形结构区域 */
+.left-tree {
+  width: 20vw;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.fillter-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tree-box {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+}
+
+/* 右侧表单区域 */
+.right-form {
+  width: 80vw;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.select-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  gap: 20px;
+}
+.inline-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.inline-flex label {
+  white-space: nowrap; /* 禁止换行 */
+}
+.form-box {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.event-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+}
+.form-content {
+  width: 100%;
+  height: calc(100% - 60px);
+}
+</style>

packages/screen/src/views/ServiceStationManagePage/index.vue

@@ -174,7 +174,6 @@ import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
 import { request } from "@/utils/request";
 import { Search } from "@element-plus/icons-vue";
 import MyDialog from "../../component/MyDialog";
-import { de } from "element-plus/es/locales.mjs";
 
 const tableData = ref([]);
 const detailData = ref({});