合并冲突

2026-05-27 18:59:26 +08:00 · 2025-09-09 09:52:52 +08:00
parent 6c76d1e980 2f602ad72a
commit 5a11916a02
70 changed files with 3979 additions and 846 deletions
--- a/web/src/components/ComTable.vue
+++ b/web/src/components/ComTable.vue
@@ -108,7 +108,7 @@ const props = defineProps({
    default: () => {
      return {
        count: 1,
-        pageSize: 10,
+        pageSize: 5,
        page: 1
      }
    }
@@ -410,30 +410,8 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
  background-color: transparent !important;
 }

-:deep(
-    .ant-table-wrapper
-      .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-body
-      > table
-      > tbody
-      > tr
-      > .ant-table-cell-fix-right-first::after
-  ) {
-  // border-inline-end: 1px solid var(--theme-bg) !important;
-}
-:deep(
-    .ant-table-wrapper
-      .ant-table.ant-table-bordered
-      > .ant-table-container
-      > .ant-table-header
-      > table
-      > thead
-      > tr
-      > .ant-table-cell-fix-right-first::after
-  ) {
-  // border-inline-end: 1px solid var(--theme-bg) !important;
-}
+
+

 :deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
  background: var(--table-select) !important;
--- a/web/src/components/EditCom.vue
+++ b/web/src/components/EditCom.vue
@@ -27,31 +27,28 @@
        </template>
        <template #treetable="item">
          <TreeTable
+            class="treeTable"
            :columns="item.columns"
            :table-data="item.tableData"
            ref="treeTable"
            :transfer-dialog="transferDialog"
-            @handleDetailPagesizeChange="handleDetailPagesizeChange"
            :table-option="{
              checkStrictly: false,
              selectTableData: item.selectTableData,
              scroll: { y: 500 }
            }"
          >
-            <template #isQuery="record">
-              <a-tag :color="record.isQuery ? 'green' : 'red'">{{
-                record.isQuery ? '启用' : '禁用'
-              }}</a-tag>
+            <template #is_add="recordList">
+              <a-checkbox v-model:checked="recordList.is_add"></a-checkbox>
            </template>
-            <template #isEdit="record">
-              <a-tag :color="record.isEdit ? 'green' : 'red'">{{
-                record.isEdit ? '启用' : '禁用'
-              }}</a-tag>
+            <template #is_del="recordList">
+              <a-checkbox v-model:checked="recordList.is_del"></a-checkbox>
            </template>
-            <template #isControl="record">
-              <a-tag :color="record.isControl ? 'green' : 'red'">{{
-                record.isControl ? '启用' : '禁用'
-              }}</a-tag>
+            <template #is_edit="recordList">
+              <a-checkbox v-model:checked="recordList.is_edit"></a-checkbox>
+            </template>
+            <template #isQuery="recordList">
+              <a-checkbox v-model:checked="recordList.isQuery"></a-checkbox>
            </template>
          </TreeTable>
        </template>
@@ -75,7 +72,9 @@ import {
  stationFormRules,
  deviceOptions,
  deviceFormRules,
-  alarmlogOptions
+  alarmlogOptions,
+  serviceApiOptions,
+  serviceApiFormRules
 } from '../../public/config/columnList'
 import DetailInfo from './DetailInfo.vue'
 import { postReq, getReq } from '@/request/api'
@@ -117,10 +116,12 @@ export default {
      formRules: {},
      apiMethods: {
        // menu: 'menuConfirm',
-        // permission: 'permissionConfirm',
        user: 'userConfirm',
        role: 'roleConfirm',
-        device: 'deviceConfirm'
+        device: 'deviceConfirm',
+        station: 'stationConfirm',
+        serviceApi: 'serviceApiConfirm',
+        // permission: 'permissionConfirm',
      },
      form: {},
      ObjInfo: {},
@@ -173,6 +174,9 @@ export default {
        case 'alarmLog':
          this.detailInfos = alarmlogOptions
          this.formRules = {}
+        case 'serviceApi':
+          this.detailInfos = serviceApiOptions
+          this.formRules = serviceApiFormRules

          break

@@ -302,21 +306,24 @@ export default {
          add: '/insertRole',
          edit: '/deleteRole'
        }
+        const { selectedRowKeys } = this.$refs.treeTable[0]
+        console.log(selectedRowKeys, 'selectedRowKeys')
        const paramsDate = {
          ...this.form
        }
-        if (this.action == 'edit') {
-          paramsDate.role_id = this.record.role_id
-        }

-        const res = await postReq(menuApi[this.action], paramsDate)
-        if (res.errcode === 0) {
-          setTimeout(() => {
-            this.handleback()
-          }, 1000)
-        } else {
-          throw res
-        }
+        // if (this.action == 'edit') {
+        //   paramsDate.role_id = this.record.role_id
+        // }
+
+        // const res = await postReq(menuApi[this.action], paramsDate)
+        // if (res.errcode === 0) {
+        //   setTimeout(() => {
+        //     this.handleback()
+        //   }, 1000)
+        // } else {
+        //   throw res
+        // }
      } catch (error) {
        console.log(error, 'roleConfirm')
      }
@@ -377,6 +384,31 @@ export default {
        this.$message.error('添加失败')
      }
    },
+    async serviceApiConfirm() {
+      try {
+        const menuApi = {
+          add: '/insertServiceApi',
+          edit: '/updateServiceApi'
+        }
+        const paramsDate = {
+          ...this.form
+        }
+        if (this.action == 'edit') {
+          paramsDate.api_id = this.record.api_id
+        }
+
+        const res = await postReq(menuApi[this.action], paramsDate)
+        if (res.errcode === 0) {
+          setTimeout(() => {
+            this.handleback()
+          }, 1000)
+        } else {
+          throw res
+        }
+      } catch (error) {
+        console.log(error, 'stationConfirm')
+      }
+    },
    handleback() {
      this.$emit('operateForm', 'back')
    },
@@ -417,4 +449,8 @@ export default {
 :deep(.ant-picker) {
  color: var(--theme-text-default) !important;
 }
+
+:deep(.treeTable) {
+  width: 550px !important;
+}
 </style>
--- a/web/src/components/Home/Map.vue
+++ b/web/src/components/Home/Map.vue
@@ -1,10 +1,28 @@
 <template>
  <div class="map">
-    <div>
-      <div class="icon1" @click="showModal(testVal)"></div>
-      <div class="icon"></div>
+   
+    <div ref="mapContent" class="mapContent" >
+      <tdt-map
+        ref="tiandituMap"
+        :center="center"
+        :zoom="zoom"
+        @init="init"
+        map-style="black"
+        class="amap-box"
+        :mid="'amap-vue'"
+      >
+        <tdt-marker
+          v-for="marker in markers"
+          :position="[marker.lon, marker.lat]"
+          :key="marker.id"
+          :icon="marker.iconMap"
+          style="width: 20px; height: 20px"
+          @click="clickArrayMarker(marker)"
+          :title="marker.name"
+        >
+        </tdt-marker>
+      </tdt-map>
    </div>
-    <div ref="mapContent"></div>
    <a-modal
      class="modal"
      ref="modal"
@@ -16,10 +34,7 @@
      :mask="true"
    >
      <template #closeIcon>
-        <i
-          class="iconfont icon-guanbi"
-          style="font-size:20px; cursor: pointer; color: #fff; "
-        />
+        <i class="iconfont icon-guanbi" style="font-size: 20px; cursor: pointer; color: #fff" />
      </template>
      <div class="modal-content">
        <div class="home-modal">
@@ -32,39 +47,133 @@
 <script>
 import { getReq, postReq } from '@/request/api'
 import Modal from '@/components/Home/Modal.vue'
+import { loadTMap } from '@/utils/loadTMap'
+import {gcj02ToWgs84} from '@/utils/gcj02ToWgs84'
+import { TdtMap } from 'vue-tianditu'
+
 export default {
  name: 'Map',
-  components: { Modal },
+  components: { Modal, TdtMap },

  data() {
    return {
+      center: [],
+      // zoom: 16,
+      zoom: 2,
+      map: null,
+      currentMarker: {},
      showCtrModal: false,
+      markers: [],
+
      testVal: {
        name: '场站211',
        id: '2'
      },
-      changeStationId:''
+      changeStationId: '',
+      targetKey: '98d875e39cf0ebab01e56a0f86c5ed44'
    }
  },
-  mounted() {},
+  mounted() {
+    this.initMap()
+    // this.getMarkList()
+  },
  methods: {
-    async showModal(currentVal) {
-      this.changeStationId=currentVal.id
-      console.log(currentVal, 'cccccccccccccccccccccc')
-      this.showCtrModal = true
+    init(map) {
+      this.map = map
+      // console.log(this.map.getCenter(),"this.map.getCenter()")
+      this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
+      // 监听地图加载完成事件
+      this.map.addEventListener('load', () => {
+        const c= this.map.getCenter()
+        this.center =gcj02ToWgs84(c);
+        console.log('GCJ02坐标:', this.center);
+      });
+      this.getMarkList()
+    },
+    async getMarkList() {
      try {
-        const query = {
-          // station_id:this.changeStationId
+        let query = {
+          role_id: localStorage.getItem('user')[0].role_id
        }
-        const res = await postReq(query, '')
-        if (res.code == 200) {
-          this.modalInfo = res.data.records
+        const res = await getReq('/queryStationList', query)
+        if (res.errcode === 0) {
+          this.markers = res.data.map((item) => {
+            console.log(gcj02ToWgs84(+item.lon, +item.lat),"gcj02ToWgs84(+item.lon, +item.lat)")
+            let wgs = +item.lat && +item.lon ? gcj02ToWgs84(+item.lon, +item.lat) : [null, null]
+            return {
+              ...item,
+              lon: wgs[0],
+              lat: wgs[1],
+              iconMap: !+item.status
+                ? require('../../assets/home/homeIcon1.png')
+                : require('../../assets/home/homeIcon.png')
+            }
+          })
+          console.log("this.markers ",this.markers )
+        } else {
+          this.markers = []
+          throw res
+        }
+      } catch (error) {
+        console.log(error,'eeeeeeeeeeeeeeee')
+      }
+    },
+    async initMap() {
+      try {
+        const [mapKey] = await Promise.all([this.getSysConfig('map-key')])
+        // const gcj02LngLat=map.getCenter()
+        // console.log(gcj02LngLat.getLng())
+        console.log(mapKey,"mapKey")
+        await loadTMap(mapKey)
+        
+
+        // 创建地图实例（需要HTML中存在id为mapContainer的元素）  
+        // this.map = new T.Map("amap-vue");  
+        // // this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12); // 初始中心点  
+        
+        // const centerGcj02 = this.map.getCenter();  
+        // console.log("GCJ02坐标:", centerGcj02.getLng(), centerGcj02.getLat());  
+        // const centerWgs84=gcj02ToWgs84(centerGcj02.getLng(),centerGcj02.getLat())
+
+
+
+        // this.center =[]
+      } catch (err) {
+        console.error('天地图加载失败:', err)
+      }
+    },
+    async getSysConfig() {
+      let sysConfig
+      try {
+        const query = {}
+        const res = await getReq('/', query)
+        if (res.errcode === 0) {
+          sysConfig = res.data.value
        } else {
          throw res
        }
-      } catch (err) {
-        console.log(err, 'eeeeeeeeeeeeeeeerr')
+      } catch (error) {
+        sysConfig = this.targetKey
      }
+      return sysConfig
+    },
+    async clickArrayMarker(currentVal) {
+      this.changeStationId = currentVal.station_id
+      console.log(currentVal, 'cccccccccccccccccccccc')
+      this.showCtrModal = true
+      // try {
+      //   const query = {
+      //     // station_id:this.changeStationId
+      //   }
+      //   const res = await postReq(query, '')
+      //   if (res.errcode === 0) {
+      //     this.modalInfo = res.data.records
+      //   } else {
+      //     throw res
+      //   }
+      // } catch (err) {
+      //   console.log(err, 'eeeeeeeeeeeeeeeerr')
+      // }
    }
  }
 }
@@ -73,6 +182,10 @@ export default {
 .map {
  width: 100%;
  height: 100%;
+
+  .mapContent{
+    height:100%;
+  }
  .icon1 {
    width: 32px;
    height: 80px;
@@ -112,11 +225,11 @@ export default {
      margin: auto;
      box-shadow: none;
      background: transparent;
-.ant-modal-close{
-  position: absolute;
-    right: 0;
-    top: 3px;
-}
+      .ant-modal-close {
+        position: absolute;
+        right: 0;
+        top: 3px;
+      }
      .ant-modal-body {
        height: calc(100% - 45px);
        color: #fff;
@@ -148,5 +261,9 @@ export default {
  .home-modal {
    height: 100%;
  }
+
+  :deep(.tdt-marker-icon){
+    height:auto!important;
+  }
 }
 </style>
--- a/web/src/components/Home/Modal.vue
+++ b/web/src/components/Home/Modal.vue
@@ -9,8 +9,14 @@
        </div>
        <component
          :is="item.componentId"
-          :props-total="item.infoKey=='prefab'? modalInfo.prefabTotal: modalInfo.allTotal"
          :props-info="modalInfo[item.infoKey]"
+          :props-total="
+            ['prefab', 'dataTotal'].includes(item.infoKey)
+              ? item.key == 'prefab'
+                ? modalInfo.prefabTotal
+                : modalInfo.dataTotal
+              : modalInfo.allTotal
+          "
        ></component>
      </div>
    </div>
@@ -71,7 +77,7 @@ export default {
          title: '运行信息',
          class: 'operation-status',
          componentId: OperationalInfo,
-          infoKey: ''
+          infoKey: 'dataTotal'
        },
        {
          title: '场站收益情况',
@@ -96,7 +102,7 @@ export default {
          title: '环境信息',
          class: 'envInfo',
          componentId: EnvInfo,
-          infoKey: ''
+          infoKey: 'dataTotal'
        }
      ],
      sysName: '',
@@ -115,7 +121,8 @@ export default {
    await Promise.all([
      this.getStatTotalList(),
      this.queryStationInfo(),
-      this.getStatDayList(1),
+      this.queryStationData(),
+      this.getStatDayList(1)
    ])
  },

@@ -145,15 +152,33 @@ export default {
        this.modalInfo.allTotal = {}
      }
    },
+    // 查询场站实时数据
+    async queryStationData() {
+      try {
+        // station_id：场站ID
+
+        const query = {
+          station_id: this.stationId
+        }
+        const res = await getReq('/queryStationData', query)
+        if (res.errcode === 0) {
+          this.modalInfo.dataTotal = res.data
+        } else {
+          throw res
+        }
+      } catch (error) {
+        this.modalInfo.dataTotal = {}
+      }
+    },
    // 查询场站信息
    async queryStationInfo() {
      try {
        // station_id：场站ID

        const query = {
-          station_id: this.stationId,
+          station_id: this.stationId
        }
-        const res = await getReq('//queryStationInfo', query)
+        const res = await getReq('/queryStationInfo', query)
        if (res.errcode === 0) {
          this.modalInfo.prefabTotal = res.data
        } else {
--- a/web/src/components/Home/Modal/EnvInfo.vue
+++ b/web/src/components/Home/Modal/EnvInfo.vue
@@ -30,9 +30,29 @@ export default {
  },
  data() {
    return {
+      coolingList: [
+        {
+          label: '关机',
+          value: '0'
+        },
+        {
+          label: '开机',
+          value: '1'
+        }
+      ],
+      aircList: [
+        {
+          label: '关机',
+          value: '0'
+        },
+        {
+          label: '开机',
+          value: '1'
+        }
+      ],
      list: [
        {
-          key: 'key1',
+          key: 'coolingStatus',
          value: '制冷',
          d: '',
          label: '冷机',
@@ -41,7 +61,7 @@ export default {
          color: '#F69B52'
        },
        {
-          key: 'key2',
+          key: 'aircStatus',
          value: '开机',
          d: '',
          label: '空调',
@@ -50,7 +70,7 @@ export default {
          color: '#9BD801'
        },
        {
-          key: 'key3',
+          key: 'envTemp',
          value: 24,
          d: '℃',
          label: '环境温度',
@@ -59,7 +79,7 @@ export default {
          color: '#3DFEFA'
        },
        {
-          key: 'key4',
+          key: 'envhum',
          value: 26,
          d: '%',
          label: '环境湿度',
@@ -70,20 +90,27 @@ export default {
      ]
    }
  },
-  computed: {
-    leftList() {
-      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
-    },
-    rightList() {
-      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
-    }
-  },
+
  watch: {
    propsTotal: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.list.forEach((item) => {
-            item.value = this.propsTotal[item.key]
+            console.log(this.propsTotal,this.propsTotal[item.key],"this.propsTotal[item.key]")
+            if (item.key == 'coolingStatus') {
+              console.log(this.coolingList.find(
+                (e) => e.value == this.propsTotal[item.key]
+              ))
+              item.value = this.coolingList.find(
+                (e) => e.value == this.propsTotal[item.key]
+              ).label
+            } else if (item.key == 'aircStatus') {
+              item.value = this.aircList.map(
+                (e) => e.value == this.propsTotal[item.key]
+              ).label
+            } else {
+              item.value = this.propsTotal[item.key]
+            }
          })
        }
      }
--- a/web/src/components/Home/Modal/OperationalInfo.vue
+++ b/web/src/components/Home/Modal/OperationalInfo.vue
@@ -29,24 +29,24 @@ export default {
  data() {
    return {
      list: [
+        // {
+        //   key: 'tianshu',
+        //   value: 26,
+        //   d: '℃',
+        //   label: '舱内温度',
+        //   class: 'item-1',
+        //   iconPath: require('@/assets/home/wendu.png')
+        // },
+        // {
+        //   key: 'shouyi',
+        //   value: 25,
+        //   d: '%',
+        //   label: '舱内湿度',
+        //   class: 'item-2',
+        //   iconPath: require('@/assets/home/shidu.png')
+        // },
        {
-          key: 'tianshu',
-          value: 26,
-          d: '℃',
-          label: '舱内温度',
-          class: 'item-1',
-          iconPath: require('@/assets/home/wendu.png')
-        },
-        {
-          key: 'shouyi',
-          value: 25,
-          d: '%',
-          label: '舱内湿度',
-          class: 'item-2',
-          iconPath: require('@/assets/home/shidu.png')
-        },
-        {
-          key: 'shuliang',
+          key: 'voltage',
          value: 24,
          d: 'V',
          label: '电压',
@@ -54,7 +54,7 @@ export default {
          iconPath: require('@/assets/home/dianya.png')
        },
        {
-          key: 'shuliang',
+          key: 'current',
          value: 26,
          d: 'A',
          label: '电流',
@@ -62,7 +62,7 @@ export default {
          iconPath: require('@/assets/home/dianliu.png')
        },
        {
-          key: 'fadianliang',
+          key: 'power',
          value: 20,
          d: 'w',
          label: '功率',
@@ -70,7 +70,7 @@ export default {
          iconPath: require('@/assets/home/gonglv.png')
        },
        {
-          key: 'rongliang',
+          key: 'powerFactor',
          value: 100,
          d: '',
          label: '功率因数',
@@ -81,12 +81,7 @@ export default {
    }
  },
  computed: {
-    leftList() {
-      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
-    },
-    rightList() {
-      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
-    }
+  
  },
  watch: {
    propsTotal: {
--- a/web/src/components/TreeTable.vue
+++ b/web/src/components/TreeTable.vue
@@ -0,0 +1,528 @@
+<template>
+  <div class="treetable" ref="treetable">
+    <a-table
+      bordered
+      :loading="loading"
+      :scroll="tableOption.scroll"
+      :columns="columns"
+      :data-source="tableData"
+      :pagination="false"
+      :row-class-name="(record, index) => rowClassName(record, index)"
+      row-key="id"
+      size="middle"
+      :row-selection="rowSelection"
+      :indent-size="30"
+      :check-strictly="false"
+      @resizeColumn="handleResizeColumn"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.scopedSlots">
+          <slot
+            v-bind="record"
+            :name="column.scopedSlots ? column.scopedSlots.customRender : ''"
+          ></slot>
+        </template>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    columns: { type: Array },
+    tableData: { type: Array },
+    tableOption: {
+      type: Object,
+      default: () => {
+        return {
+          loading: false,
+          page: true,
+          align: 'center',
+          expand: true,
+          select: true
+          // scroll: { y: 600 },
+        }
+      }
+    },
+    paginationOption: {
+      type: Object,
+      default: () => {
+        return {
+          pageSizeOptions: ['10', '20', '30'],
+          current: 1,
+          pageSize: 10,
+          total: 1
+        }
+      }
+    },
+    selectField: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+
+    rowClick: {
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      newPaginationOption: {},
+      newColumns: [],
+      defPageOpt: {
+        showSizeChanger: true,
+        showQuickJumper: true,
+        current: 1,
+        pageSize: 10,
+        total: 1
+      },
+      newPageOptions: {},
+      selectedRowKeys: [],
+      realColumns: [],
+      realTableData: [],
+      selectedRows: {},
+      defaultTabOpt: {
+        page: true,
+        align: 'center',
+        expand: false,
+        select: true
+      },
+      newTableOpt: {},
+      pageSizeOptions: ['10', '20', '30'],
+      scroll: { y: 100 }
+    }
+  },
+  computed: {
+    rowSelection() {
+      const { selectedRowKeys } = this
+      return {
+        checkStrictly: this.tableOption.checkStrictly,
+        selectedRowKeys,
+        type: this.tableOption.type,
+        onChange: (selectedRowKeys, selectedRows) => {
+          this.onSelectChange(selectedRowKeys, selectedRows)
+        },
+        hideDefaultSelections: true,
+        onSelect: (record, selected) => {
+          this.onSelect(record, selected)
+        }
+      }
+    }
+  },
+  watch: {
+    selectField: {
+      handler(n, o) {
+        this.handlerTableData(n)
+      },
+      immediate: true
+    },
+    paginationOption: {
+      handler(n, o) {
+        this.defPageOpt = { ...this.defPageOpt, ...n }
+      },
+      immediate: true,
+      deep: true
+    },
+    tableOption: {
+      handler(n, o) {
+        this.newTableOpt = { ...this.defaultTabOpt, ...n }
+        if (n.selectTableData && n.selectTableData.length > 0) {
+          this.selectedRowKeys = n.selectTableData
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.scroll.y = this.$refs.treetable.offsetHeight - 70
+  },
+  methods: {
+    handleResizeColumn(w, col) {
+      col.width = w
+    },
+
+    onSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows[selectedRows.length - 1]
+      this.$emit('getSelectedIds', selectedRowKeys)
+    },
+    onSelect(record, selected) {
+      const selectrows = [record.id]
+      //  record.hasOwnProperty("children") &&
+      if (record.children && record.children.length) {
+        const generator = (record) => {
+          record.forEach((item) => {
+            selectrows.push(item.id)
+            if (item.children && item.children.length > 0) {
+              generator(item.children)
+            }
+          })
+        }
+        generator(record.children)
+      }
+      const newselect = this.selectedRowKeys.filter((item) => !selectrows.includes(item))
+
+      selected
+        ? (this.selectedRowKeys = Array.from(new Set([...this.selectedRowKeys, ...selectrows])))
+        : (this.selectedRowKeys = newselect)
+    },
+
+    handlerTableData(n) {
+      if (n.length == 0) {
+        this.newColumns = this.columns
+      } else {
+        this.newColumns = []
+        this.selectField.forEach((i) => {
+          this.columns.forEach((e) => {
+            if (i == e.dataIndex) {
+              this.newColumns.push(e)
+            }
+          })
+        })
+      }
+    },
+    rowClassName(record, index) {
+      return 'table-row'
+    },
+    // expandIcon(props) {
+    //   // if (props.record.descriptions) {
+    //   //   if (props.expanded) {
+    //   //     return (
+    //   //       <a
+    //   //         style="color: 'black',margin-right:0px"
+    //   //         onClick={(e) => {
+    //   //           props.onExpand(props.record, e)
+    //   //         }}
+    //   //       >
+    //   //          <DownOutlined />{' '}
+    //   //       </a>
+    //   //     )
+    //   //   } else {
+    //   //     return (
+    //   //       <span
+    //   //         style="color: 'black' ,margin-right:0px"
+    //   //         onClick={(e) => {
+    //   //           props.onExpand(props.record, e)
+    //   //         }}
+    //   //       >
+    //   //         <a-icon type="right" />
+    //   //       </span>
+    //   //     )
+    //   //   }
+    //   // } else {
+    //   //   return null
+    //   // }
+    // },
+    onSizeChange(current, pageSize) {
+      this.defPageOpt.pageSize = pageSize
+      this.defPageOpt.current = 1
+      this.$emit('handlePagesizeChange', this.defPageOpt)
+    },
+    onChange(pageNumber) {
+      this.defPageOpt.current = pageNumber
+      this.$emit('handlePagesizeChange', this.defPageOpt)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+:deep(.ant-table-body) {
+  .ant-table-cell {
+    background: var(--theme-bg) !important;
+  }
+  .ant-table-row-selected {
+    td {
+      background-color: var(--table-select) !important;
+    }
+  }
+  .ant-table-cell-fix-right.ant-table-cell-fix-right-first,
+  .ant-table-cell-fix-left {
+    box-shadow: none !important;
+    padding: 8px !important;
+    margin: 0 !important;
+  }
+  .ant-table-row-expand-icon.ant-table-row-expand-icon-collapsed,
+  .ant-table-row-expand-icon.ant-table-row-expand-icon-expanded {
+    background-color: var(--table-header-bg) !important;
+  }
+}
+.treetable {
+  background-color: var(--theme-bg-default);
+  border-radius: 8px;
+  font-size: 14px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+ 
+ .pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    // margin-bottom: 10px;
+    min-width: 420px;
+    height: 32px;
+  }
+
+  :deep(.ant-table) {
+    border-radius:20px 20px 0 0 !important;
+    overflow: hidden; /* 确保圆角生效 */
+  }
+  :deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container){
+    border-inline-start:none!important;
+  }
+  :deep(.ant-table-wrapper .ant-table-cell){
+    background:none!important;
+  }
+  :deep(.ant-table-thead ){
+    background: linear-gradient(0deg, rgba(61, 254, 250, 0.2), rgba(61, 254, 250, 0.2)),
+      linear-gradient(
+        90deg,
+        rgba(61, 254, 250, 0) 0%,
+        rgba(0, 255, 251, 0.15) 50.17%,
+        rgba(61, 254, 250, 0) 100%
+      )!important;
+  }
+  :deep(.ant-table-thead > tr > th) {
+    border-inline: 1px solid transparent !important;
+    background: transparent;
+    color: #fff !important;
+    border-bottom: none !important; /* 可选：去除底部边框 */
+  }
+
+:deep(.ant-pagination) {
+  .ant-pagination-item-link {
+    color: #fff !important;
+    height: 100% !important;
+    display: block !important;
+  }
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    background: transparent !important;
+    color: #fff !important;
+    border: 1px solid $page-border;
+    button {
+      box-sizing: border-box;
+    }
+  }
+  .ant-select-selector {
+    border: none !important;
+  }
+  .ant-select-arrow {
+    color: #fff !important;
+  }
+
+  span.ant-input-affix-wrapper,
+  .ant-select,
+  .ant-picker {
+    width: 110px !important;
+  }
+  .ant-select-selection-item {
+    color: #fff !important;
+    border: 1px solid $page-border;
+  }
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: transparent !important;
+  }
+  .ant-pagination-total-text,
+  .ant-pagination-options-quick-jumper {
+    color: #fff !important;
+    margin-inline-end: 9px !important;
+  }
+  .ant-pagination-options-quick-jumper input {
+    background-color: transparent !important;
+    // border: none !important;
+    color: #fff !important;
+  }
+  .ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
+    padding: 0px !important;
+    color: #fff !important;
+    background-color: transparent !important;
+
+    .ant-select-selection-item {
+      padding: 0 10px;
+    }
+  }
+  .ant-select-dropdown {
+    top: -210px !important;
+  }
+  .ant-pagination-item {
+    &:not(.ant-pagination-item-active):hover {
+      background: #1c797a !important;
+    }
+    a {
+      color: #fff;
+      border-radius: 2px;
+      background: #1c797a !important;
+    }
+  }
+
+  .ant-pagination-item-active {
+    border: 1px solid transparent;
+    color: #fff;
+    background: #1c797a !important;
+  }
+}
+:deep(
+    .ant-table-wrapper
+      .ant-table.ant-table-bordered
+      > .ant-table-container
+      > .ant-table-header
+      > table
+  ) {
+  border-top: none !important;
+  border-inline-start: none !important;
+}
+:deep(.ant-checkbox-checked .ant-checkbox-inner) {
+  background-color: var(--table-header-bg) !important;
+  border: none !important;
+}
+:deep(.ant-checkbox-indeterminate .ant-checkbox-inner:after) {
+  background-color: var(--table-header-bg) !important;
+}
+  :deep(
+      .ant-table.ant-table-bordered
+        > .ant-table-container
+        > .ant-table-header
+        > table
+        > thead
+        > tr
+        > th
+    ) {
+    &:nth-last-child(2) {
+      border-inline-end: 1px solid var(--table-header-bg) !important;
+      // left: 1px !important;
+    }
+  }
+
+  :deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
+    // tr>th:nth-last-child(){
+    border-inline-start: none !important;
+    // }
+  }
+  :deep(.ant-table-wrapper) {
+    .ant-table-cell-scrollbar,
+    .ant-table.ant-table-bordered > .ant-table-container {
+      box-shadow: none !important;
+    }
+
+    // .ant-table {
+    //   background-color: var(--theme-bg) !important;
+    // }
+  }
+
+  ::v-deep .ant-table-thead > tr > th {
+    border-inline-end: 1.5px solid var(--theme-bg) !important;
+    background: var(--table-header-bg);
+    color: var(--theme-text-default);
+    border-bottom: none;
+    &:last-child {
+      border-inline-end: 1.5px solid var(--table-header-bg) !important;
+    }
+    &:nth-last-child(2) {
+      border-inline-end: 1.5px solid var(--table-header-bg) !important;
+    }
+  }
+
+  :deep(.ant-table-container > .ant-table-content > table) {
+    border-inline-start: 1px solid var(--theme-bg) !important;
+  }
+  :deep(.ant-pagination-item-link) {
+    color: var(--theme-text-default) !important;
+
+    height: 100% !important;
+    display: block !important;
+    // border: none !important;
+  }
+  :deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-content >table){
+    border-top:none;
+  }
+  :deep(.ant-table-tbody) {
+    color: #fff!important;
+    > tr {
+      &:hover {
+        > td {
+          background-color: transparent !important;
+        }
+      }
+      td {
+        border: 1px solid transparent !important; /* 第一行单元格边框为红色 */
+      }
+    }
+    td.ant-table-cell.ant-table-cell-row-hover {
+      // background-color: var(--theme-bg) !important;
+    }
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+
+    min-width: 420px;
+    .total {
+      margin-right: 30px;
+    }
+  }
+}
+
+::v-deep .ant-table-thead > tr > th {
+  border-inline-end: 1px solid var(--theme-bg) !important;
+  background: var(--table-header-bg);
+  color: var(--theme-text-default);
+  border-bottom: none;
+  &:last-child {
+    border-inline-end: 1px solid var(--table-header-bg) !important;
+  }
+  &:nth-last-child(2) {
+    border-inline-end: 1px solid var(--table-header-bg) !important;
+  }
+}
+:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-body >table >tbody>tr>td){
+      border-inline-end: none!important;
+}
+:deep(.ant-table-thead) {
+  background: var(--table-header-bg);
+}
+
+:deep(.ant-table-tbody) {
+  > tr {
+    &:hover {
+      > .ant-table-cell {
+        
+        background-color: transparent !important;
+      }
+    }
+  
+  }
+}
+
+:deep(.ant-table-wrapper) {
+  .ant-table-cell-scrollbar,
+  .ant-table.ant-table-bordered > .ant-table-container {
+    box-shadow: none !important;
+
+&>.ant-table-body >table >tbody>tr>td{
+  border-bottom: none !important;
+}
+  }
+}
+
+:deep(.ant-table-wrapper .ant-table) {
+  background-color: transparent !important;
+}
+
+
+
+
+:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
+  background: var(--table-select) !important;
+}
+</style>
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -16,12 +16,14 @@ import VueTianditu from 'vue-tianditu'
 import SearchBox from '@/components/SearchBox.vue'
 import ComTable from '@/components/ComTable.vue'
 import OperateCom from '@/components/OperateCom'
+import TreeTable from '@/components/TreeTable.vue'

 const app = createApp(App)

 app.component('SearchBox', SearchBox)
 app.component('ComTable', ComTable)
 app.component('OperateCom', OperateCom)
+app.component('TreeTable', TreeTable)

 app.config.globalProperties.$echarts = echarts // 挂载到全局属性
 app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -60,7 +60,9 @@ export const routes = [
          {
            name: 'permission',
            path: 'permission',
-            title: '权限管理'
+            title: '权限管理',
+            component: () =>
+              import(/* webpackChunkName: "system" */ '@/views/system/permission.vue')
          },
          {
            name: 'station',
--- a/web/src/utils/column.js
+++ b/web/src/utils/column.js
@@ -6,7 +6,7 @@ const colWidth = [
  },
  {
    label: '名称',
-    width: 200,
+    width: 150,
    align: 'left',
    sorter: (a, b) => {
      return a.name.localeCompare(b.name)
@@ -70,7 +70,7 @@ const colWidth = [
    label: '操作',
    align: 'center',
    width: 200,
-    fixed: 'right',
+    // fixed: 'right',
    resizable: false
  }
 ]
--- a/web/src/utils/gcj02ToWgs84.js
+++ b/web/src/utils/gcj02ToWgs84.js
@@ -1,80 +1,80 @@
-// /**
-//  * 判断是否在中国境外
-//  */
-// function outOfChina(lng, lat) {
-//   return !(lng >= 72.004 && lng <= 137.8347 && lat >= 0.8293 && lat <= 55.8271)
-// }
+/**
+ * 判断是否在中国境外
+ */
+function outOfChina(lng, lat) {
+  return !(lng >= 72.004 && lng <= 137.8347 && lat >= 0.8293 && lat <= 55.8271)
+}

-// /**
-//  * 辅助函数：纬度转换
-//  */
-// function _transformLat(x, y) {
-//   let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
-//   ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
-//   ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0
-//   ret +=
-//     ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0
-//   return ret
-// }
+/**
+ * 辅助函数：纬度转换
+ */
+function _transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0
+  ret +=
+    ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0
+  return ret
+}

-// /**
-//  * 辅助函数：经度转换
-//  */
-// function _transformLng(x, y) {
-//   let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
-//   ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
-//   ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0
-//   ret +=
-//     ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0
-//   return ret
-// }
+/**
+ * 辅助函数：经度转换
+ */
+function _transformLng(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0
+  ret +=
+    ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0
+  return ret
+}

-// /**
-//  * GCJ-02 (高德/腾讯坐标系) 转 WGS-84 (GPS原始坐标系)
-//  * @param {number} lng GCJ-02经度
-//  * @param {number} lat GCJ-02纬度
-//  * @returns {number[]} [WGS-84经度, WGS-84纬度]
-//  */
-// export function gcj02ToWgs84(lng, lat) {
-//   // 判断是否在中国境内（简化版，实际需更完整判断）
-//   if (outOfChina(lng, lat)) {
-//     return [lng, lat] // 境外坐标不转换
-//   }
+/**
+ * GCJ-02 (高德/腾讯坐标系) 转 WGS-84 (GPS原始坐标系)
+ * @param {number} lng GCJ-02经度
+ * @param {number} lat GCJ-02纬度
+ * @returns {number[]} [WGS-84经度, WGS-84纬度]
+ */
+export function gcj02ToWgs84(lng, lat) {
+  // 判断是否在中国境内（简化版，实际需更完整判断）
+  if (outOfChina(lng, lat)) {
+    return [lng, lat] // 境外坐标不转换
+  }

-//   let dlat = _transformLat(lng - 105.0, lat - 35.0)
-//   let dlng = _transformLng(lng - 105.0, lat - 35.0)
+  let dlat = _transformLat(lng - 105.0, lat - 35.0)
+  let dlng = _transformLng(lng - 105.0, lat - 35.0)

-//   const radlat = (lat / 180.0) * Math.PI
-//   let magic = Math.sin(radlat)
-//   magic = 1 - 0.00669342162296594323 * magic * magic
-//   const sqrtmagic = Math.sqrt(magic)
+  const radlat = (lat / 180.0) * Math.PI
+  let magic = Math.sin(radlat)
+  magic = 1 - 0.00669342162296594323 * magic * magic
+  const sqrtmagic = Math.sqrt(magic)

-//   dlat =
-//     (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
-//   dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
+  dlat =
+    (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
+  dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)

-//   // 初始转换结果（粗略值）
-//   let wgsLat = lat - dlat
-//   let wgsLng = lng - dlng
+  // 初始转换结果（粗略值）
+  let wgsLat = lat - dlat
+  let wgsLng = lng - dlng

-//   return [wgsLng, wgsLat]
-// }
+  return [wgsLng, wgsLat]
+}

-// /**
-//  * WGS-84 转 GCJ-02（用于迭代优化）
-//  */
-// function wgs84ToGcj02(lng, lat) {
-//   if (outOfChina(lng, lat)) {
-//     return [lng, lat]
-//   }
-//   let dlat = _transformLat(lng - 105.0, lat - 35.0)
-//   let dlng = _transformLng(lng - 105.0, lat - 35.0)
-//   const radlat = (lat / 180.0) * Math.PI
-//   let magic = Math.sin(radlat)
-//   magic = 1 - 0.00669342162296594323 * magic * magic
-//   const sqrtmagic = Math.sqrt(magic)
-//   dlat =
-//     (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
-//   dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
-//   return [lng + dlng, lat + dlat]
-// }
+/**
+ * WGS-84 转 GCJ-02（用于迭代优化）
+ */
+function wgs84ToGcj02(lng, lat) {
+  if (outOfChina(lng, lat)) {
+    return [lng, lat]
+  }
+  let dlat = _transformLat(lng - 105.0, lat - 35.0)
+  let dlng = _transformLng(lng - 105.0, lat - 35.0)
+  const radlat = (lat / 180.0) * Math.PI
+  let magic = Math.sin(radlat)
+  magic = 1 - 0.00669342162296594323 * magic * magic
+  const sqrtmagic = Math.sqrt(magic)
+  dlat =
+    (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
+  dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
+  return [lng + dlng, lat + dlat]
+}
--- a/web/src/utils/loadTMap.js
+++ b/web/src/utils/loadTMap.js
@@ -0,0 +1,11 @@
+// utils/loadTMap.js
+export async function loadTMap(tk) {
+  if (window.T) return // 如果已加载，直接返回
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${tk}`
+    script.onload = () => resolve(window.T)
+    script.onerror = (err) => reject(err)
+    document.head.appendChild(script)
+  })
+}
--- a/web/src/views/LoginView.vue
+++ b/web/src/views/LoginView.vue
@@ -75,13 +75,17 @@ export default {
        const values = await this.$refs.ruleForm.validateFields()
        const res = await getReq('/login',this.form )
        this.loading = false
+
        console.log(res);
        
-        // if (res.code === 200) {
-        this.$message.success('登录成功')
-        localStorage.setItem('token', res.token)
-        this.$router.push('/')
-        // } else {
+        if (res.errcode === 0) {
+          this.$message.success('登录成功')
+          localStorage.setItem('token', res.token)
+          localStorage.setItem('user',JSON.stringify( res.permission) )
+          this.$router.push('/')
+
+        } 
+        // else {
        //   this.$message.error(res.message || '登录失败')
        // }
      } catch (error) {
--- a/web/src/views/MainView.vue
+++ b/web/src/views/MainView.vue
@@ -15,9 +15,8 @@
        </div>
      </div>
      <div :class="[subMenu.length > 0 ? 'subcontent' : 'content']">
-         <router-view />
+        <router-view />
      </div>
-     
    </div>
    <div class="menu">
      <div
@@ -47,14 +46,13 @@ export default {
      menuList: [
        {
          name: '系统总览',
-          path:'/home'
+          path: '/home'
        },
        {
          name: '运行监控',
          path: '/monitor'
        },
        {
-          
          name: '预测管理',
          path: '/predict'
        },
@@ -109,13 +107,58 @@ export default {
      subMenu: []
    }
  },
+  watch: {
+    $route: {
+      handler(n) {
+        console.log(n,"nnnnnnnnnnnnnn")
+        this.subMenu =n.matched[1].children || []
+      },
+      immediate: true
+    }
+  },
+
  mounted() {
    this.initRoute()
  },
  methods: {
+    // 过滤函数：根据权限数据过滤路由并附加权限信息
+    filterRoutes(routes, permissions) {
+      return routes.filter((route) => {
+        let hasViewPermission = false
+        // 查找当前路由对应的权限项
+        const routePermissions = permissions.filter((perm) => perm.route === route.path)
+
+        // 如果有权限项，附加到路由对象
+        if (routePermissions.length > 0) {
+          route.permissions = routePermissions;
+          hasViewPermission = true
+        }
+
+        // 检查是否有查看权限
+        // const hasViewPermission = routePermissions.some((perm) =>
+        //   perm.is_view === '1'
+        // );
+
+        // 递归处理子路由
+        if (route.children && route.children.length) {
+          route.children = this.filterRoutes(route.children, permissions)
+        }
+
+        // 保留有权限的路由或包含有效子路由的父路由
+        return hasViewPermission || (route.children && route.children.length)
+      })
+    },
    initRoute() {
-      console.log(this.$route,this.$router)
+      console.log(localStorage.getItem('user'), "localStorage.getItem('user')")
+      // 执行过滤
+      // const filteredRoutes = this.filterRoutes(
+      //   this.menuList,
+      //   JSON.parse(localStorage.getItem('user'))
+      // )
+      console.log( this.$route.matched, 'filteredRoutes')
      this.subMenu = this.$route.matched[1].children || []
+      // this.menuList= JSON.parse(localStorage.getItem('user'))
+      // this.subMenu =filteredRoutes[0].children||[]

      this.currentKey = '/' + this.$route.fullPath.split('/')[1]
      this.subCurrentKey = this.$route.fullPath.split('/')[2]
@@ -127,7 +170,7 @@ export default {
      this.$router.push(menu.path)
    },
    subMenuClick(subMenu) {
-      debugger
+      console.log(subMenu, subMenu.path)
      this.subCurrentKey = subMenu.path
      this.$router.push('/system'+subMenu.path)
    }
@@ -175,10 +218,10 @@ export default {
  margin: 20px 10px;
  border-radius: 20px;
 }
-.content{
+.content {
  height: 100%;
 }
-.subcontent{
+.subcontent {
  height: calc(100% - 46px);
 }
 .menu {
@@ -199,7 +242,7 @@ export default {
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
-    margin: 0 20px;
+    margin: 0 35px;
  }
  .active {
    border: 1px solid $border-color;
--- a/web/src/views/system/permission.vue
+++ b/web/src/views/system/permission.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="permission">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @onSearch="onSearch"
+      :search-options="searchOptions"
+      @operateForm="operateForm"
+    ></searchBox>
+
+    <div class="content-table">
+      <TreeTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+        <template #is_open="record">
+          <!-- 0:禁用; 1:启用 -->
+          <span>{{ ['禁用', '启用'][record.is_open] }}</span>
+        </template>
+        <template #permission="record">
+          <!-- 0:禁用; 1:启用 -->
+          <span>{{record.permission.map(item=>item.name).toString() }}</span>
+        </template>
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </TreeTable>
+    </div>
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="record"
+        @operateForm="operateForm"
+        type="permission"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { columnList, permissionOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+export default {
+  name: '',
+  components: {
+  
+  },
+  props: {},
+  data() {
+    return {
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {}
+    }
+  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'permission').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
+  mounted() {
+    this.operateList = this.$getBtns(['查看'])
+    // this.btnOptionList = this.$getBtns()
+    this.getList()
+  },
+
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/queryPermissionList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    operateForm(type, record = {}) {
+      console.log(record,record.id,'rrrrrrrrrr')
+      this.formStatus = type
+      switch (type) {
+      // case 'add':
+      //   this.formModal = true
+      //   this.formState = {}
+      //   this.getRuleFormInfo()
+
+      //   break
+      // case 'edit':
+      // case 'read':
+      //   this.formModal = true
+      //   this.formState = record
+      //   this.getRuleFormInfo(record)
+      //   break
+    
+      case 'del':
+        // this.handleDelete([record.permission_id],this.getList)
+
+        break
+
+      case 'back':
+        this.formModal = false
+        this.getList()
+        break
+
+      default:
+        break
+      }
+    },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deletepermission',{permission_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      function getInfo(data, url) {
+        return new Promise((reslove, reject) => {
+          getReq(data, url).then((res) => {
+            reslove(res.data)
+          })
+        })
+      }
+
+      let row = {}
+      if (record && record.permission_id) {
+        // row = await getInfo({ id: record.id },'/querypermissionList')
+        this.record = record
+        row = record
+        // this.type='edit'
+      }
+      permissionOptions.forEach((e, index) => {
+        e.list.forEach((i) => {
+          
+          e.ruleForm[i.key] = row ? row[i.key] : ''
+          e.ruleForm.id = row.id
+        })
+      })
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.permission {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>
--- a/web/src/views/system/role.vue
+++ b/web/src/views/system/role.vue
@@ -23,7 +23,7 @@
        </template>
        <template #permission="record">
          <!-- 0:禁用; 1:启用 -->
-          <span>{{record.permission.map(item=>item.name).toString() }}</span>
+          <span>{{ record.permission.map((item) => item.name).toString() }}</span>
        </template>

        <template #action="record">
@@ -34,6 +34,7 @@
    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
      <!-- action:edit add -->
      <EditCom
+      :show-flag="formModal"
        :record="record"
        @operateForm="operateForm"
        type="role"
@@ -125,25 +126,39 @@ export default {
        //统一处理报错提示
      }
    },
+    async getPermissionList() {
+      let arr = []
+
+      const params = {
+        page_size: 1000,
+        page: 1
+      }
+
+      const res = await getReq('/queryPermissionList', params)
+      if (res.errcode === 0) {
+        arr = res.data
+      } else {
+        arr = []
+      }
+      return arr
+    },
    operateForm(type, record = {}) {
-      console.log(record,record.id,'rrrrrrrrrr')
+      console.log(record, record.id, 'rrrrrrrrrr')
      this.formStatus = type
      switch (type) {
      case 'add':
-        this.formModal = true
        this.formState = {}
        this.getRuleFormInfo()

        break
      case 'edit':
      case 'read':
-        this.formModal = true
        this.formState = record
        this.getRuleFormInfo(record)
        break
-    
+
      case 'del':
-        this.handleDelete([record.role_id],this.getList)
+        this.handleDelete([record.role_id], this.getList)

        break

@@ -157,7 +172,7 @@ export default {
      }
    },
    //  删除操作
-    async handleDelete(id,callback) {
+    async handleDelete(id, callback) {
      const that = this
      Modal.confirm({
        title: '你确认删除数据吗?',
@@ -165,10 +180,10 @@ export default {

        async onOk() {
          try {
-            const res = await getReq('/deleteRole',{role_id:id})
+            const res = await getReq('/deleteRole', { role_id: id })
            if (res.errcode === 0) {
              this.$message.success(res.errmsg)
-              this.pageOption.page=1
+              this.pageOption.page = 1
              callback()
            } else {
              throw res
@@ -199,13 +214,37 @@ export default {
        row = record
        // this.type='edit'
      }
+      const perList = await this.getPermissionList()
+      const permissionList=perList.map((item)=>{
+        return{
+          key:+item.permission_id,
+          ...item
+        }
+      })
+      console.log(permissionList, 'permissionList')
+
      roleOptions.forEach((e, index) => {
        e.list.forEach((i) => {
-          
-          e.ruleForm[i.key] = row ? row[i.key] : ''
-          e.ruleForm.id = row.id
+          if (i.key == 'permission') {
+            i.tableData=permissionList
+            //  .forEach((item)=>{
+            //  .push({...item,key:item.permission_id})
+            // })
+            if (record && record.role_id) {
+              i.selectTableData = row.permission
+                ? row.permissionList.map((item) => item.permission_id)
+                : []
+            } else {
+              i.selectTableData = []
+            }
+          } else {
+            e.ruleForm[i.key] = row ? row[i.key] : ''
+          }
        })
      })
+      console.log(permissionList,"permissionList")
+      this.formModal = true
+
    },
    handlePagesizeChange(pageOption) {
      this.pageOption.pageSize = pageOption.pageSize
--- a/web/src/views/system/service.vue
+++ b/web/src/views/system/service.vue
@@ -1,30 +1,248 @@
 <template>
-  <div >
+  <div class="service">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @onSearch="onSearch"
+      :search-options="searchOptions"
+      @operateForm="operateForm"
+    ></searchBox>

+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+        <template #is_open="record">
+          <span>{{ ['禁用', '启用'][record.is_open] }}</span>
+        </template>
+       
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+    </div>
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="record"
+        @operateForm="operateForm"
+        type="serviceApi"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
  </div>
 </template>

 <script>
+import { columnList, serviceApiOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+import searchBox from '@/components/SearchBox.vue'
 export default {
  name: '',
-  components:{
+  components: {
+    searchBox,
+    EditCom,
  },
-  props: {
-
-  },
-  data() { 
+  props: {},
+  data() {
    return {
-
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {},
+      workModeList:[
+        {
+          label:'最优经济化',
+          value:1
+        },
+        {
+          label:'支撑电网稳定',
+          value:2
+        },
+        {
+          label:'自定义',
+          value:3
+        },
+      ],
+      policyList:[
+        {
+          label:'削峰套利',
+          value:1
+        },
+        {
+          label:'需求响应',
+          value:2
+        },
+        {
+          label:'自发自用',
+          value:3
+        },
+      ]
    }
  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'serviceApi').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
  mounted() {
-
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
+    this.getList()
  },
-  methods:{

-  },
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/queryServiceApiList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    operateForm(type, record = {}) {
+      console.log(record,record.id,'rrrrrrrrrr')
+      this.formStatus = type
+      switch (type) {
+      case 'add':
+        this.formModal = true
+        this.formState = {}
+        this.getRuleFormInfo()
+
+        break
+      case 'edit':
+      case 'read':
+        this.formModal = true
+        this.formState = record
+        this.getRuleFormInfo(record)
+        break
+    
+      case 'del':
+        this.handleDelete([record.api_id],this.getList)
+
+        break
+
+      case 'back':
+        this.formModal = false
+        this.getList()
+        break
+
+      default:
+        break
+      }
+    },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteServiceApi',{api_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      function getInfo(data, url) {
+        return new Promise((reslove, reject) => {
+          getReq(data, url).then((res) => {
+            reslove(res.data)
+          })
+        })
+      }
+
+      let row = {}
+      if (record && record.api_id) {
+        // row = await getInfo({ api_id: record.api_id},'/queryserviceInfo')
+        this.record = record
+        row = record
+        // this.type='edit'
+      }
+      serviceApiOptions.forEach((e, index) => {
+        e.list.forEach((i) => {
+          
+          e.ruleForm[i.key] = row ? row[i.key] : ''
+          e.ruleForm.id = row.id
+        })
+      })
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
 }
 </script>

 <style lang="scss" scoped>
-</style>
+.service {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>
--- a/web/src/views/system/station.vue
+++ b/web/src/views/system/station.vue
@@ -17,13 +17,14 @@
        :page-option="pageOption"
        :table-h="tableH"
      >
-        <template #is_open="record">
-          <!-- 0:禁用; 1:启用 -->
-          <span>{{ ['禁用', '启用'][record.is_open] }}</span>
+        <template #status="record">
+          <span>{{ ['未启用', '启用'][record.status] }}</span>
        </template>
-        <template #permission="record">
-          <!-- 0:禁用; 1:启用 -->
-          <span>{{record.permission.map(item=>item.name).toString() }}</span>
+        <template #work_mode_id="record">
+          <span>{{workModeList.find(item=>record.value==item.value)?.label|| '' }}</span>
+        </template>
+        <template #policy_id="record">
+          <span>{{policyList.find(item=>record.value==item.value)?.label|| ''}}</span>
        </template>

        <template #action="record">
@@ -72,7 +73,35 @@ export default {
        page: 1
      },
      btnOptionList: [],
-      paramsDate: {}
+      paramsDate: {},
+      workModeList:[
+        {
+          label:'最优经济化',
+          value:1
+        },
+        {
+          label:'支撑电网稳定',
+          value:2
+        },
+        {
+          label:'自定义',
+          value:3
+        },
+      ],
+      policyList:[
+        {
+          label:'削峰套利',
+          value:1
+        },
+        {
+          label:'需求响应',
+          value:2
+        },
+        {
+          label:'自发自用',
+          value:3
+        },
+      ]
    }
  },
  computed: {},
@@ -194,7 +223,7 @@ export default {

      let row = {}
      if (record && record.station_id) {
-        row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
+        // row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
        this.record = record
        row = record
        // this.type='edit'