Merge branch 'master' of http://47.111.81.118:3000/xf15575941817/admin-fiveFollowing

public/static/config.js

@@ -1,9 +1,9 @@
 // api 请求路径
 var PLATFROM_CONFIG = {};
-// PLATFROM_CONFIG.baseUrl = "http://172.16.120.104:8010/" //杨强本地
-// PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
+PLATFROM_CONFIG.baseUrl = "http://172.16.120.104:8010/" //杨强本地
+    // PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
 
-PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上
+// PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上
 PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片
 PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径
 

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/api/systemManage/userManage.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+// 列表查询
+export function list(params) {
+    return request({
+        url: '/system/user/list',
+        method: 'GET',
+        params,
+    })
+}
+
+// //台区-新增
+// export function platformAreaAdd(params) {
+//     return request({
+//         url: 'platformArea/platformAreaAdd',
+//         method: 'POST',
+//         data: params,
+//     })
+// }
+
+// // 台区-修改
+// export function platformAreaUpdate(params) {
+//     return request({
+//         url: '/platformArea/platformAreaUpdate',
+//         method: 'POST',
+//         data: params,
+//     })
+// }
+
+// // 台区-回显
+// export function platformAreaListOne(params) {
+//     return request({
+//         url: '/platformArea/platformAreaList',
+//         method: 'GET',
+//         params,
+//     })
+// }
+
+// //台区-删除
+// export function platformAreaDel(params) {
+//     return request({
+//         url: '/platformArea/platformAreaDel',
+//         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/planOutage/index.vue

@@ -253,6 +253,7 @@ export default defineComponent({
     const cancelEvent = () => {
       console.log('cancel!')
     }
+
     //查询设备列表
     function Select() {
       store.commit('TimeAll_function', dateTime.value)

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="platformList()"
+        >
           搜索
         </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,34 +178,18 @@ export default defineComponent({
     const tableItem = reactive([])
     const dialogTitle = ref('')
 
-
-    
-
     //电力监测设备列表
     function platformList() {
-      api.platformList({
+      api
+        .platformList({
           size: pageSize.value,
           current: currentPage.value,
-        }).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,
+          platformAreaName: platformAreaName.value,
         })
         .then((requset) => {
           if (requset.status === 'SUCCESS') {
             tableData.value = requset.data.records
-            // total.value = requset.data.total
+            total.value = requset.data.total
           } else {
             ElMessage.error(requset.msg)
           }
@@ -252,20 +210,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 +248,13 @@ export default defineComponent({
             message: '删除成功',
             type: 'success',
           })
-           platformList()
+          platformList()
         } else {
           ElMessage.error(requset.msg)
         }
       })
     }
+
     //是否删除  ---- 否
     const cancelEvent = () => {
       console.log('cancel!')
@@ -301,22 +273,22 @@ export default defineComponent({
       props,
       context,
       tableItem,
-      SearchData,
+      siteCount,
+      deviceCount,
+      goSiteListParam,
+      total,
+      pageSize,
+      currentPage,
+
+      platformList,
       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>

src/views/systemManage/userManage/index.vue

@@ -5,54 +5,47 @@
       <div class="left">
         <div>
           <span class="" style="margin-right: 30px">用户管理列表</span>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()"
-            >新增</el-button
-          >
+          <el-button icon="el-icon-plus" type="success" @click="addItem()">
+            新增
+          </el-button>
         </div>
         <div style="margin-top: 20px">
-          <div class="filter-item" >
-          姓名：
-          <el-input
-            v-model="userName"
-            placeholder="请输入内容"
-            style="width: 180px"
-          ></el-input>
-        </div>
-        <div class="filter-item" >
-          手机号：
-          <el-input
-            v-model="phone"
-            placeholder="请输入内容"
-            style="width: 180px"
-          ></el-input>
-        </div>
+          <div class="filter-item">
+          用户姓名：
+            <el-input
+              v-model="userName"
+              placeholder="请输入内容"
+              style="width: 180px"
+            ></el-input>
+          </div>
+         
 
           <div class="filter-item">
-            所属企业:
+            账号状态:
             <el-select
-              v-model="region"
+              v-model="status"
               placeholder="请选择"
               style="width: 150px"
             >
-              <el-option label="企业一" value="1"></el-option>
-              <el-option label="企业二" value="2"></el-option>
+              <el-option label="正常" value="0"></el-option>
+              <el-option label="停用" value="1"></el-option>
             </el-select>
           </div>
 
-          <div class="filter-item">
-            角色:
-            <el-select
-              v-model="role"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-              <el-option label="角色1" value="1"></el-option>
-              <el-option label="角色2" value="2"></el-option>
-            </el-select>
+          <div class="filter-item planOutage">
+            选择时间范围：
+            <el-date-picker
+              v-model="dateTime"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width: auto"
+            ></el-date-picker>
           </div>
-          <el-button type="primary" icon="el-icon-search" class="search-button"
-            >查询</el-button
-          >
+          <el-button type="primary" icon="el-icon-search" class="search-button" @click="list()">
+            查询
+          </el-button>
         </div>
       </div>
 
@@ -63,26 +56,27 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-    >
-      <el-table-column prop="xh" label="序号" width="70">
-      </el-table-column>
-      <el-table-column prop="userName" label="姓名" width="">
-      </el-table-column>
+    <el-table :data="tableData" border stripe :header-cell-style="headClass">
+      <!-- <el-table-column prop="xh" label="序号" width="70">
+      </el-table-column> -->
+      <el-table-column prop="nickName" label="昵称" width=""></el-table-column>
+       <el-table-column prop="userName" label="账号" width=""></el-table-column>
       <el-table-column prop="sex" label="性别" width="">
+         <template #default="scope">
+           <span>{{scope.row.sex==1?'男':'女'}}</span>
+         </template>
       </el-table-column>
-      <el-table-column prop="contact" label="联系方式" width="">
-      </el-table-column>
-      <el-table-column prop="password" label="密码" width="">
-      </el-table-column>
-      <el-table-column prop="ownerCompany" label="所属企业" width="">
-      </el-table-column>
-      <el-table-column prop="role" label="角色" width="">
-      </el-table-column>
+      <el-table-column
+        prop="phonenumber"
+        label="手机号码"
+        width=""
+      ></el-table-column>
+      <el-table-column prop="dept.createTime" label="创建时间" width=""></el-table-column>
+      <el-table-column
+        prop="roles.roleName"
+        label="角色名称"
+        width=""
+      ></el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
           <el-button
@@ -90,14 +84,16 @@
             type="text"
             size="small"
             class="delete-text"
-            >查看</el-button
           >
+            查看
+          </el-button>
           <el-button
             type="text"
             size="small"
             @click.prevent="editRow(scope.row)"
-            >编辑</el-button
           >
+            编辑
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -106,15 +102,15 @@
     <!-- 分页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"
-        :current-page="currentPage4"
-        :page-sizes="[100, 200, 300, 400]"
-        :page-size="100"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-      >
-      </el-pagination>
+        background
+      ></el-pagination>
     </div>
 
     <!-- 分页end -->
@@ -127,80 +123,118 @@
       :flag="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
-
-
   </div>
 </template>
 
 <script>
+import { useStore } from 'vuex'
+import { defineComponent, ref, reactive, onMounted } from 'vue'
+import * as api from '@/api/systemManage/userManage.js'
+import { ElMessage } from 'element-plus'
 
-import { defineComponent, ref,reactive} from 'vue'
-
-import DialogComponent from "./dialogComponent";
+import DialogComponent from './dialogComponent'
 
 export default defineComponent({
-  components: { DialogComponent},
+  components: { DialogComponent },
   setup() {
+    const store = useStore()
+    const total = ref(0)
+    const pageSize = ref(1)
+    const currentPage = ref(1)
+
+    const dateTime = ref([
+      new Date(2021, 8, 10, 10, 10),
+      new Date(2021, 10, 11, 10, 10),
+    ])
+
     const userName = ref('')
     const phone = ref('')
-    const region = ref('')
+    const status = ref('')
     const role = ref('')
     const currentPage4 = ref(4)
     const dialogTitle = ref('')
     const showDialog = ref(false)
     const tableData = ref([
       {
-           xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          role: "维保 ",
-          ownerCompany: "伍继",
-        },
-         {
-          xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          ownerCompany: "伍继",
-           role: "维保 ",
-        }
+        xh: '1',
+        nickName: '张三',
+        sex: '男',
+        phonenumber: '12345678989 ',
+        password: '123456',
+        role: '维保 ',
+        ownerCompany: '伍继',
+      },
+      {
+        xh: '1',
+        nickName: '张三',
+        sex: '男',
+        phonenumber: '12345678989 ',
+        password: '123456',
+        ownerCompany: '伍继',
+        role: '维保 ',
+      },
     ])
 
-    const handleSizeChange=(val)=> {
-      console.log(`每页 ${val} 条`);
+    // // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA;'
     }
-    const handleCurrentChange=(val)=> {
-      console.log(`当前页: ${val}`);
+
+    const handleSizeChange = (val) => {
+      pageSize.value = val
+      list()
+    }
+    const handleCurrentChange = (val) => {
+      currentPage.value = val
+      list()
     }
 
-    // // 表头样式设置
-    const headClass=()=> {
-      return "background:#FAFAFA;";
+    //用户列表
+    function list() {
+      store.commit('TimeAll_function', dateTime.value)
+      const time = store.state.Time_Data
+       console.log('time[0]')
+      console.log(time[0])
+      api
+        .list({
+          pageSize: pageSize.value,
+          pageNum: currentPage.value,
+          status:status.value,
+          userName:userName.value,
+          beginTime: time[0],
+          endTime: time[1],
+          // platformAreaName: platformAreaName.value,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            console.log(requset.data)
+            tableData.value = requset.data.rows
+            total.value = requset.data.total
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
     }
 
     const tableItem = reactive([])
-     // 添加操作
-    const addItem=()=> {
+    // 添加操作
+    const addItem = () => {
       tableItem.value = {
-        id: "",
-        stationName: "",
-        xh: "",
-        userName: "",
+        id: '',
+        stationName: '',
+        xh: '',
+        nickName: '',
         siteList: [],
-        done: "",
-        guaZai: "",
+        done: '',
+        guaZai: '',
         checked: true,
-      };
-      dialogTitle.value = "新增";
-      showDialog.value = true;
-
+      }
+      dialogTitle.value = '新增'
+      showDialog.value = true
     }
 
-     // 查看
-    const checkItem=(row)=> {
+    // 查看
+    const checkItem = (row) => {
       console.log(row)
       tableItem.value = row
       dialogTitle.value = '查看'
@@ -220,16 +254,27 @@ export default defineComponent({
       showDialog.value = false
     }
 
+    onMounted(() => {
+      list()
+    })
+
     return {
-       userName,
+      userName,
       phone,
-      region,
+      status,
       role,
       tableItem,
       currentPage4,
       dialogTitle,
       showDialog,
       tableData,
+      total,
+      pageSize,
+      currentPage,
+
+      dateTime,
+      store,
+      list,
       handleSizeChange,
       handleCurrentChange,
       headClass,
@@ -238,7 +283,6 @@ export default defineComponent({
       editRow,
       closeDialog,
     }
-
   },
 })
 </script>

vue.config.js

@@ -88,7 +88,7 @@ module.exports = {
                 }
             }
         },
-        public: 'localhost:9999/',
+        // public: 'localhost:9999/',  
         // after: mockServer(),
     },
     configureWebpack() {