数据管理功能优化/设备管理功能优化/站点管理功能优化

src/assets/css/index.scss

@@ -84,67 +84,97 @@ div:focus {
     text-overflow: ellipsis;
 }
 
-// main-container global css
-.mb-5 {
-    margin-bottom: 5px
+.text-center {
+    text-align: center
 }
 
-.mb-10 {
-    margin-bottom: 10px
+.delete-text {
+    color: #F80000 !important
 }
 
-.mb-20 {
-    margin-bottom: 20px
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
 }
 
-.mr-30 {
-    margin-right: 30px
-}
+@for $i from 0 through 100 {
 
-.ml-30 {
-    margin-left: 30px
-}
+    // margin
+    .m-#{$i} {
+        margin: #{$i}px !important;
+    }
 
-.mt-20 {
-    margin-top: 20px
-}
+    .mt-#{$i} {
+        margin-top: #{$i}px !important;
+    }
 
-.mt-40 {
-    margin-top: 40px
-}
+    .mr-#{$i} {
+        margin-right: #{$i}px !important;
+    }
 
-.mt-60 {
-    margin-top: 60px
-}
+    .mb-#{$i} {
+        margin-bottom: #{$i}px !important;
+    }
 
-.font-16 {
-    font-size: 16px
-}
+    .ml-#{$i} {
+        margin-left: #{$i}px !important;
+    }
 
-.padding-20 {
-    padding: 20px
-}
+    .mlr-#{$i} {
+        margin-left: #{$i}px !important;
+        margin-right: #{$i}px !important;
+    }
 
-.text-center {
-    text-align: center
-}
+    .mtb-#{$i} {
+        margin-top: #{$i}px !important;
+        margin-bottom: #{$i}px !important;
+    }
 
-.delete-text {
-    color: #F80000 !important
+    // padding
+    .p#{$i} {
+        padding: #{$i}px !important;
+    }
+
+    .pt#{$i} {
+        padding-top: #{$i}px !important;
+    }
+
+    .pr#{$i} {
+        padding-right: #{$i}px !important;
+    }
+
+    .pb#{$i} {
+        padding-bottom: #{$i}px !important;
+    }
+
+    .pl#{$i} {
+        padding-left: #{$i}px !important;
+    }
+
+    .plr#{$i} {
+        padding-left: #{$i}px !important;
+        padding-right: #{$i}px !important;
+    }
+
+    .ptb#{$i} {
+        padding-top: #{$i}px !important;
+        padding-bottom: #{$i}px !important;
+    }
 }
 
-.remarksTxt {
-    opacity: .45;
-    line-height: 1.5;
+/* 文本
+------------------------------- */
+@for $i from 10 through 500 {
+    .font-#{$i} {
+        font-size: #{$i}px !important;
+    }
 }
 
+
 .app-container {
-    padding: 20px;
-    // width: 100%;
+    padding: $vab-padding;
     width: calc(100%);
     height: 100%;
-    // margin: 20px;
-    // margin-top: 70px;
     background: #fff;
     min-height: calc(100vh - 130px);
 

src/layout/vab-content/index.vue

@@ -52,8 +52,6 @@ export default {
   // ) !important;
   padding: $vab-padding;
 
-  // margin: $vab-margin;
-  // background: #fff;
   .error-container {
     height: calc(100vh - $vab-header-height - $vab-padding - $vab-padding - $vab-padding - $vab-padding - $vab-padding - $vab-margin ) !important;
   }

src/views/alarmManage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container alarmingManage" v-if="pageShow">
     <!-- 筛选start -->
-    <div class="filter-container mb-10" style="justify-content: left">
+    <div class="filter-container mb-10" style="justify-content: left; white-space: nowrap;">
       <div class="filter-item">
         <span class="title">站点：</span>
         <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px" clearable filterable

src/views/dataManage/chainAnalysis/index.vue

@@ -2,41 +2,16 @@
   <div class="chainAnalysis">
     <div class="chainContent1">
       <div style="display: flex">
-        <el-select
-          v-model="store.state.siteId"
-          placeholder="选择站点"
-          @change="siteChange"
-          filterable
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-option
-            v-for="item in store.state.siteList"
-            :key="item.id"
-            :label="item.siteName"
-            :value="item.id"
-          ></el-option>
+        <el-select v-model="store.state.siteId" placeholder="选择站点" @change="handleSiteChange" filterable
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
+            :value="item.id"></el-option>
         </el-select>
       </div>
 
       <div class="chainSwitch">
-        <!-- <el-tree
-          :data="data"
-          show-checkbox
-          node-key="id"
-          :default-expanded-keys="[2, 3]"
-          :props="defaultProps"
-        /> -->
-
-        <el-tree
-          ref="tree"
-          :data="store.state.deviceList"
-          show-checkbox
-          node-key="id"
-          accordion
-          :check-strictly="true"
-          :props="defaultProps"
-          @check="currentChecked"
-        />
+        <el-tree ref="tree" :data="store.state.deviceList" show-checkbox node-key="id" accordion :check-strictly="true"
+          :props="config.defaultProps" @check="handleDeviceCheck" />
       </div>
     </div>
     <div class="chainContent2">
@@ -44,315 +19,189 @@
         <div class="chainDivTwo">
           <div class="block">
             <span class="demonstration">选择时间范围：</span>
-            <el-date-picker
-              v-model="dateTime"
-              type="datetimerange"
-              range-separator="➥"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
+            <el-date-picker v-model="dateRange" type="datetimerange" range-separator="➥" start-placeholder="开始时间"
+              end-placeholder="结束时间" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
           </div>
         </div>
-        <el-radio-group
-          v-model="listTabPosition"
-          @change="listTabsChange(listTabPosition)"
-          style="display: flex"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-radio-button label="allValue">所有值</el-radio-button>
-          <el-radio-button label="dailyValue">每日值</el-radio-button>
-          <el-radio-button label="monthValue">每月值</el-radio-button>
-          <el-select
-            v-model="valueCalculation"
-            placeholder="Select"
-            style="width: 100px; margin-left: 10px"
-            v-if="typeSrarch"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
+        <el-radio-group v-model="listTabPosition" @change="handleTabChange(listTabPosition)" style="display: flex"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-radio-button value="allValue">所有值</el-radio-button>
+          <el-radio-button value="dailyValue">每日值</el-radio-button>
+          <el-radio-button value="monthValue">每月值</el-radio-button>
+
+          <el-select v-model="valueCalculation" placeholder="Select" style="width: 100px;margin-left: 20px;"
+            v-if="typeSrarch">
+            <el-option v-for="item in config.options" :key="item.value" :label="item.label"
+              :value="item.value"></el-option>
           </el-select>
 
-          <div style="margin-left: 10px">
-            <el-button
-              icon="el-icon-search"
-              type="primary"
-              style="padding: 7px 12px"
-              @click="searchData()"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              查询
-            </el-button>
-          </div>
+          <el-button icon="Search" type="primary" style="margin-left: 20px;" @click="handleSearch()"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
+            查询
+          </el-button>
         </el-radio-group>
       </div>
-      <div class="chainEcharts"  v-loading="loading">
-        <echarts
-          v-for="(item, index) in echartsDataObj"
-          :key="index"
-          :echartsDataOne="item"
-          
-        ></echarts>
+      <div class="chainEcharts" v-loading="loading">
+        <echarts v-for="(item, index) in echartsDataObj" :key="index" :echartsDataOne="item"></echarts>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import config from '../index.js';
+import { parseTime } from '@/utils'
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, toRefs } from 'vue'
-import echarts from './ehcarts/index.vue'
-
-import { ElNotification } from 'element-plus'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/dataManage/chainAnalysis.js'
-import { ElMessage } from 'element-plus'
-import { parseTime } from '@/utils'
-
-export default defineComponent({
-  name: 'chainAnalysis',
-  components: { echarts },
-  props: {},
-  setup() {
-    const store = useStore()
-    const listTabsChange = (value) => {
-      if (value == 'allValue') {
-        typeSrarch.value = 0
-      } else if (value == 'dailyValue') {
-        typeSrarch.value = 1
-        valueCalculation.value = 1
-      } else {
-        typeSrarch.value = 2
-        valueCalculation.value = 1
-      }
-    }
-    const flag = ref(false)
-    const flag2 = ref(false)
-    const typeSrarch = ref(0)
-    const treeCheckedList = ref([])
-    const valueCalculation = ref()
-     const loading=ref(false)
-    // const dateTime = ref([
-    //   new Date(2021, 9, 1, 10, 10),
-    //   new Date(2021, 9, 30, 10, 10),
-    // ])
-    const dateTime = ref('')
-    const ecahrtsData = ref({})
-    const echartsDataCurrent = ref([])
-    const echartsDataBefore = ref([])
-    const echartsDataObj = ref([])
-    const state = reactive({
-      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-    })
-
-    //通过站点切换下拉框 change事件改变 tree树中的数据
-    const siteChange = () => {
-      store.commit('publicDeviceList')
-       treeCheckedList.value=[]
-    }
-    const currentChecked = (nodeObj, SelectedObj) => {
-      nodeObj, SelectedObj
-      treeCheckedList.value = SelectedObj.checkedNodes
-      treeCheckedList.value = []
-      SelectedObj.checkedNodes.forEach((item) => {
-        treeCheckedList.value.push(item.deviceCode)
-        remove(treeCheckedList.value, item.deviceCode)
-      })
-    }
+/*----------------------------------组件引入-----------------------------------*/
+import echarts from './ehcarts/index.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  listTabPosition: 'allValue',
+})
+const { listTabPosition } = toRefs(state)
 
-    function remove(arr, item) {
-      let newArr = arr.filter((ele) => {
-        return ele !== item
-      })
-      return newArr
-    }
+const typeSrarch = ref(0)
+const treeCheckedList = ref([])
+const valueCalculation = ref()
+const loading = ref(false)
+const dateRange = ref('')
+const echartsDataCurrent = ref([])
+const echartsDataBefore = ref([])
+const echartsDataObj = ref([])
 
-    async function searchData() {
-      if (!dateTime.value) {
-         loading.value=false
-        ElNotification({
-          title: '提示',
-          message: '请选择开始和结束时间',
-          type: 'warning',
-        })
-        return
-      }
-      loading.value=true;
 
-      if (treeCheckedList.value.length > 0) {
-        store.commit('TimeAll_function', dateTime.value)
-        const time = store.state.Time_Data
-
-        // 时间处理start
+/**
+ * 选项卡切换处理
+ * @param {string} value - 选项卡值
+ */
+const handleTabChange = (value) => {
+  switch (value) {
+    case 'allValue':
+      typeSrarch.value = 0
+      break
+    case 'dailyValue':
+      typeSrarch.value = 1
+      valueCalculation.value = 1
+      break
+    default:
+      typeSrarch.value = 2
+      valueCalculation.value = 1
+  }
+}
 
+/**
+ * 站点切换处理（清空选中设备，避免数据残留）
+ */
+const handleSiteChange = () => {
+  store.commit('publicDeviceList') // 刷新设备列表
+  treeCheckedList.value = [] // 清空选中状态
+}
 
-        var startA = new Date(time[0]) //开始
-        startA = startA.getTime()
+/**
+ * 树形组件选中处理（提取设备编码，去重）
+ * @param {Object} node - 节点对象
+ * @param {Object} selectInfo - 选择信息（包含checkedNodes）
+ */
+const handleDeviceCheck = (node, selectInfo) => {
+  // 从选中节点中提取deviceCode，并用Set去重
+  treeCheckedList.value = [...new Set(
+    selectInfo.checkedNodes.map(item => item.deviceCode).filter(Boolean)
+  )]
+}
 
-        var endA = new Date(time[1])
-        endA = endA.getTime() //结束
+async function handleSearch() {
+  // 前置校验（提前return，减少嵌套）
+  if (!dateRange.value) {
+    ElNotification.warning('请选择开始和结束时间')
+    return
+  }
 
-        var distance = endA - startA //时间差值
+  if (treeCheckedList.value.length === 0) {
+    ElNotification.warning('请选择测点设备')
+    return
+  }
 
-        var endB = startA - 60 * 1000 //前一个结束时间
-        var startB = endB - distance //前一个开始时间
-       
+  loading.value = true;
 
-        // 时间处理end
+  store.commit('TimeAll_function', dateRange.value)
+  const currentTime = store.state.Time_Data
 
-        await api
-          .ringRatioList({
-            startTime: time[0],
-            endTime: time[1],
-            type: typeSrarch.value,
-            valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
-            displayField: treeCheckedList.value,
-          })
-          .then((requset) => {
-          
-            if (requset.status === 'SUCCESS') {
-              flag.value = true
-              echartsDataCurrent.value = requset.data
-            } else {
-              ElMessage.error(requset.msg)
-            }
-          })
+  // 时间处理start
+  var startA = new Date(currentTime[0]).getTime() //开始
+  var endA = new Date(currentTime[1]).getTime()
 
-        await api
-          .ringRatioList({
-            startTime: parseTime(startB),
-            endTime: parseTime(endB),
-            type: typeSrarch.value,
-            valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
-            displayField: treeCheckedList.value,
-          })
-          .then((requset) => {
-            if (requset.status === 'SUCCESS') {
-              
-              flag2.value = true
-              echartsDataBefore.value = requset.data
-            } else {
-              ElMessage.error(requset.msg)
-            }
-          })
-        if(echartsDataBefore.value&& echartsDataCurrent.value){
-           loading.value=false
+  var distance = endA - startA //时间差值
+  var endB = startA - 60 * 1000 //前一个结束时间
+  var startB = endB - distance //前一个开始时间
+  // 时间处理end
 
-        }
-        var jsona = JSON.stringify(echartsDataCurrent.value)
-        var jsonb = jsona.replace(/"list"/g, '"list2"')
-        jsonb = jsonb.replace(/"listDate"/g, '"listDate2"')
-        var obj1 = JSON.parse(jsonb)
+  await api
+    .ringRatioList({
+      startTime: currentTime[0],
+      endTime: currentTime[1],
+      type: typeSrarch.value,
+      valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
+      displayField: treeCheckedList.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        echartsDataCurrent.value = requset.data
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
 
-        var obj2 = echartsDataBefore.value
-        echartsDataObj.value = obj1.map((item, index) => {
-          return { ...item, ...obj2[index] }
-        })
-       
-        if (echartsDataObj.value.length == []) {
-          ElMessage.warning('暂无结果')
-        }
+  await api
+    .ringRatioList({
+      startTime: parseTime(startB),
+      endTime: parseTime(endB),
+      type: typeSrarch.value,
+      valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
+      displayField: treeCheckedList.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        echartsDataBefore.value = requset.data
       } else {
-         loading.value=false
-        console.log('', 1)
-        ElNotification({
-          title: '提示',
-          message: '请选择测点',
-          type: 'warning',
-        })
+        ElMessage.error(requset.msg)
       }
-    }
+    })
+  if (echartsDataBefore.value && echartsDataCurrent.value) {
+    loading.value = false
+  }
 
-    return {
-      store,
-      ...toRefs(state),
-      loading,
-      listTabPosition: ref('allValue'),
-      data: [
-        {
-          id: 1,
-          label: '设备1',
-          children: [
-            {
-              id: 4,
-              label: '母线停电次数',
-            },
-            {
-              id: 4,
-              label: '功率因数',
-            },
-            {
-              id: 4,
-              label: 'A相功率因数',
-            },
-          ],
-        },
-      ],
-      value: ref(''),
-      options: ref([
-        {
-          value: 1,
-          label: '平均值',
-        },
-        {
-          value: 2,
-          label: '最大值',
-        },
-        {
-          value: 3,
-          label: '最小值',
-        },
-        {
-          value: 4,
-          label: '累计值',
-        },
-      ]),
-      defaultProps: {
-        children: 'children',
-        label: 'deviceName',
-        deviceCode: 'deviceCode',
-        id: 'id',
-      },
-      dateTime,
-      ecahrtsData,
-      echartsDataCurrent,
-      echartsDataBefore,
-      echartsDataObj,
+  var jsona = JSON.stringify(echartsDataCurrent.value)
+  var jsonb = jsona.replace(/"list"/g, '"list2"')
+  jsonb = jsonb.replace(/"listDate"/g, '"listDate2"')
+  var obj1 = JSON.parse(jsonb)
 
-      valueCalculation,
-      typeSrarch,
-      flag,
-      flag2,
-      listTabsChange,
-      siteChange,
-      currentChecked,
-      searchData,
-    }
-  },
-})
-</script>
+  var obj2 = echartsDataBefore.value
+  echartsDataObj.value = obj1.map((item, index) => {
+    return { ...item, ...obj2[index] }
+  })
 
-<style lang="scss" scoped>
-.chainSwitch::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
-}
-.chainSwitch::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  background: rgb(226, 224, 224);
-}
-.chainSwitch::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  border-radius: 10px;
-  background: rgb(245, 245, 265);
+  if (echartsDataObj.value.length === 0) {
+    ElMessage.warning('暂无结果');
+  }
 }
+</script>
 
+<style lang="scss" scoped>
 .chainAnalysis {
   display: flex;
   height: calc(100vh - 130px);
+
   // padding: 30px;
   // margin-top: 50px;
   .chainContent1 {
@@ -362,6 +211,7 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
+
     // overflow-y: auto;
     .chainSwitch {
       margin-top: 20px;
@@ -370,35 +220,43 @@ export default defineComponent({
       cursor: pointer;
       height: calc(100% - 50px);
       overflow-y: auto;
+
       .chainSwitchOne {
         display: flex;
         border: 0.5px solid silver;
         padding: 8px;
         font-size: 13px;
+
         div:nth-child(1) {
           width: 100%;
         }
       }
+
       .chainSwitchOne:hover {
         background-color: #409eff;
       }
+
       .chainSwitchOne:focus {
         background-color: #409eff;
       }
     }
   }
+
   .chainContent2 {
     background-color: #fff;
     width: 85%;
     min-width: 845px;
     height: 100%;
+
     .chainEcharts {
       height: calc(100vh - 192px);
       overflow-y: auto;
     }
+
     .chainDivOne {
       display: flex;
       margin: 15px 0px 15px 15px;
+
       .chainDivTwo {
         font-weight: 600;
         color: #9d9d9d;
@@ -407,19 +265,14 @@ export default defineComponent({
     }
   }
 }
-.chainEcharts::-webkit-scrollbar {
-  display: none;
-}
 </style>
 <style lang="less">
 .chainSwitch {
   .el-tree-node__content .el-checkbox__input {
     display: none;
   }
-  .el-tree-node
-    .el-tree-node__children
-    .el-tree-node__content
-    .el-checkbox__input {
+
+  .el-tree-node .el-tree-node__children .el-tree-node__content .el-checkbox__input {
     display: block;
   }
 }

src/views/dataManage/demandAnalysis/index.vue

@@ -1,371 +1,257 @@
 <template>
   <div class="demandAnalysis">
-    <div class="demContent1">
-      <div style="display: flex">
-        <el-select
-          v-model="store.state.siteId"
-          @change="siteChange"
-          placeholder="选择站点"
-          filterable
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-option
-            v-for="item in store.state.siteList"
-            :key="item.id"
-            :label="item.siteName"
-            :value="item.id"
-          ></el-option>
-        </el-select>
-      </div>
+    <div class="left-area">
+      <el-select v-model="store.state.siteId" @change="siteChange" placeholder="选择站点" filterable
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
+          :value="item.id"></el-option>
+      </el-select>
 
-      <div class="demSwitch">
-        <el-tree
-          ref="tree"
-          :data="deviceBoxData"
-          show-checkbox
-          node-key="id"
-          @node-click="handleNodeClick"
-          accordion
-          :check-strictly="true"
-          :props="defaultProps"
-          highlight-current
-        />
-      </div>
+      <el-tree ref="tree" class="treeDom" :data="deviceBoxData" show-checkbox node-key="id" @node-click="handleNodeClick"
+        accordion :check-strictly="true" :props="config.defaultProps" highlight-current />
     </div>
-    <div class="demContent2">
-      <div class="demDivOne">
+    <div class="right-area">
+      <div class="right-area-header">
         <div class="demDivTwo">
-          <div class="block">
-            <span class="demonstration" style="margin-right:10px">日期:</span>
-            <el-date-picker
-              v-model="dateTime"
-              type="month"
-              placeholder="请选择日期"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
-          </div>
+          <span class="title" style="margin-right:10px">日期:</span>
+          <el-date-picker v-model="dateTime" type="month" placeholder="请选择日期"
+            :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
         </div>
 
-        <el-radio-group
-          v-model="listTabPosition"
-          @change="listTabsChange(listTabPosition)"
-          style="display: flex"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-radio-button label="cycleValue">电费结算周期</el-radio-button>
-          <el-radio-button label="monthValue">自然月</el-radio-button>
+        <el-radio-group v-model="listTabPosition" @change="handleTabChange(listTabPosition)" style="margin-left: 20px;"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-radio-button value="cycleValue">电费结算周期</el-radio-button>
+          <el-radio-button value="monthValue">自然月</el-radio-button>
         </el-radio-group>
 
-        <div style="margin-left: 10px">
-          <el-button icon="el-icon-search" type="primary" @click="searchData()" style="padding: 7px 12px;" :disabled="store.state.authorities.indexOf('查询')==-1">
-            查询
-          </el-button>
-        </div>
+        <el-button icon="Search" type="primary" @click="searchData()" style="margin-left: 20px;"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          查询
+        </el-button>
       </div>
-       <div   v-loading="loading" style="  height: calc(100vh - 192px);
-      overflow-y: auto;">
 
-         <div class="demEcharTable" v-if="flag" >
-        <div class="Echarts"   >
+      <div class="right-area-center" v-if="flag" v-loading="loading">
+        <div class="Echarts">
           <div class="ehcartOne">
-            <i
-              class="el-icon-s-data el-input__icon"
-              style="font-size: 20px"
-            ></i>
-            <span style="font-size: 15px">{{}}每日最大需量趋势</span>
-          </div>
-          <div>
-            <echarts :Height="Height" :echartsData="echartsData"></echarts>
+            <Histogram class="iconfont el-input__icon" />
+            <span class="title">每日最大需量趋势</span>
           </div>
+
+          <echarts :Height="Height" :echartsData="echartsData"></echarts>
         </div>
         <div class="Tables">
-          <el-table
-            :data="tableData"
-            :height="Height"
-            style="width: 100%"
-            id="tables1"
-             border
-        stripe
-          >
-            <el-table-column prop="listDate" label="日期" width=""  align="center"/>
-            <el-table-column prop="list" label="最大需量(kw)" width=""  align="center"/>
+          <el-table :data="tableData" :height="Height" style="width: 100%" id="tables1" border stripe>
+            <el-table-column prop="listDate" label="日期" width="" align="center" />
+            <el-table-column prop="list" label="最大需量(kw)" width="" align="center" />
           </el-table>
         </div>
       </div>
-
-
-       </div>
-      
     </div>
   </div>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import config from '../index.js';
+import { parseTime2 } from '@/utils'
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/dataManage/demandAnalysis.js'
+/*----------------------------------组件引入-----------------------------------*/
 import echarts from './ehcarts/index.vue'
-import { parseTime2 } from '@/utils'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  listTabPosition: 'cycleValue', //日月年报表tabs v-model
+})
+const { listTabPosition } = toRefs(state)
 
-import * as api from '@/api/dataManage/demandAnalysis.js'
-import { ElMessage } from 'element-plus'
-import { ElNotification } from 'element-plus'
-
-export default defineComponent({
-  name: 'demandAnalysis',
-  components: { echarts },
-  props: {},
-  setup() {
-    const store = useStore()
-    const tableData=ref([])
-    const deviceBoxData = ref([])
-    const deviceChecked = ref([])
-    // const dateTime = ref(new Date())
-    const dateTime = ref('')
-    const typeSrarch = ref(1)
-    const flag = ref(false)
-    const echartsData = ref({})
-     const loading=ref(false)
-
-    const siteOption = () => {
-    }
+const tableData = ref([])
+const deviceBoxData = ref([])
+const deviceChecked = ref([])
+const dateTime = ref('')
+const typeSrarch = ref(1)
+const flag = ref(false)
+const echartsData = ref({})
+const loading = ref(false)
+
+
+const Height = ref()
+Height.value = window.innerHeight - 250 + 'px'
+window.onresize = function () {
+  Height.value = window.innerHeight - 250 + 'px'
+}
 
-    const listTabsChange = (value) => {
-      value == 'monthValue' ? (typeSrarch.value = 2) : (typeSrarch.value = 1)
-    }
-    const handleNodeClick = (data, obj, node) => {
-      data, node
-      deviceChecked.value = obj.data.deviceCode
-    }
 
-    const state = reactive({
-      value1: '2021-5',
+//通过站点切换下拉框 change事件改变 tree树中的数据
+function siteChange() {
+  store.commit('publicDeviceList')
+  deviceBoxList()
+}
+
+function handleTabChange(value) {
+  switch (value) {
+    case 'monthValue':
+      typeSrarch.value = 2
+      break
+    default:
+      typeSrarch.value = 1
+  }
+}
+
+function handleNodeClick(data, obj, node) {
+  deviceChecked.value = obj.data.deviceCode
+}
+
+function deviceBoxList() {
+  api
+    .deviceBoxList({
+      siteId: store.state.siteId,
     })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        deviceBoxData.value = requset.data
+        deviceBoxData.value.forEach(function (i, index) {
+          i.id = index
+          i.children = []
+        })
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
+}
+function searchData() {
+  // 前置校验（提前return，减少嵌套）
+  if (!dateTime.value) {
+    ElNotification.warning('请选择开始和结束时间')
+    return
+  }
 
-    const Height = ref()
-    Height.value = window.innerHeight - 250 + 'px'
-    window.onresize = function () {
-      Height.value = window.innerHeight - 250 + 'px'
-    }
-    //通过站点切换下拉框 change事件改变 tree树中的数据
-    const siteChange = () => {
-      store.commit('publicDeviceList')
-      deviceBoxList()
-    }
-    function deviceBoxList() {
-    
-      api
-        .deviceBoxList({
-          siteId: store.state.siteId,
+  if (deviceChecked.value.length === 0) {
+    ElNotification.warning('请选择测点设备')
+    return
+  }
+
+  loading.value = true;
+
+  api
+    .demandAnalysis({
+      cycle: typeSrarch.value,
+      monthDate: parseTime2(dateTime.value),
+      deviceCode: deviceChecked.value,
+    })
+    .then((requset) => {
+
+      if (requset.status === 'SUCCESS') {
+        loading.value = false;
+        flag.value = true
+        echartsData.value = requset.data[0]
+
+
+        //重组表格数据
+        var list = requset.data[0].list
+        var listDate = requset.data[0].listDate
+        var newArr1 = []
+        var newArr2 = []
+        list.forEach((item) => {
+          newArr1.push({ list: item })
         })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            deviceBoxData.value = requset.data
-            deviceBoxData.value.forEach(function (i, index) {
-              i.id = index
-              i.children = []
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
+        listDate.forEach((item) => {
+          newArr2.push({ listDate: item })
         })
-    }
-    function searchData() {
-      if (!dateTime.value) {
-         loading.value=false
-        ElNotification({
-          title: '提示',
-          message: '请选择时间',
-          type: 'warning',
+        var newObj = newArr1.map((item, index) => {
+          return { ...item, ...newArr2[index] }
         })
-        return
-      }
+        tableData.value = newObj
+
 
-       loading.value=true;
-      if (deviceChecked.value.length > 0) {
-         
-        // alert(1)
-        // store.commit('TimeAll_function', dateTime.value)
-        // const time = store.state.Time_Data
-
-        dateTime.value ? (dateTime.value = parseTime2(dateTime.value)) : ''
-        api
-          .demandAnalysis({
-            cycle: typeSrarch.value,
-            monthDate: dateTime.value,
-            deviceCode: deviceChecked.value,
-          })
-          .then((requset) => {
-             
-            if (requset.status === 'SUCCESS') {
-               loading.value=false;
-              flag.value = true
-              echartsData.value = requset.data[0]
-
-
-              //重组表格数据
-              var list = requset.data[0].list
-              var listDate = requset.data[0].listDate
-              var newArr1 = []
-              var newArr2 = []
-              list.forEach((item) => {
-                newArr1.push({ list: item })
-              })
-              listDate.forEach((item) => {
-                newArr2.push({ listDate: item })
-              })
-              var newObj = newArr1.map((item, index) => {
-                return { ...item, ...newArr2[index] }
-              })
-              tableData.value=newObj
-
-
-            } else {
-              ElMessage.error(requset.msg)
-            }
-          })
       } else {
-         loading.value=false;
-        console.log('', 1)
-        ElNotification({
-          title: '提示',
-          message: '请选择设备',
-          type: 'warning',
-        })
+        ElMessage.error(requset.msg)
       }
-    }
-    onMounted(() => {
-      deviceBoxList()
     })
 
-    return {
-      Height,
-      ...toRefs(state), //时间选择默认参数
-      siteValue: ref(1), //select站点选择
-      listTabsChange, //单选change事件
-      siteOption, //站点下拉change事件
-      siteChange,
-      searchData,
-      handleNodeClick,
-      loading,
-      store,
-      listTabPosition: ref('cycleValue'), //单选按钮
-      deviceBoxData,
-      deviceChecked,
-      dateTime,
-      typeSrarch,
-      flag,
-      echartsData,
-      data: [
-        {
-          id: 1,
-          label: '设备1',
-          children: [
-            {
-              id: 4,
-              label: '母线停电次数',
-            },
-            {
-              id: 4,
-              label: '功率因数',
-            },
-            {
-              id: 4,
-              label: 'A相功率因数',
-            },
-          ],
-        },
-      ],
-      options: ref([
-        {
-          value: 1,
-          label: 'Option1',
-        },
-        {
-          value: 2,
-          label: 'Option2',
-        },
-        {
-          value: 3,
-          label: 'Option3',
-        },
-        {
-          value: 4,
-          label: 'Option4',
-        },
-      ]),
-      defaultProps: {
-        children: 'children',
-        label: 'deviceName',
-        deviceCode: 'deviceCode',
-        id: 'id',
-      },
-      tableData
-    }
-  },
+}
+
+onMounted(() => {
+  deviceBoxList()
 })
+
 </script>
 
 <style lang="scss" scoped>
 .demandAnalysis {
   display: flex;
   height: calc(100vh - 130px);
-  // padding: 30px;
-  // margin-top: 50px;
-  .demContent1 {
+
+  .left-area {
     background-color: #fff;
     width: 15%;
     height: 100%;
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
-        overflow-y: auto;
-    .demSwitch {
+    overflow-y: auto;
+
+    .treeDom {
       margin-top: 20px;
       width: 100%;
       height: 20px;
       cursor: pointer;
-      .demSwitchOne {
-        display: flex;
-        border: 0.5px solid silver;
-        padding: 8px;
-        font-size: 13px;
-        div:nth-child(1) {
-          width: 100%;
-        }
-      }
-      .demSwitchOne:hover {
-        background-color: #409eff;
-      }
-      .demSwitchOne:focus {
-        background-color: #409eff;
-      }
     }
   }
-  .demContent2 {
+
+  .right-area {
     background-color: #fff;
     width: 85%;
     min-width: 845px;
     height: 100%;
-    .demDivOne {
+
+    &-header {
       display: flex;
-      margin: 15px 0px 15px 15px;
+      margin: 15px;
+
       .demDivTwo {
         font-weight: 600;
         color: #9d9d9d;
-        margin-right: 20px;
       }
     }
-    .demEcharTable {
+
+    &-center {
       display: flex;
+      height: calc(100vh - 192px);
+      overflow-y: auto;
+
       .Echarts {
         width: 60%;
         margin-right: 5px;
-       
+
         .ehcartOne {
+          display: flex;
+          height: 40px;
+          line-height: 40px;
           padding-left: 10px;
           background-color: rgb(233 233 233);
           border-bottom: 1px #bfbfbf solid;
+
+          .iconfont {
+            width: 20px;
+            font-size: 20px;
+            margin: auto 5px auto 0;
+          }
+
+          .title {
+            font-size: 15px;
+          }
         }
       }
+
       .Tables {
         width: 40%;
         display: flex;
@@ -373,22 +259,20 @@ export default defineComponent({
     }
   }
 }
-</style>
-<style>
-.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
-  overflow-y: hidden;
-}
-</style>
-<style lang="less">
-.demSwitch {
-  .el-tree-node__content .el-checkbox__input {
-    display: none;
+
+:deep() {
+  .treeDom {
+    .el-tree-node__content .el-checkbox__input {
+      display: none;
+    }
+
+    .el-tree-node .el-tree-node__children .el-tree-node__content .el-checkbox__input {
+      display: block;
+    }
   }
-  .el-tree-node
-    .el-tree-node__children
-    .el-tree-node__content
-    .el-checkbox__input {
-    display: block;
+
+  .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
+    overflow-y: hidden;
   }
 }
 </style>

src/views/dataManage/energyReport/index.vue

@@ -2,334 +2,194 @@
   <div class="energyReport">
     <div class="energContent1">
       <div style="display: flex">
-        <el-select
-          v-model="store.state.siteId"
-          @change="siteChange"
-          placeholder="选择站点"
-          filterable
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-option
-            v-for="item in store.state.siteList"
-            :key="item.id"
-            :label="item.siteName"
-            :value="item.id"
-          ></el-option>
+        <el-select v-model="store.state.siteId" @change="siteChange" placeholder="选择站点" filterable
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
+            :value="item.id"></el-option>
         </el-select>
       </div>
 
       <div class="energSwitch">
-        <!-- <el-select v-model="deviceChecked" v-if="deviceBoxData.length>0">
-          <el-option
-            v-for="item in deviceBoxData"
-            :key="item.value"
-            :label="item.deviceName"
-            :value="item.deviceCode"
-          ></el-option>
-        </el-select> -->
-        <el-tree
-          ref="tree"
-          :data="deviceBoxData"
-          show-checkbox
-          node-key="id"
-          @node-click="handleNodeClick"
-          accordion
-          :check-strictly="true"
-          :props="defaultProps"
-          highlight-current
-        />
+        <el-tree ref="tree" :data="deviceBoxData" show-checkbox node-key="id" @node-click="handleNodeClick" accordion
+          :check-strictly="true" :props="config.defaultProps" highlight-current />
       </div>
     </div>
     <div class="energContent2">
       <div class="energDivOne">
         <div class="energHaeder">
-          <el-radio-group
-            v-model="listTabPosition"
-            @change="listTabsChange(listTabPosition)"
-            style="display: flex"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
-            <el-radio-button label="dayValue">日报表</el-radio-button>
-            <el-radio-button label="monthValue">月报表</el-radio-button>
-            <el-radio-button label="yearValue">年报表</el-radio-button>
+          <el-radio-group v-model="listTabPosition" @change="handleTabChange(listTabPosition)" style="display: flex"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
+            <el-radio-button value="dayValue">日报表</el-radio-button>
+            <el-radio-button value="monthValue">月报表</el-radio-button>
+            <el-radio-button value="yearValue">年报表</el-radio-button>
           </el-radio-group>
           <div class="energDivTwo">
-            <div class="block">
-              <!-- <span>日期：</span>
-              <el-date-picker
-                style="width: 150px"
-                v-model="value1"
-                :type="dateType"
-              ></el-date-picker> -->
-              <span class="demonstration">选择时间范围：</span>
-              <el-date-picker
-                v-model="dateTime"
-                type="daterange"
-                range-separator="➥"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"
-                :disabled="store.state.authorities.indexOf('查询')==-1"
-              ></el-date-picker>
-            </div>
+            <span class="title">选择时间范围：</span>
+            <el-date-picker v-model="dateRange" type="daterange" range-separator="➥" start-placeholder="开始时间"
+              end-placeholder="结束时间" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
           </div>
 
-          <div>
-            <el-button
-              icon="el-icon-search"
-              type="primary"
-              style="padding: 7px 12px"
-              @click="searchData()"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              查询
-            </el-button>
-          </div>
+          <el-button icon="Search" type="primary" @click="searchData()"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
+            查询
+          </el-button>
         </div>
 
-        <div style="width: 30%">
-          <div style="display: flex; float: right; margin-right: 15px">
-            <!-- <el-checkbox
-              v-model="checked"
-              label="显示抄表"
-              style="margin-right: 20px"
-            ></el-checkbox> -->
-            <el-radio-group
-              v-model="rightTabs"
-              @change="listTabsChange(rightTabs)"
-              style="display: flex"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-radio-button label="echarts">图表</el-radio-button>
-              <el-radio-button label="tables">表格</el-radio-button>
-            </el-radio-group>
-          </div>
-        </div>
+        <el-radio-group v-model="rightTabs" @change="handleTabChange(rightTabs)"
+          style="display: flex; float: right; margin-left:auto " :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-radio-button value="echarts">图表</el-radio-button>
+          <el-radio-button value="tables">表格</el-radio-button>
+        </el-radio-group>
       </div>
       <div class="energEcharts" v-loading="loading">
         <template v-if="flag">
-          <echarts
-            v-if="rightTabsBool"
-            :echartsData="echartsData"
-            :Height="Height"
-          ></echarts>
-          <tables v-else :tableDatas="echartsData" :Height="Height" :typeSrarch="typeSrarch" :dateTime="dateTime" :deviceChecked="deviceChecked"></tables>
+          <echarts v-if="rightTabsBool" :echartsData="echartsData" :Height="Height"></echarts>
+          <tables v-else :tableDatas="echartsData" :Height="Height" :typeSrarch="typeSrarch" :dateTime="dateRange"
+            :deviceChecked="deviceChecked"></tables>
         </template>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import config from '../index.js';
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
-
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/dataManage/energyReport.js'
-import { ElMessage } from 'element-plus'
-import { ElNotification } from 'element-plus'
-
+/*----------------------------------组件引入-----------------------------------*/
 import echarts from './ehcarts/index.vue'
 import tables from './tables/index.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  listTabPosition: 'dayValue', //日月年报表tabs v-model
+  rightTabs: 'echarts', //表格图表tabs v-model
+  rightTabsBool, //表格图表 显示隐藏
+})
+const { listTabPosition, rightTabs, rightTabsBool } = toRefs(state)
 
-export default defineComponent({
-  name: 'energyReport',
-  components: { echarts, tables },
-  props: {},
-  setup() {
-    const store = useStore()
-    // const showTree = ref(true)
-    // const timer=ref('')
-    // const dateTime = ref([new Date(2021, 10, 1), new Date(2021, 10, 30)])
-    const dateTime = ref('')
-    const typeSrarch = ref(1)
-    const flag = ref(false)
-    const echartsData = ref({})
-     const loading=ref(false)
-
-    let dateType = ref('date')
-
-    const deviceBoxData = ref([])
-    const deviceChecked = ref([])
-    let rightTabsBool = ref(true)
-
-    const handleNodeClick = (data, obj, node) => {
-      data, node
-      // console.log(obj.data.deviceCode)
-      deviceChecked.value = obj.data.deviceCode
-    }
-    const listTabsChange = (value) => {
-      if (
-        value == 'dayValue' ||
-        value == 'monthValue' ||
-        value == 'yearValue'
-      ) {
-        value == 'dayValue'
-          ? (typeSrarch.value = 1)
-          : value == 'monthValue'
-          ? (typeSrarch.value = 2)
-          : (typeSrarch.value = 3)
-      } else if (value == 'electriQuan' || value == 'electriFees') {
-        console.log()
-      } else if (value == 'tables' || value == 'echarts') {
-        searchData()
-        if (value == 'echarts') {
-          rightTabsBool.value = true 
-        } else {
-          rightTabsBool.value = false
-        }
-        // console.log(rightTabsBool.value)
-      }
 
-      // console.log(dateType)
+const dateRange = ref('')
+const typeSrarch = ref(1)
+const flag = ref(false)
+const echartsData = ref({})
+const loading = ref(false)
+const deviceBoxData = ref([])
+const deviceChecked = ref([])
+
+const handleNodeClick = (data, obj, node) => {
+  deviceChecked.value = obj.data.deviceCode
+}
+
+const handleTabChange = (value) => {
+  // 使用对象映射替代多重条件判断，更直观且易于扩展
+  const tabActionMap = {
+    // 周期类型映射
+    dayValue: () => { typeSrarch.value = 1 },
+    monthValue: () => { typeSrarch.value = 2 },
+    yearValue: () => { typeSrarch.value = 3 },
+
+    // 电量电费类型（预留实现）
+    electriQuan: () => { },
+    electriFees: () => { },
+
+    // 展示类型切换
+    echarts: () => {
+      searchData()
+      rightTabsBool.value = true
+    },
+    tables: () => {
+      searchData()
+      rightTabsBool.value = false
     }
+  }
 
-    const state = reactive({
-      value1: '2021-10-16',
-    })
+  // 执行对应操作，不存在的value则忽略处理
+  const action = tabActionMap[value]
+  if (action) {
+    action()
+  }
+}
+
+const Height = ref(0)
+Height.value = window.innerHeight - 210 + 'px'
+window.addEventListener('resize', () => {
+  Height.value = window.innerHeight - 210 + 'px'
+})
+
+//通过站点切换下拉框 change事件改变 tree树中的数据
+const siteChange = () => {
+  store.commit('publicDeviceList')
+  deviceBoxList()
+}
+
+function searchData() {
+  // 前置校验（提前return，减少嵌套）
+  if (!dateRange.value) {
+    ElNotification.warning('请选择开始和结束时间')
+    return
+  }
 
-    const Height = ref(0)
-    Height.value = window.innerHeight - 210 + 'px'
-    window.addEventListener('resize', () => {
-      Height.value = window.innerHeight - 210 + 'px'
+  if (deviceChecked.value.length === 0) {
+    ElNotification.warning('请选择测点设备')
+    return
+  }
+
+  loading.value = true;
+
+  store.commit('TimeAll_function', dateRange.value)
+  const time = store.state.Time_Data
+  api
+    .monthlyReport2({
+      cycle: typeSrarch.value,
+      startTime: time[0],
+      endTime: time[1],
+      deviceCode: deviceChecked.value,
     })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        loading.value = false
+        flag.value = true
+        echartsData.value = requset.data[0]
 
-    //通过站点切换下拉框 change事件改变 tree树中的数据
-    const siteChange = () => {
-      store.commit('publicDeviceList')
-      deviceBoxList()
-    }
-    // const currentChecked = (nodeObj, SelectedObj) => {
-    //   nodeObj, SelectedObj
-    //   treeCheckedList.value = SelectedObj.checkedNodes
-    //   treeCheckedList.value = []
-    //   SelectedObj.checkedNodes.forEach((item) => {
-    //     treeCheckedList.value.push(item.deviceCode)
-    //     remove(treeCheckedList.value, item.deviceCode)
-    //   })
-    // }
-    // function remove(arr, item) {
-    //   let newArr = arr.filter((ele) => {
-    //     return ele !== item
-    //   })
-    //   return newArr
-    // }
-
-    function searchData() {
-      if (!dateTime.value) {
-        loading.value=false
-        ElNotification({
-          title: '提示',
-          message: '请选择开始和结束时间',
-          type: 'warning',
-        })
-        return
-      }
-      loading.value=true;
-
-
-      if (deviceChecked.value.length > 0) {
-        store.commit('TimeAll_function', dateTime.value)
-        const time = store.state.Time_Data
-        api
-          .monthlyReport2({
-            cycle: typeSrarch.value,
-            startTime: time[0],
-            endTime: time[1],
-            deviceCode: deviceChecked.value,
-          })
-          .then((requset) => {
-            if (requset.status === 'SUCCESS') {
-              loading.value=false
-              flag.value = true
-              echartsData.value = requset.data[0]
-
-              if (echartsData.value == []) {
+        if (echartsData.value == []) {
           ElMessage.warning('暂无结果')
         }
-            } else {
-              ElMessage.error(requset.msg)
-            }
-          })
       } else {
-        loading.value=false
-        console.log('', 1)
-        ElNotification({
-          title: '提示',
-          message: '请选择设备',
-          type: 'warning',
-        })
+        ElMessage.error(requset.msg)
       }
-    }
+    })
+}
 
-    function deviceBoxList() {
-      api
-        .deviceBoxList({
-          siteId: store.state.siteId,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            deviceBoxData.value = requset.data
-            deviceBoxData.value.forEach(function (i, index) {
-              i.id = index
-              i.children = []
-            })
-            // console.log(deviceBoxData.value)
-          } else {
-            ElMessage.error(requset.msg)
-          }
+function deviceBoxList() {
+  api
+    .deviceBoxList({
+      siteId: store.state.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        deviceBoxData.value = requset.data
+        deviceBoxData.value.forEach(function (i, index) {
+          i.id = index
+          i.children = []
         })
-    }
-    onMounted(() => {
-      deviceBoxList()
+        // console.log(deviceBoxData.value)
+      } else {
+        ElMessage.error(requset.msg)
+      }
     })
-
-    return {
-      Height,
-      ...toRefs(state),
-      dateType, //tabs切换时间选择器类型
-      listTabPosition: ref('dayValue'), //日月年报表tabs v-model
-      electricTabs: ref('electriQuan'), //电量电费tabs v-model
-      rightTabs: ref('echarts'), //表格图表tabs v-model
-      rightTabsBool, //表格图表 显示隐藏
-      siteValue: ref(''), //站点下拉列表v-model
-      checked: ref(false),
-      siteChange,
-      searchData,
-      loading,
-      dateTime,
-      deviceBoxList,
-      // showTree,
-      data: [
-        {
-          id: 1,
-          deviceName: '克隆监控设备',
-          deviceCode: 'KL15223565',
-          children: [],
-        },
-        {
-          id: 2,
-          deviceName: '测试监控设备two',
-          deviceCode: 'DA00013294',
-          children: [],
-        },
-      ],
-
-      defaultProps: {
-        children: 'children',
-        label: 'deviceName',
-        deviceCode: 'deviceCode',
-        id: 'id',
-      },
-      store,
-      listTabsChange,
-      flag,
-      // currentChecked,
-      typeSrarch,
-      deviceBoxData,
-      deviceChecked,
-      echartsData,
-      // timer,
-      handleNodeClick,
-    }
-  },
+}
+onMounted(() => {
+  deviceBoxList()
 })
 </script>
 
@@ -337,6 +197,7 @@ export default defineComponent({
 .energyReport {
   display: flex;
   height: calc(100vh - 130px);
+
   // padding: 30px;
   // margin-top: 50px;
   .energContent1 {
@@ -346,51 +207,66 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
-        overflow-y: auto;
+    overflow-y: auto;
+
     .energSwitch {
       margin-top: 20px;
       width: 100%;
       height: 20px;
       cursor: pointer;
+
       .energSwitchOne {
         display: flex;
         border: 0.5px solid silver;
         padding: 8px;
         font-size: 13px;
+
         div:nth-child(1) {
           width: 100%;
         }
       }
+
       .energSwitchOne:hover {
         background-color: #409eff;
       }
+
       .energSwitchOne:focus {
         background-color: #409eff;
       }
     }
   }
+
   .energContent2 {
     background-color: #fff;
     width: 85%;
     min-width: 845px;
     height: 100%;
+
     .energEcharts {
       height: calc(100vh - 192px);
       overflow-y: auto;
     }
+
     .energDivOne {
       display: flex;
-      margin: 15px 0px 15px 15px;
+      padding: 15px;
+
+
       .energHaeder {
-        // width: 70%;
         display: flex;
+
+
+
         .energDivTwo {
+          display: flex;
           font-weight: 600;
           color: #9d9d9d;
           // width: 195px;
           margin: 0 20px;
-          .block {
-            white-space: nowrap;
+          white-space: nowrap;
+
+          .title {
+            margin: auto 0;
           }
         }
       }
@@ -399,21 +275,23 @@ export default defineComponent({
 }
 
 // tab重置样式
-.tabsSizeColor > .el-tabs__header .el-tabs__item {
+.tabsSizeColor>.el-tabs__header .el-tabs__item {
   line-height: 50px;
   height: 50px;
   font-size: 16px;
 }
 
-.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
+.tabsSizeColor>.el-tabs__header .el-tabs__item.is-active {
   border-bottom: 2px solid #409eff;
   color: #409eff;
 }
+
 .el-tabs__header {
   margin-bottom: 0;
 }
-.el-tabs--card > .el-tabs__header .el-tabs__item,
-.el-tabs--card > .el-tabs__header .el-tabs__nav {
+
+.el-tabs--card>.el-tabs__header .el-tabs__item,
+.el-tabs--card>.el-tabs__header .el-tabs__nav {
   border: none;
 }
 </style>
@@ -423,10 +301,8 @@ export default defineComponent({
   .el-tree-node__content .el-checkbox__input {
     display: none;
   }
-  .el-tree-node
-    .el-tree-node__children
-    .el-tree-node__content
-    .el-checkbox__input {
+
+  .el-tree-node .el-tree-node__children .el-tree-node__content .el-checkbox__input {
     display: block;
   }
 }

src/views/dataManage/energyReport/tables/index.vue

@@ -7,21 +7,10 @@
         </el-button>
       </div>
 
-      <el-table
-        :data="tableData6"
-        border
-        stripe
-        style="max-width: 100%"
-        :key="Math.random()"
-        :header-cell-style="headClass"
-      >
+      <el-table :data="tableData6" border stripe style="max-width: 100%" :key="Math.random()"
+        :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }">
         <template v-for="(item, index) in cols" :key="index">
-          <el-table-column
-            :prop="item.prop"
-            :label="item.label"
-            align="center"
-            min-width="120"
-          >
+          <el-table-column :prop="item.prop" :label="item.label" align="center" min-width="120">
             <template #default="scope">
               <span>
                 {{ scope.row[item.prop] }}
@@ -46,7 +35,7 @@ export default defineComponent({
   props: ['tableDatas', 'typeSrarch', 'deviceChecked', 'dateTime'],
 
   setup(props) {
-     const store = useStore()
+    const store = useStore()
     const Update = (row) => {
       console.log('', row)
     }
@@ -101,11 +90,6 @@ export default defineComponent({
       // },
     ])
 
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black'
-    }
-
     // 求和
     function sum(arr) {
       var s = 0
@@ -118,13 +102,13 @@ export default defineComponent({
     //导出
     const DataReportExport = () => {
       store.commit('TimeAll_function', timeArr.value)
-        const time = store.state.Time_Data
+      const time = store.state.Time_Data
 
       api.monthlyReportExport({
-          cycle: cycle.value,
-            startTime: time[0],
-            endTime: time[1],
-            deviceCode: deviceCode.value,
+        cycle: cycle.value,
+        startTime: time[0],
+        endTime: time[1],
+        deviceCode: deviceCode.value,
       }).then((requset) => {
         if (requset.status === 'SUCCESS') {
           window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
@@ -165,7 +149,6 @@ export default defineComponent({
     })
 
     return {
-      headClass,
       Update, //修改偏差配置事件
       cols,
       // cellStyle,

src/views/dataManage/index.js

@@ -0,0 +1,14 @@
+export default {
+    defaultProps: {
+        children: 'children',
+        label: 'deviceName',
+        deviceCode: 'deviceCode',
+        id: 'id',
+    },
+    options: [
+        { value: 1, label: '平均值', },
+        { value: 2, label: '最大值', },
+        { value: 3, label: '最小值', },
+        { value: 4, label: '累计值', },
+    ]
+}

src/views/dataManage/sameAnalysis/index.vue

@@ -2,34 +2,16 @@
   <div class="sameAnalysis">
     <div class="sameContent1">
       <div style="display: flex">
-        <el-select
-          v-model="store.state.siteId"
-          @change="siteChange"
-          placeholder="选择站点"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-          filterable
-        >
-          <el-option
-            v-for="item in store.state.siteList"
-            :key="item.id"
-            :label="item.siteName"
-            :value="item.id"
-          ></el-option>
+        <el-select v-model="store.state.siteId" @change="siteChange" placeholder="选择站点"
+          :disabled="store.state.authorities.indexOf('查询') == -1" filterable>
+          <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
+            :value="item.id"></el-option>
         </el-select>
       </div>
 
       <div class="sameSwitch">
-        <el-tree
-          ref="tree"
-          :data="store.state.deviceList"
-          show-checkbox
-          node-key="id"
-          accordion
-          :check-strictly="true"
-          :props="defaultProps"
-          @change="changeTree"
-          @check="currentChecked"
-        />
+        <el-tree ref="tree" :data="store.state.deviceList" show-checkbox node-key="id" accordion :check-strictly="true"
+          :props="config.defaultProps" @check="currentChecked" />
       </div>
     </div>
     <div class="sameContent2">
@@ -37,245 +19,169 @@
         <div class="sameDivTwo">
           <div class="block">
             <span class="demonstration">选择时间范围：</span>
-            <el-date-picker
-              v-model="dateTime"
-              type="datetimerange"
-              range-separator="➥"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
+            <el-date-picker v-model="dateRange" type="datetimerange" range-separator="➥" start-placeholder="开始时间"
+              end-placeholder="结束时间" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
           </div>
         </div>
-        <el-radio-group
-          v-model="listTabPosition"
-          @change="listTabsChange(listTabPosition)"
-          style="display: flex"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-radio-button label="allValue">所有值</el-radio-button>
-          <el-radio-button label="dailyValue">每日值</el-radio-button>
-          <el-radio-button label="monthValue">每月值</el-radio-button>
+        <el-radio-group v-model="listTabPosition" @change="handleTabChange(listTabPosition)" style="display: flex"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-radio-button value="allValue">所有值</el-radio-button>
+          <el-radio-button value="dailyValue">每日值</el-radio-button>
+          <el-radio-button value="monthValue">每月值</el-radio-button>
 
-          <el-select
-            v-model="valueCalculation"
-            placeholder="Select"
-            style="width: 100px; margin-left: 10px"
-            v-if="typeSrarch"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
+          <el-select v-model="valueCalculation" placeholder="Select" style="width: 100px; margin-left: 20px"
+            v-if="typeSrarch">
+            <el-option v-for="item in config.options" :key="item.value" :label="item.label"
+              :value="item.value"></el-option>
           </el-select>
 
-          <div style="margin-left: 10px">
-            <el-button
-              icon="el-icon-searchData"
-              type="primary"
-              style="padding: 7px 12px"
-              @click="searchData()"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              查询
-            </el-button>
-          </div>
+          <el-button icon="Search" type="primary" style="margin-left: 20px;" @click="searchData()"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
+            查询
+          </el-button>
         </el-radio-group>
       </div>
-      <div class="sameEcharts"  v-loading="loading">
-        <echarts
-          :ecahrtsData="ecahrtsData"
-          :typeSrarch="typeSrarch"
-          v-if="flag && ecahrtsData[0]"
-         
-        ></echarts>
+      <div class="sameEcharts" v-loading="loading">
+        <echarts :ecahrtsData="ecahrtsData" :typeSrarch="typeSrarch" v-if="flag && ecahrtsData[0]"></echarts>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import config from '../index.js';
 import { useStore } from 'vuex'
-import { defineComponent, ref, onMounted } from 'vue'
-import echarts from './ehcarts/index.vue'
-
-import { ElNotification } from 'element-plus'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/dataManage/sameAnalysis.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'sameAnalysis',
-  components: { echarts },
-  props: {},
-  setup() {
-    const store = useStore()
-    const listTabPosition = ref('allValue') //tabs切换
-    const treeCheckedList = ref([])
-    const treeData = ref([])
-    const tree = ref(null)
-    const typeSrarch = ref(0)
-    const flag = ref(false)
-     const loading=ref(false)
-
-    const valueCalculation = ref()
-    const dateTime = ref('')
-    const ecahrtsData = ref({})
-    function changeTree(){
+/*----------------------------------组件引入-----------------------------------*/
+import echarts from './ehcarts/index.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  flag: false,
+  loading: false,
+  listTabPosition: 'allValue',
+  treeCheckedList: [],
+  typeSrarch: 0,
+  valueCalculation: 0,
+  dateRange: "",
+  ecahrtsData: {},
+})
+const { flag, loading, listTabPosition, treeCheckedList, typeSrarch, valueCalculation, dateRange, ecahrtsData } = toRefs(state)
 
-    }
+/**
+ * 选项卡切换处理
+ * @param {string} value - 选项卡值
+ */
+const handleTabChange = (value) => {
+  switch (value) {
+    case 'allValue':
+      typeSrarch.value = 0
+      break
+    case 'dailyValue':
+      typeSrarch.value = 1
+      valueCalculation.value = 1
+      break
+    default:
+      typeSrarch.value = 2
+      valueCalculation.value = 1
+  }
+}
 
-    const listTabsChange = (value) => {
-      // console.log(value)
-      if (value == 'allValue') {
-        typeSrarch.value = 0
-      } else if (value == 'dailyValue') {
-        typeSrarch.value = 1
-        valueCalculation.value = 1
-      } else {
-        typeSrarch.value = 2
-        valueCalculation.value = 1
-      }
-    }
+const currentChecked = (nodeObj, SelectedObj) => {
+  treeCheckedList.value = SelectedObj.checkedNodes
+  treeCheckedList.value = []
+  SelectedObj.checkedNodes.forEach((item) => {
+    treeCheckedList.value.push(item.deviceCode)
+    remove(treeCheckedList.value, item.deviceCode)
+  })
 
-    const currentChecked = (nodeObj, SelectedObj) => {
-      nodeObj, SelectedObj
-      treeCheckedList.value = SelectedObj.checkedNodes
-      treeCheckedList.value = []
-      SelectedObj.checkedNodes.forEach((item) => {
-        treeCheckedList.value.push(item.deviceCode)
-        remove(treeCheckedList.value, item.deviceCode)
-      })
-    }
+  function remove(arr, item) {
+    let newArr = arr.filter((ele) => {
+      return ele !== item
+    })
+    return newArr
+  }
+}
 
-    function remove(arr, item) {
-      let newArr = arr.filter((ele) => {
-        return ele !== item
-      })
-      return newArr
-    }
+function searchData() {
+  // 前置校验（提前return，减少嵌套）
+  if (!dateRange.value) {
+    ElNotification.warning('请选择开始和结束时间')
+    return
+  }
 
-    function searchData() {
-      if (!dateTime.value) {
-        loading.value=false
-        ElNotification({
-          title: '提示',
-          message: '请选择开始和结束时间',
-          type: 'warning',
-        })
-        return
-      }
-      loading.value=true;
+  if (treeCheckedList.value.length === 0) {
+    ElNotification.warning('请选择测点设备')
+    return
+  }
+  loading.value = true;
 
-      if (treeCheckedList.value.length > 0) {
-        // console.log('', store.state.deviceList)
-        // console.log('treeCheckedList')
-        // console.log(treeCheckedList.value)
-        store.commit('TimeAll_function', dateTime.value)
-        const time = store.state.Time_Data
-        api
-          .yearOnYearList({
-            startTime: time[0],
-            endTime: time[1],
-            type: typeSrarch.value,
-            valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
-            displayField: treeCheckedList.value,
-          })
-          .then((requset) => {
-            loading.value=false
-            if (requset.status === 'SUCCESS') {
-              flag.value = true
-              ecahrtsData.value = requset.data
+  store.commit('TimeAll_function', dateRange.value)
+  const time = store.state.Time_Data
+  api
+    .yearOnYearList({
+      startTime: time[0],
+      endTime: time[1],
+      type: typeSrarch.value,
+      valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
+      displayField: treeCheckedList.value,
+    })
+    .then((requset) => {
+      loading.value = false
+      if (requset.status === 'SUCCESS') {
+        flag.value = true
+        ecahrtsData.value = requset.data
 
-              if (!ecahrtsData.value[0]) {
-                ElMessage.warning('暂无结果')
-              }
-            } else {
-              ElMessage.error(requset.msg)
-            }
-          })
+        if (!ecahrtsData.value[0]) {
+          ElMessage.warning('暂无结果')
+        }
       } else {
-         loading.value=false
-        // console.log('', 1)
-        ElNotification({
-          title: '提示',
-          message: '请选择测点',
-          type: 'warning',
-        })
+        ElMessage.error(requset.msg)
       }
-    }
-
-    //通过站点切换下拉框 change事件改变 tree树中的数据
-    const siteChange = () => {
-      treeCheckedList.value=[]
-      store.commit('publicDeviceList')
-    }
+    })
+}
 
-    onMounted(() => {})
+//通过站点切换下拉框 change事件改变 tree树中的数据
+const siteChange = () => {
+  treeCheckedList.value = []
+  store.commit('publicDeviceList')
+}
 
-    return {
-      store,
-      listTabPosition,
-      tree,
-      treeData,
-      defaultProps: {
-        children: 'children',
-        label: 'deviceName',
-        deviceCode: 'deviceCode',
-        id: 'id',
-      },
-      flag,
-      remove,
-      dateTime,
-      searchData,
-      currentChecked,
-      siteChange,
-      listTabsChange,
-      typeSrarch,
-      loading,
-      options: ref([
-        {
-          value: 1,
-          label: '平均值',
-        },
-        {
-          value: 2,
-          label: '最大值',
-        },
-        {
-          value: 3,
-          label: '最小值',
-        },
-        {
-          value: 4,
-          label: '累计值',
-        },
-      ]),
-      valueCalculation,
-      ecahrtsData,
-      changeTree
-    }
-  },
-})
+onMounted(() => { })
 </script>
 
 <style lang="scss" scoped>
+.sameSwitch::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 3px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+}
 
-
-.sameSwitch::-webkit-scrollbar {/*滚动条整体样式*/
-        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
-    }
-.sameSwitch::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-        border-radius: 10px;
-        background: rgb(226, 224, 224);
+.sameSwitch::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  background: rgb(226, 224, 224);
 }
-.sameSwitch::-webkit-scrollbar-track {/*滚动条里面轨道*/
-        border-radius: 10px;
-        background: rgb(245, 245, 265);
+
+.sameSwitch::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  border-radius: 10px;
+  background: rgb(245, 245, 265);
 }
+
 .sameAnalysis {
   display: flex;
   height: calc(100vh - 130px);
+
   // padding: 30px;
   // margin-top: 50px;
   .sameContent1 {
@@ -285,7 +191,8 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
-        // overflow-y: auto;
+
+    // overflow-y: auto;
     .sameSwitch {
       margin-top: 20px;
       width: 100%;
@@ -293,35 +200,43 @@ export default defineComponent({
       cursor: pointer;
       height: calc(100% - 50px);
       overflow-y: auto;
+
       .sameSwitchOne {
         display: flex;
         border: 0.5px solid silver;
         padding: 8px;
         font-size: 13px;
+
         div:nth-child(1) {
           width: 100%;
         }
       }
+
       .sameSwitchOne:hover {
         background-color: #409eff;
       }
+
       .sameSwitchOne:focus {
         background-color: #409eff;
       }
     }
   }
+
   .sameContent2 {
     background-color: #fff;
     width: 85%;
     min-width: 845px;
     height: 100%;
-     .sameEcharts {
+
+    .sameEcharts {
       height: calc(100vh - 192px);
       overflow-y: auto;
     }
+
     .sameDivOne {
       display: flex;
       margin: 15px 0px 15px 15px;
+
       .sameDivTwo {
         font-weight: 600;
         color: #9d9d9d;
@@ -330,20 +245,15 @@ export default defineComponent({
     }
   }
 }
-
 </style>
 
 <style lang="less">
-
-
 .sameSwitch {
   .el-tree-node__content .el-checkbox__input {
     display: none;
   }
-  .el-tree-node
-    .el-tree-node__children
-    .el-tree-node__content
-    .el-checkbox__input {
+
+  .el-tree-node .el-tree-node__children .el-tree-node__content .el-checkbox__input {
     display: block;
   }
 }

src/views/deviceManage/powerEquip/communicateEquip/dialog/cloneDialog.vue

@@ -39,13 +39,12 @@
         <el-input class="inputer" v-model="cloneInputState" placeholder="请输入状态量" clearable />
       </div> -->
     </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <!-- <el-checkbox v-model="cloneChecked" label="连续克隆模式" style="margin-right: 10px"></el-checkbox> -->
-        <el-button @click="cloneDialog = false">取消</el-button>
-        <el-button type="primary" @click="clone()">确定</el-button>
-      </span>
-    </template>
+
+    <div class="dialog-footer" style="margin-top:50px;text-align: right">
+      <!-- <el-checkbox v-model="cloneChecked" label="连续克隆模式" style="margin-right: 10px"></el-checkbox> -->
+      <el-button @click="cloneDialog = false">取消</el-button>
+      <el-button type="primary" @click="clone()">确定</el-button>
+    </div>
   </el-dialog>
 </template>
 

src/views/deviceManage/powerEquip/communicateEquip/index.vue

@@ -13,27 +13,27 @@
           </template> -->
         </el-input>
 
-        <el-button type="primary" icon="el-icon-search" class="search-button" @click="Select()"
+        <el-button type="primary" icon="Search" class="search-button" @click="Select()"
           :disabled="store.state.authorities.indexOf('查询') == -1">
           搜索
         </el-button>
-        <el-button class="search-button" icon="el-icon-plus" type="success" @click="Insert()"
+        <el-button class="search-button" icon="Plus" type="success" @click="Insert()"
           :disabled="store.state.authorities.indexOf('新增') == -1">
           新增
         </el-button>
         <a href="./static/伍继通信设备导入模板.xlsx" download class="downloadMb">模板下载</a>
       </div>
 
-      <div class="comRight">
-        <el-upload class="upload-demo" :action="fileUrl + 'device/deviceImport'" :on-progress="handleProgress"
-          :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
-            accessToken: [accessToken],
-          }" :file-list="fileList" style="float: right" :disabled="store.state.authorities.indexOf('导入') == -1">
-          <el-button size="small" type="primary" :disabled="store.state.authorities.indexOf('导入') == -1">导入</el-button>
-        </el-upload>
-        <el-button type="primary" @click="DataReportExport()"
-          :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
-      </div>
+
+      <el-upload class="upload-demo" :action="fileUrl + 'device/deviceImport'" :on-progress="handleProgress"
+        :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
+          accessToken: [accessToken],
+        }" :file-list="fileList" style="margin:0 10px 0 auto" :disabled="store.state.authorities.indexOf('导入') == -1">
+        <el-button type="primary" :disabled="store.state.authorities.indexOf('导入') == -1">导入</el-button>
+      </el-upload>
+      <el-button type="primary" @click="DataReportExport()"
+        :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
+
     </div>
 
     <div class="comContent">
@@ -56,22 +56,19 @@
         <el-table-column prop="deviceAddress" label="设备地址" align="center" width=""></el-table-column>
         <el-table-column align="center" label="操作" width="200">
           <template #default="scope">
-            <el-button type="text" size="small" style="color: #409eff" @click.prevent="Update(scope.row)"
-              :disabled="store.state.authorities.indexOf('修改') == -1">
+            <el-button type="primary" size="small" @click.prevent="Update(scope.row)"
+              :disabled="store.state.authorities.indexOf('修改') == -1" link>
               编辑
             </el-button>
             <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red"
               title="确定删除?" @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
               <template #reference>
-                <el-button type="text" size="small" style="color: red"
-                  :disabled="store.state.authorities.indexOf('删除') == -1">
+                <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link>
                   删除
                 </el-button>
               </template>
             </el-popconfirm>
-            <el-button @click="clone(scope.row)" type="text" size="small" style="color: #409eff">
-              克隆
-            </el-button>
+            <el-button @click="clone(scope.row)" type="primary" size="small" link> 克隆 </el-button>
           </template>
         </el-table-column>
       </el-table>

src/views/deviceManage/powerEquip/monitoring/deviceDetails.vue

@@ -13,7 +13,7 @@
         <!-- <span class="firstTopLeftTitle">设备或编号</span>
         <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"></el-input> -->
 
-        <el-button type="primary" icon="el-icon-search" class="search-button" @click="listSelect()"
+        <el-button type="primary" icon="Search" class="search-button" @click="listSelect()"
           :disabled="store.state.authorities.indexOf('查询') == -1">
           搜索
         </el-button>
@@ -31,16 +31,14 @@
       <el-table-column prop="qualityAnalysis" label="电能质量分析" align="center" width=""></el-table-column>
       <el-table-column label="操作" align="center" width="150">
         <template #default="scope">
-          <el-button type="text" size="small" style="color: #409eff" @click.prevent="editRow(scope.row)"
-            :disabled="store.state.authorities.indexOf('修改') == -1">
+          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1" link>
             编辑
           </el-button>
-          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red" title="确定删除?"
+          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="Info" icon-color="red" title="确定删除?"
             @confirm="handleDelete(scope.row)" @cancel="cancelEvent">
             <template #reference>
-              <el-button type="text" size="small" style="color: red"
-                :disabled="store.state.authorities.indexOf('删除') == -1">
-                删除
+              <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link> 删除
               </el-button>
             </template>
           </el-popconfirm>
@@ -48,7 +46,7 @@
       </el-table-column>
       <el-table-column label="变量" align="center" width="100">
         <template #default="scope">
-          <el-button type="text" size="small" style="color: #409eff" @click.prevent="variableList(scope.row)">
+          <el-button type="primary" size="small" @click.prevent="variableList(scope.row)" link>
             变量列表
           </el-button>
         </template>

src/views/deviceManage/powerEquip/monitoring/index.vue

@@ -24,11 +24,11 @@
                             :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
                     </div>
 
-                    <el-button type="primary" icon="el-icon-search" class="search-button" @click="monitorDeviceList()"
+                    <el-button type="primary" icon="Search" class="search-button" @click="monitorDeviceList()"
                         :disabled="store.state.authorities.indexOf('查询') == -1">
                         搜索
                     </el-button>
-                    <el-button class="search-button" icon="el-icon-plus" type="success" @click="addItem()"
+                    <el-button class="search-button" icon="Plus" type="success" @click="addItem()"
                         :disabled="store.state.authorities.indexOf('新增') == -1">
                         新增
                     </el-button>

src/views/deviceManage/powerEquip/videoEquip/index.vue

@@ -2,28 +2,20 @@
   <div class="video">
     <div class="videoTop">
       <div class="videoTopLeft">
-        选择站点:
+        选择站点：
         <el-select filterable v-model="store.state.siteId" placeholder="请选择" style="width: 250px; margin-right: 20px"
           :disabled="store.state.authorities.indexOf('查询') == -1">
           <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
         </el-select>
         <el-input placeholder="搜索设备名" v-model="filterText" class="videoTopLeftInput"
           :disabled="store.state.authorities.indexOf('查询') == -1">
-          <!-- <template #suffix>
-            <i class="el-icon-search el-input__icon"></i>
-          </template> -->
         </el-input>
 
-        <el-button type="primary" icon="el-icon-search" class="search-button" @click="searchData()"
+        <el-button type="primary" icon="Search" class="search-button" @click="searchData()"
           :disabled="store.state.authorities.indexOf('查询') == -1">
           搜索
         </el-button>
-        <!-- <el-button
-          class="search-button"
-          icon="el-icon-plus"
-          type="success"
-          @click="Insert()"
-        >
+        <!-- <el-button class="search-button" icon="Plus" type="success" @click="Insert()">
           新增
         </el-button> -->
       </div>

src/views/siteManage/addSiteCom.vue

@@ -38,6 +38,7 @@ const props = defineProps({
 const emit = defineEmits(['changeFather', 'handleSelect']);
 const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
 const dialogTitle = ref(null)
 const dialogVisible = ref(false)
 const state = reactive({
@@ -52,9 +53,6 @@ const state = reactive({
 const { form, rules, listData } = toRefs(state)
 
 
-
-const formInfo = ref(null)
-
 // 弹窗打开
 function openDialog(event) {
   dialogTitle.value = event.dialogTitle

src/views/siteManage/basicInfo/index.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="siteManage-main basic-info-page">
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="formInfo"
-      label-width="110px"
-      class="demo-ruleForm"
-    >
+    <el-form :model="ruleForm" :rules="rules" ref="formInfo" label-width="110px" class="demo-ruleForm">
       <el-row style="min-width: 1100px">
         <el-col :span="8" :gutter="20">
           <div class="grid-content bg-purple">
@@ -21,26 +15,13 @@
               <el-input v-model="ruleForm.userCompany"></el-input>
             </el-form-item>
 
-            <el-form-item
-              label="投运时间："
-              prop="operationTime"
-              style="margin-top: 0px"
-            >
-              <el-date-picker
-                v-model="ruleForm.operationTime"
-                style="width: 100%"
-                type="date"
-                placeholder="选择日期时间"
-                 @change="comPareTime(1)"
-              ></el-date-picker>
+            <el-form-item label="投运时间：" prop="operationTime" style="margin-top: 0px">
+              <el-date-picker v-model="ruleForm.operationTime" style="width: 100%" type="date" placeholder="选择日期时间"
+                @change="comPareTime(1)"></el-date-picker>
             </el-form-item>
             <el-form-item label="服务截止：" prop="serviceDeadline">
-              <el-date-picker
-                v-model="ruleForm.serviceDeadline"
-                type="date"
-                placeholder="选择日期时间"
-                @change="comPareTime(2)"
-              ></el-date-picker>
+              <el-date-picker v-model="ruleForm.serviceDeadline" type="date" placeholder="选择日期时间"
+                @change="comPareTime(2)"></el-date-picker>
             </el-form-item>
 
             <el-form-item label="装机容量：" prop="installedCapacity">
@@ -68,29 +49,19 @@
 
             <el-form-item label="所属台区：" prop="stationAreaId">
               <el-select v-model="ruleForm.stationAreaId" placeholder="请选择">
-                <el-option
-                  v-for="(item, index) in platFormData"
-                  :key="index"
-                  :label="item.platformAreaName"
-                  :value="item.id"
-                ></el-option>
+                <el-option v-for="(item, index) in platFormData" :key="index" :label="item.platformAreaName"
+                  :value="item.id"></el-option>
               </el-select>
             </el-form-item>
 
             <el-form-item label="站点坐标：" prop="longitude">
               <el-input v-model="ruleForm.longitude" placeholder="请输入经度">
-                <i
-                  :default-slot="suffix"
-                  class="el-input__icon el-icon-location-outline"
-                ></i>
+                <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
               </el-input>
             </el-form-item>
             <el-form-item label="" prop="latitude">
               <el-input v-model="ruleForm.latitude" placeholder="请输入维度">
-                <i
-                  :default-slot="suffix"
-                  class="el-input__icon el-icon-location-outline"
-                ></i>
+                <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
               </el-input>
             </el-form-item>
           </div>
@@ -118,12 +89,8 @@
           </el-form-item>
           <el-form-item label="所属线路" prop="routeId">
             <el-select v-model="ruleForm.routeId" placeholder="请选择">
-              <el-option
-                v-for="(item, index) in routeDropData"
-                :key="index"
-                :label="item.routeName"
-                :value="item.id"
-              ></el-option>
+              <el-option v-for="(item, index) in routeDropData" :key="index" :label="item.routeName"
+                :value="item.id"></el-option>
             </el-select>
           </el-form-item>
 
@@ -132,45 +99,29 @@
           <div class="blockTitle mt-60 mb-20">动态属性</div>
           <el-form-item label="故障动态：" prop="faultStatus">
             <el-select v-model="ruleForm.faultStatus" placeholder="请选择">
-              <el-option
-                v-for="(item, index) in dropData2"
-                :key="index"
-                :label="item.variableName"
-                :value="item.variableCoding"
-              ></el-option>
+              <el-option v-for="(item, index) in dropData2" :key="index" :label="item.variableName"
+                :value="item.variableCoding"></el-option>
             </el-select>
           </el-form-item>
 
           <el-form-item label="实时负荷：" prop="realTimeLoad">
             <el-select v-model="ruleForm.realTimeLoad" placeholder="请选择">
-              <el-option
-                v-for="(item, index) in dropData"
-                :key="index"
-                :label="item.variableName"
-                :value="item.variableCoding"
-              ></el-option>
+              <el-option v-for="(item, index) in dropData" :key="index" :label="item.variableName"
+                :value="item.variableCoding"></el-option>
             </el-select>
           </el-form-item>
 
           <el-form-item label="总用电量：" prop="totalElectricity">
             <el-select v-model="ruleForm.totalElectricity" placeholder="请选择">
-              <el-option
-                v-for="(item, index) in dropData"
-                :key="index"
-                :label="item.variableName"
-                :value="item.variableCoding"
-              ></el-option>
+              <el-option v-for="(item, index) in dropData" :key="index" :label="item.variableName"
+                :value="item.variableCoding"></el-option>
             </el-select>
           </el-form-item>
 
           <el-form-item label="功率因数：" prop="powerFactor">
             <el-select v-model="ruleForm.powerFactor" placeholder="请选择">
-              <el-option
-                v-for="(item, index) in dropData"
-                :key="index"
-                :label="item.variableName"
-                :value="item.variableCoding"
-              ></el-option>
+              <el-option v-for="(item, index) in dropData" :key="index" :label="item.variableName"
+                :value="item.variableCoding"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -181,19 +132,11 @@
               <div class="blockTitle mb-20">站点照片</div>
               <!-- <img v-if="ruleForm.value.sitePictureOne" :src="ruleForm.value.sitePictureOne" alt=""> -->
               <el-form-item label="选择文件：" prop="delivery">
-                <el-upload
-                  :action="uploadUrl"
-                  :on-success="handleUpAvatar"
-                  :on-remove="handleRemove"
-                  :show-file-list="true"
-                  list-type="picture-card"
-                  :limit="3"
-                  :file-list="fileListImages"
-                  :on-preview="handlePictureCardPreview"
-                  :headers="{ accessToken: [accessToken] }"
-                  :on-exceed="overLength"
-                >
-                  <i class="el-icon-plus"></i>
+                <el-upload :action="uploadUrl" :on-success="handleUpAvatar" :on-remove="handleRemove"
+                  :show-file-list="true" list-type="picture-card" :limit="3" :file-list="fileListImages"
+                  :on-preview="handlePictureCardPreview" :headers="{ accessToken: [accessToken] }"
+                  :on-exceed="overLength">
+                  <Plus style="width: 2em; height: 2em;" />
                 </el-upload>
                 <el-dialog v-model="dialogVisible" width="400px">
                   <img style="width: 100%" :src="dialogImageUrl" alt="" />
@@ -216,11 +159,8 @@
             </div>
             <br />
             <el-form-item>
-              <el-button
-                type="primary"
-                @click="submitForm('formInfo')"
-                :disabled="isDisable||store.state.authorities.indexOf('修改')==-1"
-              >
+              <el-button type="primary" @click="submitForm('formInfo')"
+                :disabled="isDisable || store.state.authorities.indexOf('修改') == -1">
                 保存
               </el-button>
               <!-- <el-button @click="resetForm('formInfo')">取消</el-button> -->
@@ -238,7 +178,7 @@ import * as api from '@/api/siteManage/basicInfo'
 import { ElMessage } from 'element-plus'
 
 import { useStore } from 'vuex'
-import { parseTime, validatorPhone,isNumber,isLatitude,isLongitude} from '@/utils'
+import { parseTime, validatorPhone, isNumber, isLatitude, isLongitude } from '@/utils'
 // import { isNumber } from '@/utils/validate.js'
 
 export default defineComponent({
@@ -290,28 +230,12 @@ export default defineComponent({
       })
     }
 
-    // function uniqueArr(arr) {
-    //   for (var i = 0; i < arr.length; i++) {
-    //     for (var j = i + 1; j < arr.length; j++) {
-    //       if (arr[i].name == arr[j].name) {
-    //         alert('不支持同名文件上传')
-    //         arr.splice(j, 1)
-    //         j--
-    //       }
-    //     }
-    //   }
-    //   return arr
-    // }
-
-  
-
     //上传成功的回调
     function handleUpAvatar(res) {
       // console.log(newArray.value.indexOf(res.data))
       // if(newArray.value.indexOf(res.data)!=-1){
       //   alert('上传重复')
       //   return
-
       // };
 
       dataSetRe.value = []
@@ -319,7 +243,6 @@ export default defineComponent({
       newArray.value = []
 
       dataSet.fileList.push(res.data)
-
       dataSet.fileList.forEach(function (item) {
         dataSetRe.value.push({ url: fileImages.value + item })
       })
@@ -333,14 +256,11 @@ export default defineComponent({
       fileListImages.value.forEach(function (item) {
         newArray.value.push(item.url.substring(27))
       })
-
-   
     }
 
     //删除照片
     function handleRemove(res) {
       newArray.value = []
-   
 
       Array.prototype.indexOf = function (val) {
         for (var i = 0; i < this.length; i++) {
@@ -367,22 +287,22 @@ export default defineComponent({
     function resetForm() {
       formInfo.value.clearValidate()
     }
-    function comPareTime(type){
+    function comPareTime(type) {
       console.log(type)
-      var start=ruleForm.value.operationTime;
-      var end=ruleForm.value.serviceDeadline;
+      var start = ruleForm.value.operationTime;
+      var end = ruleForm.value.serviceDeadline;
       console.log(new Date(start).getTime())
-        console.log(new Date(end).getTime())
-      if(new Date(start).getTime()>new Date(end).getTime()){
-       
-        if(type==1){
-            ElMessage.warning('运投时间不能大于服务截止，请重新选择！')
-          ruleForm.value.operationTime=''
-        }else{
-           ElMessage.warning('服务截止不能小于运投时间，请重新选择！')
-          ruleForm.value.serviceDeadline=''
+      console.log(new Date(end).getTime())
+      if (new Date(start).getTime() > new Date(end).getTime()) {
+
+        if (type == 1) {
+          ElMessage.warning('运投时间不能大于服务截止，请重新选择！')
+          ruleForm.value.operationTime = ''
+        } else {
+          ElMessage.warning('服务截止不能小于运投时间，请重新选择！')
+          ruleForm.value.serviceDeadline = ''
         }
-       
+
       }
     }
 
@@ -443,7 +363,7 @@ export default defineComponent({
             : ''
           ruleForm.value.demolitionStandardCoal
             ? (ruleForm.value.demolitionStandardCoal =
-                requset.data[0].demolitionStandardCoal.toString())
+              requset.data[0].demolitionStandardCoal.toString())
             : ''
 
           if (requset.data[0].sitePictureOne) {
@@ -465,7 +385,7 @@ export default defineComponent({
             ruleForm.value.siteName = store.state.basicInfoSiteName //站点名称重新赋值
           }
 
-       
+
         } else {
           ElMessage.error(requset.msg)
         }
@@ -474,7 +394,7 @@ export default defineComponent({
 
     //表单提交
     function submitForm() {
-    
+
       ruleForm.value.sitePictureOne = newArray.value[0] ? newArray.value[0] : ''
       ruleForm.value.sitePictureTwo = newArray.value[1] ? newArray.value[1] : ''
       ruleForm.value.sitePictureThree = newArray.value[2]
@@ -483,13 +403,13 @@ export default defineComponent({
 
       ruleForm.value.operationTime
         ? (ruleForm.value.operationTime = parseTime(
-            ruleForm.value.operationTime
-          ).substring(0, 10))
+          ruleForm.value.operationTime
+        ).substring(0, 10))
         : ''
       ruleForm.value.serviceDeadline
         ? (ruleForm.value.serviceDeadline = parseTime(
-            ruleForm.value.serviceDeadline
-          ).substring(0, 10))
+          ruleForm.value.serviceDeadline
+        ).substring(0, 10))
         : ''
 
       formInfo.value.validate((valid) => {
@@ -560,7 +480,7 @@ export default defineComponent({
               }, 5000)
 
               formStatus.value = '修改'
-              context.emit('func',params.id)
+              context.emit('func', params.id)
             } else {
               ElMessage.error(requset.msg)
             }
@@ -576,23 +496,17 @@ export default defineComponent({
     watch(
       () => props.siteId,
       (newVal) => {
-        isDisable.value=false
-       
+        isDisable.value = false
+
         newVal
         if (props.activeName == 'first') {
           dataSet.fileList = []
           newArray.value = []
 
           resetForm()
-        
-
-          
-
           getSite()
           dynamicPropertiesDroplist(2)
           dynamicPropertiesDroplist(1)
-
-          
         }
       }
     )
@@ -604,7 +518,6 @@ export default defineComponent({
           newArray.value = []
 
           resetForm()
-
           getSite()
           dynamicPropertiesDroplist(2)
           dynamicPropertiesDroplist(1)
@@ -680,7 +593,7 @@ export default defineComponent({
         ],
         siteType: [
           { required: true, message: '请输入站点类型', trigger: 'blur' },
-          { pattern: /^[1-9][\d]*$/ , message: '请输入正整数' }
+          { pattern: /^[1-9][\d]*$/, message: '请输入正整数' }
         ],
         userCompany: [
           { required: true, message: '请输入用户公司', trigger: 'blur' },
@@ -707,7 +620,7 @@ export default defineComponent({
         ],
         voltageLevel: [
           { required: true, message: '请输入电压等级', trigger: 'blur' },
-         {
+          {
             validator: isNumber,
             message: '请输入数字',
             trigger: 'blur',
@@ -732,23 +645,23 @@ export default defineComponent({
             message: '请输入正确经度',
             trigger: 'blur',
           },
-          ],
+        ],
         latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' },
-         {
-            validator: isLatitude,
-            message: '请输入正确维度',
-            trigger: 'blur',
-          },],
+        {
+          validator: isLatitude,
+          message: '请输入正确维度',
+          trigger: 'blur',
+        },],
         demolitionStandardCoal1: [
           { required: true, message: '请输入折标准煤', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,7})?$/ , message: '请输入数字，可保留7位小数' }
+          { pattern: /^\d+(\.\d{1,7})?$/, message: '请输入数字，可保留7位小数' }
         ],
         routeId: [
           { required: true, message: '选择所属线路', trigger: 'change' },
         ],
         rheologicalChange: [
           { required: true, message: '请输入流变变比', trigger: 'blur' },
-         {
+          {
             validator: isNumber,
             message: '请输入数字',
             trigger: 'blur',
@@ -814,10 +727,12 @@ export default defineComponent({
 
 <style lang="scss">
 .basic-info-page {
+
   .el-date-editor.el-input,
   .el-date-editor.el-input__inner {
     width: 100% !important;
   }
+
   // .el-icon-zoom-in {
   //   display: none;
   // }

src/views/siteManage/variableList/index.vue

@@ -26,7 +26,7 @@
             <el-radio-button label="year" :value="3">参数量</el-radio-button>
           </el-radio-group>
 
-          <el-input v-model="variableName" placeholder="搜索变量名称" style="width: 200px; margin-left: 20px"
+          <el-input v-model="variableName" placeholder="搜索变量名称" style="width: 200px; margin:0 20px"
             :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
 
           <el-button type="primary" icon="Search" class="search-button" @click="query()"
@@ -63,15 +63,14 @@
       <el-table-column prop="saveCycle" label="存盘周期" width=""></el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
-          <el-button type="text" size="small" @click.prevent="editRow(scope.row)"
-            :disabled="store.state.authorities.indexOf('修改') == -1">
+          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1" link>
             修改
           </el-button>
           <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red" title="确定删除?"
             @confirm="handleDelete(scope.row)" @cancel="cancelEvent">
             <template #reference>
-              <el-button type="text" size="small" class="delete-text"
-                :disabled="store.state.authorities.indexOf('删除') == -1">
+              <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link>
                 删除
               </el-button>
             </template>

src/views/stationManage/dialogComponent.vue

@@ -1,19 +1,7 @@
 <template>
   <div class="parentBlock">
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="640px"
-      @close="closeDialog()"
-      @open="open"
-    >
-      <el-form
-        ref="formInfo"
-        :model="form"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
-      >
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="640px" @close="closeDialog()">
+      <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="100px" :rules="rules">
         <el-form-item label="台区名称：" prop="platformAreaName">
           <el-input v-model="form.platformAreaName"></el-input>
         </el-form-item>
@@ -24,50 +12,21 @@
           <el-input v-model="form.platformAreaAddress"></el-input>
         </el-form-item>
         <!-- <el-form-item label="站点列表:" prop="siteList">
-          <el-select
-            v-model="form.siteList"
-            multiple
-            filterable
-            collapse-tags
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
+          <el-select v-model="form.siteList" multiple filterable collapse-tags placeholder="请选择">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
         </el-form-item> -->
 
-        <el-form-item
-          label="已勾选："
-          prop="siteCount"
-          v-if="dialogTitle == '编辑'"
-        >
-          <el-input
-            v-model="form.siteCount"
-            style="width: 200px"
-            disabled
-          ></el-input>
+        <el-form-item label="已勾选：" prop="siteCount" v-if="dialogTitle == '编辑'">
+          <el-input v-model="form.siteCount" style="width: 200px" disabled></el-input>
           个站点
         </el-form-item>
-        <el-form-item
-          label="共挂载："
-          prop="deviceCount"
-          v-if="dialogTitle == '编辑'"
-        >
-          <el-input
-            v-model="form.deviceCount"
-            style="width: 200px"
-            disabled
-          ></el-input>
+        <el-form-item label="共挂载：" prop="deviceCount" v-if="dialogTitle == '编辑'">
+          <el-input v-model="form.deviceCount" style="width: 200px" disabled></el-input>
           个设备
         </el-form-item>
-        <br />
-        <br />
-        <br />
-        <div style="text-align: right">
+
+        <div style="margin-top:30px;text-align: right">
           <el-button @click="closeDialog()">取消</el-button>
           <el-button type="primary" @click="submitForm()">保存</el-button>
         </div>
@@ -76,168 +35,123 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, watchEffect } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/stationManage/index.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-  },
-  setup(props, context) {
-    context
-
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
-
-    const form = ref([])
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      console.log(form.value)
-      form.value = props.itemInfo.value
-       console.log(form.value)
-    }
-
-    const options = [
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['closeDialog']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  form: {},
+  rules: {
+    platformAreaName: [
+      // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+      { required: true, message: '请输入台区名称', trigger: 'blur' },
       {
-        value: '选项1',
-        label: '站点一',
+        max: 15,
+        message: '台区名称最多输入15个字符',
+        trigger: 'blur',
       },
+    ],
+    platformAreaCode: [
+      { required: true, message: '请输入台区编号', trigger: 'blur' },
       {
-        value: '选项2',
-        label: '站点二',
+        max: 15,
+        message: '台区编号最多输入15个字符',
+        trigger: 'blur',
       },
+    ],
+    platformAreaAddress: [
+      { required: true, message: '请输入台区地址', trigger: 'blur' },
       {
-        value: '选项3',
-        label: '站点三',
+        max: 15,
+        message: '台区地址最多输入15个字符',
+        trigger: 'blur',
       },
-      {
-        value: '选项4',
-        label: '站点四',
-      },
-      {
-        value: '选项5',
-        label: '站点五',
-      },
-    ]
-
-    // 关闭弹框
-    const closeDialog = () => {
-      resetForm()
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
-    function resetForm() {
-      formInfo.value.resetFields()
-    }
+    ],
+    // siteList: [
+    //   { required: true, message: '请选择站点列表', trigger: 'change' },
+    // ],
+    // siteCount: [
+    //   { required: true, message: '请输入已选站点个数', trigger: 'blur' },
+    //   { trigger: 'blur' },
+    // ],
+    // deviceCount: [
+    //   { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
+    //   { trigger: 'blur' },
+    // ],
+  },
+})
+const { form, rules } = toRefs(state)
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+  state.form = event.tableItem
+  dialogVisible.value = true
+}
 
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    }
+// 关闭弹框
+function closeDialog() {
+  formInfo.value.resetFields()
+  dialogVisible.value = false
+}
 
-    // 保存-修改操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          if (props.dialogTitle === '新增') {
-            console.log(form.value)
-            api.platformAreaAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+// 保存-修改操作
+function submitForm() {
+  formInfo.value.validate((valid) => {
+    if (valid) {
+      if (dialogTitle.value === '新增') {
+        api.platformAreaAdd(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
             })
+            emit('handleSelect', false)
+            closeDialog()
           } else {
-            api.platformAreaUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+            ElMessage.error(requset.msg)
+          }
+        })
+      } else {
+        api.platformAreaUpdate(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
             })
+            emit('handleSelect', false)
+            closeDialog()
+          } else {
+            ElMessage.error(requset.msg)
           }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+        })
+      }
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-    return {
-      closeDialog,
-      dialogVisible,
-      options,
-      roleValid,
-      formInfo,
-      form,
-      open,
-      submitForm,
-      rules: {
-        platformAreaName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: '请输入台区名称', trigger: 'blur' },
-          {
-            max: 15,
-            message: '台区名称最多输入15个字符',
-            trigger: 'blur',
-          },
-        ],
-        platformAreaCode: [
-          { required: true, message: '请输入台区编号', trigger: 'blur' },
-          {
-            max: 15,
-            message: '台区编号最多输入15个字符',
-            trigger: 'blur',
-          },
-        ],
-        platformAreaAddress: [
-          { required: true, message: '请输入台区地址', trigger: 'blur' },
-          {
-            max: 15,
-            message: '台区地址最多输入15个字符',
-            trigger: 'blur',
-          },
-        ],
-        // siteList: [
-        //   { required: true, message: '请选择站点列表', trigger: 'change' },
-        // ],
-        // siteCount: [
-        //   { required: true, message: '请输入已选站点个数', trigger: 'blur' },
-        //   { trigger: 'blur' },
-        // ],
-        // deviceCount: [
-        //   { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
-        //   { trigger: 'blur' },
-        // ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">

src/views/stationManage/index.vue

@@ -3,60 +3,32 @@
     <div class="app-container" v-if="!pageShow">
       <!-- 筛选start -->
       <div class="mb-20">所有台区</div>
-      <div class="filter-container mb-10">
-        <div>
-          <div class="filter-item" style="margin-right: 0">
-            台区：
-            <el-input
-              v-model="platformAreaName"
-              placeholder="请输入台区名称"
-              style="width: 200px"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-input>
-          </div>
+      <div class="filter-container mb-10" style="justify-content: left;">
+        <div class="filter-item">
+          <div class="title"> 台区：</div>
+          <el-input v-model="platformAreaName" placeholder="请输入台区名称" style="width: 200px"
+            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+        </div>
 
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            class="search-button"
-            @click="platformList()"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
-            搜索
-          </el-button>
+        <el-button type="primary" icon="Search" class="search-button" @click="platformList()"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          搜索
+        </el-button>
+        <el-button :disabled="store.state.authorities.indexOf('新增') == -1" icon="Plus" type="success" @click="addItem()">
+          新增
+        </el-button>
 
-          <el-button :disabled="store.state.authorities.indexOf('新增')==-1" icon="el-icon-plus" type="success" @click="addItem()">
-            新增
-          </el-button>
-        </div>
       </div>
       <!-- 筛选end -->
 
       <!-- 表格start -->
-      <el-table :data="tableData" border stripe :header-cell-style="headClass">
-        <el-table-column
-          fixed
-          prop="platformAreaName"
-          label="台区名称"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="platformAreaCode"
-          label="台区编号"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="platformAreaAddress"
-          label="台区地址"
-          width=""
-        ></el-table-column>
+      <el-table :data="tableData" :header-cell-style="{ background: '#FAFAFA' }" border stripe>
+        <el-table-column fixed prop="platformAreaName" label="台区名称" width=""></el-table-column>
+        <el-table-column prop="platformAreaCode" label="台区编号" width=""></el-table-column>
+        <el-table-column prop="platformAreaAddress" label="台区地址" width=""></el-table-column>
         <el-table-column prop="siteCount" label="站点数量" width="">
           <template #default="scope">
-            <span
-              @click="goSiteList(scope.row)"
-              v-if="scope.row.siteCount"
-              style="cursor: pointer; color: #0284e8"
-            >
+            <span @click="goSiteList(scope.row)" v-if="scope.row.siteCount" style="cursor: pointer; color: #0284e8">
               {{ scope.row.siteCount }}
             </span>
             <span v-else>{{ scope.row.siteCount }}</span>
@@ -69,26 +41,14 @@
         </el-table-column>
         <el-table-column fixed="right" label="操作" width="250">
           <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              @click.prevent="editRow(scope.row)"
-              :disabled="store.state.authorities.indexOf('修改')==-1"
-            >
+            <el-button type="primary" size="small" @click.prevent="editRow(scope.row)"
+              :disabled="store.state.authorities.indexOf('修改') == -1" link>
               编辑
             </el-button>
-            <el-popconfirm
-              confirm-button-text="是"
-              cancel-button-text="否"
-              icon="el-icon-info"
-              icon-color="red"
-              title="确定删除?"
-              @confirm="handleDelete(scope.row)"
-              @cancel="cancelEvent"
-            >
+            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red"
+              title="确定删除?" @confirm="handleDelete(scope.row)" @cancel="cancelEvent">
               <template #reference>
-                <el-button type="text" size="small" class="delete-text" :disabled="store.state.authorities.indexOf('删除')==-1">
-                  
+                <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link>
                   删除
                 </el-button>
               </template>
@@ -98,205 +58,135 @@
       </el-table>
       <!-- 表格end -->
 
-      <!-- 分页start -->
       <div class="paginationBlock">
-        <el-pagination
-          v-model:currentPage="currentPage"
-          :page-sizes="[15, 20, 25, 30]"
-          :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          background
-        ></el-pagination>
+        <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+          @current-change="handleCurrentChange" background></el-pagination>
       </div>
-      <!-- 分页end -->
 
-      <!--弹框组件开始-----------------------start-->
-      <dialog-component
-        :dialogTitle="dialogTitle"
-        :itemInfo="tableItem"
-        @closeDialog="closeDialog"
-        :flag="showDialog"
-      ></dialog-component>
-      <!--弹框组件开始-----------------------end-->
+      <!-- 新增编辑 -->
+      <dialog-component ref="dialogComponentRef" @handleSelect="platformList"></dialog-component>
     </div>
 
-    <!-- 站点设备列表start -->
-    <site-list
-      v-else
-      :pageShow="pageShow"
-      :goSiteListParam="goSiteListParam"
-      @func="getMsgFormSon"
-    ></site-list>
-    <!-- 站点设备列表end -->
+    <!-- 站点设备列表 -->
+    <site-list v-else :goSiteListParam="goSiteListParam" @func="getMsgFormSon"></site-list>
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, reactive, onMounted } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/stationManage/index.js'
-import { ElMessage } from 'element-plus'
-
+/*----------------------------------组件引入-----------------------------------*/
 import DialogComponent from './dialogComponent'
 import siteList from './siteList'
-import { useStore } from 'vuex'
-
-export default defineComponent({
-  components: { DialogComponent, siteList },
-  setup(props, context) {
-    const store = useStore()
-    const total = ref(0)
-    const pageSize = ref(10)
-    const currentPage = ref(1)
-    const siteCount = ref(0)
-    const deviceCount = ref(0)
-    const goSiteListParam = ref('')
-    const platformAreaName = ref('')
-    const pageShow = ref(false)
-    const showDialog = ref(false)
-    const tableData = ref([])
-
-    function goSiteList(params) {
-      goSiteListParam.value = params.id
-      pageShow.value = !pageShow.value
-    }
-    const getMsgFormSon = () => {
-      pageShow.value = !pageShow.value
-    }
-
-    const tableItem = reactive([])
-    const dialogTitle = ref('')
-
-    //电力监测设备列表
-    function platformList() {
-      api
-        .platformList({
-          size: pageSize.value,
-          current: currentPage.value,
-          platformAreaName: platformAreaName.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.records
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    // 添加操作
-    const addItem = () => {
-      tableItem.value = {
-        platformAreaName: '',
-        platformAreaCode: '',
-        platformAreaAddress: '',
-      }
-      dialogTitle.value = '新增'
-      showDialog.value = true
-    }
-
-    // 编辑操作
-    const editRow = (row) => {
-      api
-        .platformAreaListOne({
-          id: row.id,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            siteCount.value = requset.data[0].siteCount
-            deviceCount.value = requset.data[0].deviceCount
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-
-      tableItem.value = {
-        id: row.id,
-        platformAreaName: row.platformAreaName,
-        platformAreaCode: row.platformAreaCode,
-        platformAreaAddress: row.platformAreaAddress,
-        siteCount: siteCount.value,
-        deviceCount: deviceCount.value,
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['func']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tableData: [],
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  platformAreaName: "",
+})
+const { tableData, total, pageSize, currentPage, platformAreaName } = toRefs(state)
+
+
+const goSiteListParam = ref('')
+const pageShow = ref(false)
+
+function goSiteList(params) {
+  goSiteListParam.value = params.id
+  pageShow.value = !pageShow.value
+}
+const getMsgFormSon = () => {
+  pageShow.value = !pageShow.value
+}
+
+//电力监测设备列表
+function platformList() {
+  api
+    .platformList({
+      size: pageSize.value,
+      current: currentPage.value,
+      platformAreaName: platformAreaName.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        tableData.value = requset.data.records
+        total.value = requset.data.total
+      } else {
+        ElMessage.error(requset.msg)
       }
-      dialogTitle.value = '编辑'
-      showDialog.value = true
-    }
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
-      platformList()
-    }
-
-    //删除 是否删除  ---- 是
-    const handleDelete = (row) => {
-      api.platformAreaDel({ id: row.id }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          platformList()
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
-
-    onMounted(() => {
-      platformList()
     })
-
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
+}
+
+// 添加操作
+function addItem() {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '新增',
+    tableItem: {
+      platformAreaName: '',
+      platformAreaCode: '',
+      platformAreaAddress: '',
     }
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      platformList()
+  })
+}
+
+// 编辑操作
+function editRow(row) {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '编辑',
+    tableItem: {
+      id: row.id,
+      platformAreaName: row.platformAreaName,
+      platformAreaCode: row.platformAreaCode,
+      platformAreaAddress: row.platformAreaAddress,
+      siteCount: row.siteCount,
+      deviceCount: row.siteCount
     }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
+  })
+}
+
+//删除 是否删除  ---- 是
+const handleDelete = (row) => {
+  api.platformAreaDel({ id: row.id }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      ElMessage.success({
+        message: '删除成功',
+        type: 'success',
+      })
       platformList()
+    } else {
+      ElMessage.error(requset.msg)
     }
-    return {
-      tableData,
-      platformAreaName,
-      pageShow,
-      dialogTitle,
-      showDialog,
-      props,
-      context,
-      tableItem,
-      siteCount,
-      deviceCount,
-      goSiteListParam,
-      total,
-      pageSize,
-      currentPage,
-
-      platformList,
-      goSiteList,
-      getMsgFormSon,
-      headClass,
-      addItem,
-      editRow,
-      closeDialog,
-      handleDelete,
-      cancelEvent,
-      handleSizeChange,
-      handleCurrentChange,
-
-      store,
-    }
-  },
+  })
+}
+
+//是否删除  ---- 否
+const cancelEvent = () => {
+  console.log('cancel!')
+}
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  platformList()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  platformList()
+}
+
+onMounted(() => {
+  platformList()
 })
 </script>
 

src/views/stationManage/siteList.vue

@@ -1,74 +1,29 @@
 <template>
   <div class="app-container">
-    <!-- 返回start -->
     <div class="siteTitle">
       <el-button class="goBack" @click="goBack">返回</el-button>
       台区1-站点列表
     </div>
-    <!-- 返回end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
-      <el-table-column
-        fixed
-        prop="siteName"
-        label="站点名称"
-        width=""
-      ></el-table-column>
-      <!-- <el-table-column prop="stationStatus" label="状态" width="">
-        <template #default="scope">
-          <el-avatar
-            class="status"
-            :class="[scope.row.deviceStatusr == '离线' ? 'offline' : 'online']"
-          ></el-avatar>
-        </template>
-      </el-table-column> -->
-      <el-table-column
-        prop="siteAddress"
-        label="站点位置"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="userName"
-        label="联系人"
-        width=""
-      >
+    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+      <el-table-column prop="siteName" label="站点名称" width="" fixed></el-table-column>
+      <el-table-column prop="siteAddress" label="站点位置" width=""></el-table-column>
+      <el-table-column prop="userName" label="联系人" width="">
         <template #default="scope">
           <span>
             {{
               scope.row.userName
-                ? scope.row.userName
-                : '--'
+              ? scope.row.userName
+              : '--'
             }}
           </span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="phone"
-        label="手机号码"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="installedCapacity"
-        label="装机容量"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="rheologicalChange"
-        label="流变变比"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="routeName"
-        label="线路名称"
-        width=""
-      ></el-table-column>
+      <el-table-column prop="phone" label="手机号码" width=""></el-table-column>
+      <el-table-column prop="installedCapacity" label="装机容量" width=""></el-table-column>
+      <el-table-column prop="rheologicalChange" label="流变变比" width=""></el-table-column>
+      <el-table-column prop="routeName" label="线路名称" width=""></el-table-column>
       <!-- <el-table-column fixed="right" label="操作" width="250">
         <template #default="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">
@@ -81,75 +36,51 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/stationManage/index.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'SiteList',
-  props: ['pageShow', 'goSiteListParam'],
-
-  setup(props, context) {
-    const showDialog = ref(false)
-    const input = ref('请输入台区名称')
-    const tableData = ref([])
-    const goBack = () => {
-      context.emit('func')
-    }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-
-    //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex,columnIndex
-      // if (columnIndex === 1) {
-      //   return `color:#04F21C`
-      // } else {
-      //   return ''
-      // }
-    }
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  goSiteListParam: Object
+}) //数据双向绑定
+const emit = defineEmits(['func']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tableData: [],
+})
+const { tableData } = toRefs(state)
 
-    //查看
-    // const handleClick = (row) => {
-    //   alert('查看对应站点（页面跳转）')
-    //   console.log(row)
-    // }
 
-    //站点设备列表
-    function siteDeviceList() {
-      api
-        .siteDeviceList({ stationAreaId: props.goSiteListParam })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            // console.log(requset.data)
-            tableData.value = requset.data
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+function goBack() {
+  emit('func')
+}
 
-    onMounted(() => {
-      siteDeviceList()
+//站点设备列表
+function siteDeviceList() {
+  api
+    .siteDeviceList({ stationAreaId: props.goSiteListParam })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        // console.log(requset.data)
+        tableData.value = requset.data
+      } else {
+        ElMessage.error(requset.msg)
+      }
     })
+}
 
-    return {
-      tableData,
-      input,
-      showDialog,
-
-      headClass,
-      cellStyle,
-      goBack,
-      // handleClick,
-    }
-  },
+onMounted(() => {
+  siteDeviceList()
 })
+
 </script>
 
 
-<style lang='scss' scoped>
-</style>
+<style lang='scss' scoped></style>