台区完成

src/api/stationManage/index.js

@@ -27,14 +27,14 @@ export function platformAreaUpdate(params) {
     })
 }
 
-// 台区-删除
-// export function platformAreaDel(params) {
-//     return request({
-//         url: '/platformArea/platformAreaDel',
-//         method: 'GET',
-//         params,
-//     })
-// }
+// 台区-回显
+export function platformAreaListOne(params) {
+    return request({
+        url: '/platformArea/platformAreaList',
+        method: 'GET',
+        params,
+    })
+}
 
 //台区-删除
 export function platformAreaDel(params) {
@@ -43,4 +43,13 @@ export function platformAreaDel(params) {
         method: 'GET',
         params,
     })
+}
+
+// 站点设备列表查询
+export function siteDeviceList(params) {
+    return request({
+        url: '/platformArea/siteDeviceList',
+        method: 'GET',
+        params,
+    })
 }

src/assets/css/index.scss

@@ -202,9 +202,16 @@ ul li {
 .status.el-avatar {
     width: 14px;
     height: 14px;
+}
+
+.status.el-avatar.online {
     background: #04F21C
 }
 
+.status.el-avatar.offline {
+    background: #aaa
+}
+
 // 基本信息
 .basicInfo {
     width: 100%;

src/utils/index.js

@@ -266,7 +266,7 @@ export const on = (function() {
  * 手机号校验
  */
 export function validatorPhone(rule, value, callback) {
-    if (!/^1\d{10}$/.test(value)) {
+    if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)) {
         callback(new Error('输入的电话号码不正确'))
     } else {
         callback()

src/views/siteManage/addGroupCom copy.vue

@@ -0,0 +1,102 @@
+<template>
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="400px"
+      @close="closeDialog(0)"
+       @open="open"
+    >
+      <el-form
+        ref="formInfo"
+        :model="form"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="分组名称：" prop="watchName">
+          <el-input v-model="form.watchName"  ></el-input>
+        </el-form-item>
+      
+        <div style="text-align: right">
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+</template>
+<script>
+
+export default {
+  name: "AddGroupCom",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新建分组",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+       checked: true,
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入分组名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存操作
+    submitForm(formName) {
+      const params = Object.assign(this.formInfo, {});
+      params
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          this.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          this.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+
+
+</style>

src/views/stationManage/dialogComponent.vue

@@ -40,12 +40,12 @@
           </el-select>
         </el-form-item> -->
 
-        <el-form-item label="已勾选：" prop="pointNum" v-if="dialogTitle=='编辑'">
-          <el-input v-model="form.pointNum" style="width: 200px"></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="deviceNum" v-if="dialogTitle=='编辑'">
-          <el-input v-model="form.deviceNum" style="width: 200px"></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 />
@@ -150,7 +150,6 @@ export default defineComponent({
               }
             })
           }else {
-             alert(1)
             api.platformAreaUpdate(form.value).then((requset) => {
               if (requset.status === 'SUCCESS') {
                 ElMessage.success({
@@ -211,11 +210,11 @@ export default defineComponent({
         // siteList: [
         //   { required: true, message: '请选择站点列表', trigger: 'change' },
         // ],
-        // pointNum: [
+        // siteCount: [
         //   { required: true, message: '请输入已选站点个数', trigger: 'blur' },
         //   { trigger: 'blur' },
         // ],
-        // deviceNum: [
+        // deviceCount: [
         //   { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
         //   { trigger: 'blur' },
         // ],

src/views/stationManage/index.vue

@@ -4,7 +4,7 @@
     <div class="mb-20">所有台区</div>
     <div class="filter-container mb-10">
       <div>
-        <div class="filter-item" >
+        <div class="filter-item">
           台区：
           <el-input
             v-model="platformAreaName"
@@ -13,7 +13,12 @@
           ></el-input>
         </div>
 
-        <el-button type="primary" icon="el-icon-search" class="search-button" @click="SearchData()">
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          class="search-button"
+          @click="SearchData()"
+        >
           搜索
         </el-button>
 
@@ -25,13 +30,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
+    <el-table :data="tableData" border stripe :header-cell-style="headClass">
       <el-table-column
         fixed
         prop="platformAreaName"
@@ -50,14 +49,21 @@
       ></el-table-column>
       <el-table-column prop="siteCount" label="点位数量" width="">
         <template #default="scope">
-          <span @click="goSiteList">{{ scope.row.siteCount }}</span>
+          <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>
+        </template>
+      </el-table-column>
+      <el-table-column label="挂载设备数量" width="350">
+        <template #default="scope">
+          <span>{{ scope.row.deviceCount ? deviceCount : '-' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="deviceCount"
-        label="挂载设备数量"
-        width="350"
-      ></el-table-column>
       <el-table-column fixed="right" label="操作" width="250">
         <template #default="scope">
           <el-button
@@ -91,22 +97,18 @@
     <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>
+        :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"
@@ -115,12 +117,22 @@
       :flag="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
+
   </div>
-  <site-list v-else :pageShow="pageShow" @func="getMsgFormSon"></site-list>
+
+  <!-- 站点设备列表start -->
+  <site-list
+    v-else
+    :pageShow="pageShow"
+    :goSiteListParam="goSiteListParam"
+    @func="getMsgFormSon"
+  ></site-list>
+  <!-- 站点设备列表end -->
+
 </template>
 
 <script>
-import { defineComponent, ref, reactive,onMounted } from 'vue'
+import { defineComponent, ref, reactive, onMounted } from 'vue'
 import * as api from '@/api/stationManage/index.js'
 import { ElMessage } from 'element-plus'
 
@@ -130,47 +142,19 @@ import siteList from './siteList'
 export default defineComponent({
   components: { DialogComponent, siteList },
   setup(props, context) {
-
     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(true)
     const showDialog = ref(false)
-    const tableData = ref([
-      {
-         platformAreaName: '台区1',
-        platformAreaCode: 'tq02',
-        platformAreaAddress: '青浦区徐泾镇',
-        siteCount: '8',
-        deviceCount: '10',
-      },
-      {
-         platformAreaName: '台区1',
-        platformAreaCode: 'tq02',
-        platformAreaAddress: '青浦区徐泾镇',
-        siteCount: '8',
-        deviceCount: '10',
-      },
-      {
-         platformAreaName: '台区1',
-        platformAreaCode: 'tq02',
-        platformAreaAddress: '青浦区徐泾镇',
-        siteCount: '8',
-        deviceCount: '10',
-      },
-      {
-         platformAreaName: '台区1',
-        platformAreaCode: 'tq02',
-        platformAreaAddress: '青浦区徐泾镇',
-        siteCount: '8',
-        deviceCount: '10',
-      },
-    ])
+    const tableData = ref([])
 
-    const goSiteList = () => {
+    function goSiteList(params) {
+      goSiteListParam.value = params.id
       pageShow.value = !pageShow.value
     }
     const getMsgFormSon = () => {
@@ -182,17 +166,7 @@ export default defineComponent({
       return 'background:#FAFAFA;'
     }
 
-    //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex
-      if (columnIndex === 3) {
-        return `color:#0284E8;cursor:pointer`
-      } else {
-        return ''
-      }
-    }
-
-     const handleSizeChange = (val) => {
+    const handleSizeChange = (val) => {
       pageSize.value = val
       platformList()
     }
@@ -204,29 +178,28 @@ export default defineComponent({
     const tableItem = reactive([])
     const dialogTitle = ref('')
 
-
-    
-
     //电力监测设备列表
     function platformList() {
-      api.platformList({
+      api
+        .platformList({
           size: pageSize.value,
           current: currentPage.value,
-        }).then((requset) => {
+        })
+        .then((requset) => {
           if (requset.status === 'SUCCESS') {
-            console.log(requset.data)
             tableData.value = requset.data.records
             total.value = requset.data.total
-            // store.state.siteList = tableData
           } else {
             ElMessage.error(requset.msg)
           }
         })
     }
-    //查询设备列表
+
+    //筛选设备列表
     function SearchData() {
-      api.platformList({
-          "platformAreaName": platformAreaName.value,
+      api
+        .platformList({
+          platformAreaName: platformAreaName.value,
         })
         .then((requset) => {
           if (requset.status === 'SUCCESS') {
@@ -252,20 +225,33 @@ export default defineComponent({
     // 编辑操作
     const editRow = (row) => {
       console.log(row)
-      // tableItem.value = row
-      tableItem.value={
-        id:row.id,
-        platformAreaName:row.platformAreaName,
-        platformAreaCode:row.platformAreaCode,
-        platformAreaAddress:row.platformAreaAddress,
+      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,
       }
       dialogTitle.value = '编辑'
       showDialog.value = true
     }
     // 关闭操作
     const closeDialog = () => {
-      showDialog.value = false;
+      showDialog.value = false
       platformList()
     }
 
@@ -277,12 +263,13 @@ export default defineComponent({
             message: '删除成功',
             type: 'success',
           })
-           platformList()
+          platformList()
         } else {
           ElMessage.error(requset.msg)
         }
       })
     }
+
     //是否删除  ---- 否
     const cancelEvent = () => {
       console.log('cancel!')
@@ -301,22 +288,22 @@ export default defineComponent({
       props,
       context,
       tableItem,
+      siteCount,
+      deviceCount,
+      goSiteListParam,
+      total,
+      pageSize,
+      currentPage,
+
       SearchData,
       goSiteList,
       getMsgFormSon,
       headClass,
-      cellStyle,
       addItem,
       editRow,
       closeDialog,
       handleDelete,
       cancelEvent,
-
-
-
-      total,
-      pageSize,
-      currentPage,
       handleSizeChange,
       handleCurrentChange,
     }

src/views/stationManage/siteList.vue

@@ -1,37 +1,53 @@
 <template>
-  <div class='app-container'>
+  <div class="app-container">
     <!-- 返回start -->
-    <div class='siteTitle'>
-      <el-button class='goBack' @click='goBack'>返回</el-button>
+    <div class="siteTitle">
+      <el-button class="goBack" @click="goBack">返回</el-button>
       台区1-站点列表
     </div>
     <!-- 返回end -->
 
     <!-- 表格start -->
     <el-table
-      :data='tableData'
+      :data="tableData"
       border
       stripe
-      :header-cell-style='headClass'
-      :cell-style='cellStyle'
+      :header-cell-style="headClass"
+      :cell-style="cellStyle"
     >
-      <el-table-column fixed prop='stationName' label='站点名称' width=''>
-      </el-table-column>
-      <el-table-column prop='stationStatus' label='状态' width=''>
-        <template #default>
-          <el-avatar class='status'></el-avatar>
+      <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='deviceName' label='设备名称' width=''>
-      </el-table-column>
-      <el-table-column prop='siteNo' label='编号' width=''> </el-table-column>
-      <el-table-column prop='eddy' label='额定电压' width=''> </el-table-column>
-      <el-table-column prop='eddl' label='额定电流' width=''> </el-table-column>
-      <el-table-column prop='dlfzl' label='电流负载率门限' width=''>
+      <el-table-column
+        prop="deviceName"
+        label="设备名称"
+        width=""
+      ></el-table-column>
+      <el-table-column prop="monitoringEquipmentNo" label="监控设备编号" width="">
+        <template #default="scope">
+          <span>{{scope.row.monitoringEquipmentNo?scope.row.monitoringEquipmentNo:'--'}}</span>
+        </template>
       </el-table-column>
-       <el-table-column fixed='right' label='操作' width='250'>
+      <el-table-column prop="ratedVoltage" label="额定电压" width=""></el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电流" width=""></el-table-column>
+      <el-table-column
+        prop="currentLoadRate"
+        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'>查看</el-button>
+          <el-button @click="handleClick(scope.row)" type="text" size="small">
+            查看
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -40,111 +56,72 @@
 </template>
 
 <script>
-import { defineComponent, ref} from 'vue'
+import { defineComponent, ref,onMounted } from 'vue'
+import * as api from '@/api/stationManage/index.js'
+import { ElMessage } from 'element-plus'
 
 export default defineComponent({
-   name: 'SiteList',
-   props: ['pageShow'],
+  name: 'SiteList',
+  props: ['pageShow', 'goSiteListParam'],
 
   setup(props, context) {
     const showDialog = ref(false)
     const input = ref('请输入台区名称')
-    const tableData = ref([
-      {
-          stationName: '测试站点1',
-          stationStatus: '~',
-          deviceName: '电力监测设备',
-          siteNo: 'cssb1',
-          eddy: '10',
-          eddl: '12',
-          dlfzl: '80%',
-        },
-        {
-          stationName: '测试站点1',
-          stationStatus: '~',
-          deviceName: '视频监测设备',
-          siteNo: 'cssb1',
-          eddy: '10',
-          eddl: '12',
-          dlfzl: '80%',
-        },
-        {
-          stationName: '测试站点1',
-          stationStatus: '~',
-          deviceName: '电力监测设备',
-          siteNo: 'spjcsdb1',
-          eddy: '10',
-          eddl: '12',
-          dlfzl: '80%',
-        },
-        {
-          stationName: '测试站点1',
-          stationStatus: '~',
-          deviceName: '电力监测设备',
-          siteNo: 'cssb1',
-          eddy: '10',
-          eddl: '12',
-          dlfzl: '80%',
-        },
-    ])
-
-   const goBack=()=> {
+    const tableData = ref([])
+    const goBack = () => {
       context.emit('func')
-      // this.$router.replace('/stationManage/index');
     }
     // 表头样式设置
-   const headClass=()=> {
-      return 'background:#FAFAFA;';
+    const headClass = () => {
+      return 'background:#FAFAFA;'
     }
 
     //自定义列样式
-    const cellStyle=({ row, column, rowIndex, columnIndex })=> {
+    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
       row, column, rowIndex
       if (columnIndex === 1) {
-        return `color:#04F21C`;
+        return `color:#04F21C`
       } else {
-        return '';
+        return ''
       }
     }
+
     //查看
-   const  handleClick=(row)=> {
-         alert('查看对应站点（页面跳转）')
-        console.log(row);
-      }
+    const handleClick = (row) => {
+      alert('查看对应站点（页面跳转）')
+      console.log(row)
+    }
 
-    // 添加操作
-   const addItem=()=> {
-      this.tableItem = {
-        id: '',
-        stationName: '',
-        stationStatus: '',
-        deviceName: '',
-        siteList: [],
-        done: '',
-        guaZai: '',
-      };
-      this.dialogTitle = '新增';
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs['dialogComponent'].showDialog = true;
-      });
+    //站点设备列表
+    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 {
+   
+
+    onMounted(() => {
+      siteDeviceList()
+    })
+
+    return {
       tableData,
       input,
       showDialog,
-      // dialogComponent,
-
 
       headClass,
       cellStyle,
-      addItem,
       goBack,
       handleClick,
-
     }
-    
   },
 })
 </script>