监控设备，用户管理对接

src/api/siteManage/watchDog.js

@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+
+// export function monitorDeviceList(params) {
+//     return request({
+//         url: '/deviceAttribute/monitorDeviceList',
+//         method: 'GET',
+//         params,
+//     })
+// }
+
+
+export function deviceNewsList(params) {
+    return request({
+        url: '/deviceAttribute/deviceNewsList',
+        method: 'GET',
+        params,
+    })
+}
+
+export function deviceNewsAdd(params) {
+    return request({
+        url: '/deviceAttribute/deviceNewsAdd',
+        method: 'POST',
+        data: params,
+    })
+}
+
+export function deviceNewsUpdate(params) {
+    return request({
+        url: '/deviceAttribute/deviceNewsUpdate',
+        method: 'POST',
+        data: params,
+    })
+}
+
+export function deviceNewsDel(params) {
+    return request({
+        url: '/deviceAttribute/deviceNewsDel',
+        method: 'GET',
+        params,
+    })
+}
+
+// export function variableListone(params) {
+//     return request({
+//         url: '/deviceAnalogVariableList/variableListone',
+//         method: 'POST',
+//         data: params,
+//     })
+// }

src/api/systemManage/userManage.js

@@ -9,16 +9,36 @@ export function list(params) {
     })
 }
 
-// //台区-新增
-// export function platformAreaAdd(params) {
-//     return request({
-//         url: 'platformArea/platformAreaAdd',
-//         method: 'POST',
-//         data: params,
-//     })
-// }
+// 角色下拉查询
+export function optionselect(params) {
+    return request({
+        url: '/system/role/optionselect',
+        method: 'GET',
+        params,
+    })
+}
+
+
+
+//用户管理列表-新增
+export function userAdd(params) {
+    return request({
+        url: '/system/user/',
+        method: 'POST',
+        data: params,
+    })
+}
 
-// // 台区-修改
+//用户管理列表-修改
+export function userUpdate(params) {
+    return request({
+        url: '/system/user/',
+        method: 'PUT',
+        data: params,
+    })
+}
+
+// 用户管理列表-修改
 // export function platformAreaUpdate(params) {
 //     return request({
 //         url: '/platformArea/platformAreaUpdate',
@@ -34,22 +54,4 @@ export function list(params) {
 //         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

@@ -1082,4 +1082,12 @@ ul li {
         color: #444;
         box-shadow: none
     }
+}
+
+// 用户管理弹框
+.userManageDialog {
+    .el-date-editor.el-input,
+    .el-date-editor.el-input__inner {
+        width: 240px !important;
+    }
 }

src/views/siteManage/index.vue

@@ -154,7 +154,7 @@ export default defineComponent({
     const showDialog2 = ref(false)
     const dialogTitle = ref('')
     const treeLevel = ref(3)
-    const activeName = ref('first')
+    const activeName = ref('second')
     const filterText = ref('')
     const data = ref([
       {

src/views/siteManage/watchDog/dialogComponent.vue

@@ -1,29 +1,27 @@
 <template>
-  <transition name="dialog-fade">
     <el-dialog
-      v-if="showDialog"
       :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
+      v-model="dialogVisible"
       width="640px"
-      @close="closeDialog(0)"
+      @close="closeDialog()"
+      @open="open"
     >
       <el-form
         ref="formInfo"
-        :model="formInfo"
+        :model="form"
         class="demo-form-inline"
         label-width="100px"
         :rules="rules"
       >
-        <el-form-item label="设备名称：" prop="watchName">
-          <el-input v-model="formInfo.watchName"></el-input>
+        <el-form-item label="设备名称：" prop="monitorDeviceName">
+          <el-input v-model="form.monitorDeviceName"></el-input>
         </el-form-item>
-        <el-form-item label="设备编号：" prop="watchCode">
-          <el-input v-model="formInfo.watchCode"></el-input>
+        <el-form-item label="设备编号：" prop="monitorDeviceCode">
+          <el-input v-model="form.monitorDeviceCode"></el-input>
         </el-form-item>
-        <el-form-item label="回路表记地址:" prop="routeAddress">
-          <el-select
-            v-model="formInfo.routeAddress"
+        <el-form-item label="回路表记地址:" prop="loopMeterAddress">
+          <!-- <el-select
+            v-model="form.loopMeterAddress"
             multiple
             filterable
             collapse-tags
@@ -36,158 +34,228 @@
               :value="item.value"
             >
             </el-option>
-          </el-select>
+          </el-select> -->
+           <el-input-number
+              v-model="form.loopMeterAddress"
+              controls-position="right"
+              :min="0"
+              :max="255"
+            ></el-input-number>
+
         </el-form-item>
 
+        <el-form-item label="所属站点：" prop="siteId">
+            <el-select
+              v-model="form.siteId"
+             :disabled="
+                deviceNumDataContent != '' &&
+                form.siteId != null &&
+                form.siteId != ''
+                  ? true
+                  : false
+              "
+              placeholder="请选择所属站点"
+            >
+              <el-option
+                v-for="item in siteList"
+                :key="item.value"
+                :label="item.siteName"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
         <el-form-item label="额定电压(kV)：" prop="ratedVoltage">
-          <el-input v-model="formInfo.ratedVoltage"></el-input>
+          <el-input v-model="form.ratedVoltage"></el-input>
           <div class="remarksTxt">(数值为线电压)</div>
         </el-form-item>
-        <el-form-item label="额定电流(A)：" prop="stationAddress">
-          <el-input v-model="formInfo.ratedCurrent"></el-input>
+        <el-form-item label="额定电流(A)：" prop="ratedCurrent">
+          <el-input v-model="form.ratedCurrent"></el-input>
         </el-form-item>
-        <el-form-item label="电流负载率门限：" prop="fzlMx">
-          <el-input v-model="formInfo.fzlMx"></el-input>
+        <el-form-item label="电流负载率门限：" prop="currentLoadRate">
+          <el-input v-model="form.currentLoadRate"></el-input>
           <div class="remarksTxt">(0-100之间的数字)</div>
         </el-form-item>
-        <el-form-item label="设备能力：" prop="ability">
-          <el-checkbox v-model="checked">电能质量分析</el-checkbox>
+        <el-form-item label="设备能力：" prop="qualityAnalysis">
+          <el-checkbox v-model="form.qualityAnalysis">电能质量分析</el-checkbox>
           <div class="remarksTxt">(如果未勾选，该设备不参与电能质量分析)</div>
         </el-form-item>
 
+      
         <br />
         <br />
         <br />
         <div style="text-align: right">
           <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm('formInfo')"
+          <el-button type="primary" @click="submitForm()"
             >保存</el-button
           >
         </div>
       </el-form>
     </el-dialog>
-  </transition>
 </template>
 
 <script>
-export default {
-  name: "DialogComponent",
+import { useStore } from 'vuex'
+import { defineComponent, ref, watchEffect } from 'vue'
+import * as api from '@/api/siteManage/watchDog.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'DialogComponent',
+  emits: ['closeDialog'],
   props: {
-    dialogTitle: {
-      type: String,
-      default: "新增",
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
   },
-  data() {
-    return {
-      checked: true,
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-      options: [
-        {
-          value: "选项1",
-          label: "站点一",
-        },
-        {
-          value: "选项2",
-          label: "站点二",
-        },
-        {
-          value: "选项3",
-          label: "站点三",
-        },
-        {
-          value: "选项4",
-          label: "站点四",
-        },
-        {
-          value: "选项5",
-          label: "站点五",
-        },
-      ],
+  setup(props, context) {
+    context
+    const store = useStore()
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
+
+    const form = ref([])
+
+     const siteList = ref([])
+
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      console.log('')
+      form.value = props.itemInfo.value;
+       siteList.value = store.state.siteList
+        console.log('siteList.value')
+      console.log(siteList.value)
+       console.log('siteList.value')
+    }
+
+    const options = [
+      {
+        value: '选项1',
+        label: '站点一',
+      },
+      {
+        value: '选项2',
+        label: '站点二',
+      },
+      {
+        value: '选项3',
+        label: '站点三',
+      },
+      {
+        value: '选项4',
+        label: '站点四',
+      },
+      {
+        value: '选项5',
+        label: '站点五',
+      },
+    ]
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+
+    watchEffect((fn, options) => {
+      fn, options
+      dialogVisible.value = props.flag
+    })
+
+    const roleValid = (rule, value, callback) => {
+      rule
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    }
+
+    // 保存-修改操作
+    const submitForm = () => {
+      formInfo.value.validate((valid) => {
+        if (valid) {
 
+          form.value.qualityAnalysis =
+            form.value.qualityAnalysis == true
+              ? (form.value.qualityAnalysis = '是')
+              : (form.value.qualityAnalysis = '否')
+
+          if (props.dialogTitle === '新增') {
+            api.deviceNewsAdd(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '新增成功',
+                  type: 'success',
+                })
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          } else {
+            api.deviceNewsUpdate(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '修改成功',
+                  type: 'success',
+                })
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+
+    return {
+      closeDialog,
+      dialogVisible,
+      options,
+      roleValid,
+      formInfo,
+      siteList,
+      form,
+      open,
+      submitForm,
       rules: {
-        watchName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+        monitorDeviceName: [
           { required: true, message: "请输入设备名称", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
+        
         ],
-        watchCode: [
+        monitorDeviceCode: [
           { required: true, message: "请输入设备编号", trigger: "blur" },
+          
+        ],
+        loopMeterAddress: [
+          { required: true, message: "请选择回路表记地址", trigger: "blur" },
+        ],
+         siteId: [
           {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            required: true,
+            message: '请选择所属站点',
+            trigger: 'blur',
           },
         ],
-        routeAddress: [
-          { required: true, message: "请选则回路表记地址", trigger: "change" },
-        ],
         ratedVoltage: [
-          { required: true, message: "请选择站点列表", trigger: "change" },
+          { required: true, message: "请输入额定电压", trigger: "change" },
         ],
         ratedCurrent: [
-          { required: true, message: "请输入已选站点个数", trigger: "blur" },
-          { trigger: "blur" },
+          { required: true, message: "请输入额定电流", trigger: "blur" },
         ],
-        fzlMx: [
-          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
-          { trigger: "blur" },
+        currentLoadRate: [
+          { required: true, message: "请输入电流负载率门限", trigger: "blur" },
         ],
       },
-    };
-  },
-  methods: {
-    roleValid(rule, value, callback) {
-      rule
-      if (value.length === 0) {
-        callback(new Error("角色不能为空"));
-      } else {
-        callback();
-      }
-    },
-
-    // onSelectedDrug(event) {
-    //   this.routeAddress = event;
-    //   console.log(this.routeAddress);
-    // },
-    // 保存操作
-    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">

src/views/siteManage/watchDog/index.vue

@@ -4,6 +4,7 @@
     <div class="filter-container mb-20">
       <a class="">【测试站点1】站点的所有监控设备</a>
       <!-- <el-button icon="el-icon-plus" type="success" @click="addItem()">新增</el-button > -->
+
       <div>
         <el-button type="primary">导入</el-button>
         <el-button type="primary">导出</el-button>
@@ -13,73 +14,121 @@
 
     <!-- 表格start -->
     <el-table :data="tableData" border stripe :header-cell-style="headClass">
-      <el-table-column
-        fixed
-        prop="watchStatus"
-        label="状态"
-        width="50"
-        align="center"
-      >
-        <template #default>
-          <el-avatar class="status"></el-avatar>
+      <el-table-column prop="status" align="center" label="状态" width="50">
+        <template #default="scope">
+          <el-avatar
+            class="status"
+            :style="
+              scope.row.status == 0
+                ? 'background-color:red'
+                : 'background-color:#04F21C'
+            "
+          ></el-avatar>
         </template>
       </el-table-column>
-      <el-table-column prop="watchName" label="名称" width="">
-      </el-table-column>
-      <el-table-column prop="watchCode" label="编号" width="">
-      </el-table-column>
-      <el-table-column prop="ratedVoltage" label="额定电压" width="">
-      </el-table-column>
-      <el-table-column prop="ratedCurrent" label="额定电流" width="">
-      </el-table-column>
-      <el-table-column prop="fzlMx" label="电流负载率门限" width="">
-      </el-table-column>
-      <el-table-column prop="powerAnalysis" label="电能质量分析" width="">
-      </el-table-column>
-      <el-table-column prop="watchAddress" label="表计地址" width="">
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="180">
+      <el-table-column
+        prop="monitorDeviceName"
+        label="监控设备名称"
+        align="center"
+        width="200px"
+      ></el-table-column>
+      <el-table-column
+        prop="monitorDeviceCode"
+        label="监控设备编号"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="loopMeterAddress"
+        label="回路表计地址"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="ratedVoltage"
+        label="额定电压"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="ratedCurrent"
+        label="额定电流"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="currentLoadRate"
+        label="电流负载率门限"
+        align="center"
+        width="150"
+      ></el-table-column>
+      <el-table-column
+        prop="qualityAnalysis"
+        label="电能质量分析"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column fixed="right" label="操作" width="140">
         <template #default="scope">
           <el-button
             type="text"
             size="small"
             @click.prevent="editRow(scope.row)"
-            >编辑</el-button
-          >
-          <el-button
-            @click="handleDelete(scope.$index, scope.row)"
-            type="text"
-            size="small"
-            class="delete-text"
-            >删除</el-button
           >
+            编辑
+          </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">
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
         </template>
       </el-table-column>
 
-      <el-table-column fixed="right" label="变量" width="180">
-        <template #default="scope">
+      <el-table-column fixed="right" label="变量" width="100">
+        <template #default>
           <el-button type="text" size="small" @click="goVariableList">
             变量列表
           </el-button>
-          <!-- 
-           <router-link style="margin-right:15px;" :to="{ path:'variableList'}">
-              变量列表
-            </router-link> -->
-          <el-button @click="cloneDialog(scope.row)" type="text" size="small"
+          <!-- <el-button @click="cloneDialog(scope.row)" type="text" size="small"
             >克隆</el-button
-          >
+          > -->
         </template>
       </el-table-column>
     </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>
+    </div>
+    <!-- 分页end -->
+
     <!--弹框组件开始-----------------------start-->
     <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
+      :dialogTitle="dialogTitle"
+      :itemInfo="tableItem"
       @closeDialog="closeDialog"
+      :flag="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
 
@@ -96,169 +145,162 @@
 </template>
 
 <script>
-import DialogComponent from "./dialogComponent";
-import Clone from "./clone";
+import { defineComponent, ref, reactive, onMounted } from 'vue'
+import * as api from '@/api/siteManage/watchDog.js'
+import { ElMessage } from 'element-plus'
+
+import DialogComponent from './dialogComponent'
+import Clone from './clone'
 
-export default {
-  name: "WatchDog",
-  props: ['activeName'],
+export default defineComponent({
   components: { DialogComponent, Clone },
+  setup(props, { emit }) {
+    const total = ref(0)
+    const pageSize = ref(15)
+    const currentPage = ref(1)
+    const goSiteListParam = ref('')
+    const platformAreaName = ref('')
+    const pageShow = ref(false)
 
-  data() {
-    return {
-      showDialog: false,
+    const showDialog = ref(false)
+    const tableData = ref([])
 
-      input: "请输入状态",
-      tableData: [
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },  
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-      ],
-    };
-  },
-  methods: {
-    // 表头样式设置
-    goVariableList() {
-       this.$emit('func')
-    },
-   
-    headClass() {
-      return "background:#FAFAFA;";
-    },
+    function goSiteList(params) {
+      goSiteListParam.value = params.id
+      pageShow.value = !pageShow.value
+    }
+    const getMsgFormSon = () => {
+      pageShow.value = !pageShow.value
+    }
+
+    const tableItem = reactive([])
+    const dialogTitle = ref('')
 
-    // 克隆操作
-    cloneDialog() {
-      this.tableItem = {
-        id: "",
-        stationName: "",
-        watchName: "",
-        watchCode: "",
-        siteList: [],
-        done: "",
-        guaZai: "",
-        checked: true,
-        resource: "",
-      };
-      this.dialogTitle = "变量克隆";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["cloneDialog"].showDialog = true;
-      });
-    },
+    //监控设备列表
+    function deviceNewsList() {
+      api
+        .deviceNewsList({
+          siteId: 1,
+          size: pageSize.value,
+          current: currentPage.value,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            tableData.value = requset.data.records
+            total.value = requset.data.total
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
 
     // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: "",
-        stationName: "",
-        watchName: "",
-        watchCode: "",
-        siteList: [],
-        done: "",
-        guaZai: "",
-        checked: true,
-      };
-      this.dialogTitle = "新增";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
+    // const addItem = () => {
+    //   tableItem.value = {
+    //     platformAreaName: '',
+    //     platformAreaCode: '',
+    //     platformAreaAddress: '',
+    //   }
+    //   dialogTitle.value = '新增'
+    //   showDialog.value = true
+    // }
+
     // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData();
+    const editRow = (row) => {
+      tableItem.value = {
+        id: row.id,
+        monitorDeviceCode: row.monitorDeviceCode,
+        monitorDeviceName: row.monitorDeviceName,
+        loopMeterAddress: row.loopMeterAddress,
+        ratedVoltage: row.ratedVoltage,
+        ratedCurrent: row.ratedCurrent,
+        currentLoadRate: row.currentLoadRate,
+        siteId: row.siteId,
+        variableListId: row.variableListId,
+        qualityAnalysis: row.qualityAnalysis === '是' ? true : false,
       }
-      this.showDialog = false;
-    },
+      dialogTitle.value = '编辑'
+      showDialog.value = true
+    }
+
+    // 关闭操作
+    const closeDialog = () => {
+      showDialog.value = false
+      deviceNewsList()
+    }
+
+    //删除 是否删除  ---- 是
+    const handleDelete = (row) => {
+      api.deviceNewsDel({ id: row.id }).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '删除成功',
+            type: 'success',
+          })
+          deviceNewsList()
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+
+    //是否删除  ---- 否
+    const cancelEvent = () => {
+      console.log('cancel!')
+    }
+
+    onMounted(() => {
+      deviceNewsList()
+    })
+
+    function goVariableList() {
+      emit('func')
+    }
+
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA;'
+    }
+    const handleSizeChange = (val) => {
+      pageSize.value = val
+      deviceNewsList()
+    }
+    const handleCurrentChange = (val) => {
+      currentPage.value = val
+      deviceNewsList()
+    }
+    return {
+      tableData,
+      showDialog,
+
+      platformAreaName,
+      pageShow,
+      dialogTitle,
+
+      props,
+      tableItem,
+      goSiteListParam,
+
+      total,
+      pageSize,
+      currentPage,
+
+      goVariableList,
 
-    //删除操作
-    handleDelete(index, row) {
-      console.log(index, row);
-      alert(index);
-    },
+      deviceNewsList,
+      goSiteList,
+      getMsgFormSon,
+      headClass,
+      // addItem,
+      editRow,
+      closeDialog,
+      handleDelete,
+      cancelEvent,
+      handleSizeChange,
+      handleCurrentChange,
+    }
   },
-};
+})
 </script>
 
 <style lang="scss" scoped>

src/views/stationManage/index.vue

@@ -107,7 +107,6 @@
           background
         ></el-pagination>
       </div>
-
       <!-- 分页end -->
 
       <!--弹框组件开始-----------------------start-->

src/views/systemManage/userManage/dialogComponent.vue

@@ -1,46 +1,82 @@
 <template>
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="640px"
-      @close="closeDialog()"
-      @open="open"
+  <el-dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    width="640px"
+    @close="closeDialog()"
+    @open="open"
+  >
+    <el-form
+      ref="formInfo"
+      :model="form"
+      class="demo-form-inline userManageDialog"
+      label-width="100px"
+      :rules="rules"
     >
-      <el-form
-        ref="formInfo"
-        :model="form"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
+      <el-form-item label="用户名：" prop="nickName">
+        <el-input v-model="form.nickName"></el-input>
+      </el-form-item>
+      <el-form-item label="账号：" prop="userName">
+        <el-input v-model="form.userName"></el-input>
+      </el-form-item>
+      <el-form-item label="性别：" prop="sex">
+        <el-radio-group v-model="form.sex">
+          <el-radio label="1" value="1">男</el-radio>
+          <el-radio label="2" value="2">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="手机号码：" prop="phonenumber">
+        <el-input v-model="form.phonenumber"></el-input>
+      </el-form-item>
+
+      <el-form-item
+        label="创建时间："
+        prop="createTime"
+        style="margin-top: 0px"
       >
-        <el-form-item label="账号：" prop="accountNumber">
-          <el-input v-model="form.accountNumber"></el-input>
-        </el-form-item>
-        <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="form.userName"></el-input>
-        </el-form-item>
-        <el-form-item label="手机号码：" prop="phone">
-          <el-input v-model="form.phone"></el-input>
-        </el-form-item>
-         <el-form-item label="告警短信" prop="phone">
-          <el-checkbox v-model="checked1" label="接收"></el-checkbox>
-        </el-form-item>
-
-        <br />
-        <br />
-        <br />
-        <div style="text-align: right">
-          <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm('formInfo')"
-            >确定</el-button
-          >
-        </div>
-      </el-form>
-    </el-dialog>
+        <el-date-picker
+          v-model="form.createTime"
+          width="100%"
+          type="datetime"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+
+      <!-- <el-form-item label="创建时间：" prop="createTime">
+        <el-input v-model="form.createTime"></el-input>
+      </el-form-item> -->
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input v-model="form.roleName"></el-input>
+
+        <!-- <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-select> -->
+      </el-form-item>
+
+      <br />
+      <br />
+      <br />
+      <div style="text-align: right">
+        <el-button @click="closeDialog(0)">取消</el-button>
+        <el-button type="primary" @click="submitForm('formInfo')">
+          确定
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
 </template>
 
 <script>
-import { defineComponent, ref, watchEffect } from 'vue'
+import { defineComponent, ref, onMounted, watchEffect } from 'vue'
+import * as api from '@/api/systemManage/userManage.js'
+import { ElMessage } from 'element-plus'
+import { parseTime,validatorPhone } from '@/utils'
 
 export default defineComponent({
   name: 'DialogComponent',
@@ -58,13 +94,11 @@ export default defineComponent({
 
     const form = ref([])
 
-    
     // open(): Dialog弹窗打开之前做的事
     const open = () => {
-      
       form.value = props.itemInfo.value
-      console.log('form.value')
-      console.log( form.value)
+      // console.log('form.value')
+      // console.log(form.value)
     }
 
     const options = [
@@ -112,15 +146,41 @@ export default defineComponent({
 
     // 保存-修改操作
     const submitForm = () => {
-      console.log(formInfo)
+
+       form.value.createTime
+        ? (form.value.createTime = parseTime(
+            form.value.createTime
+          ))
+        : ''
+
       formInfo.value.validate((valid) => {
         if (valid) {
-          // 走保存请求
-          this.$message({
-            message: '操作成功！',
-            type: 'success',
-          })
-          this.closeDialog(1)
+          if (props.dialogTitle === '新增') {
+            api.userAdd(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '新增成功',
+                  type: 'success',
+                })
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          } else {
+            alert('修改')
+            api.userUpdate(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '修改成功',
+                  type: 'success',
+                })
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          }
         } else {
           console.log('error submit!!')
           return false
@@ -128,6 +188,23 @@ export default defineComponent({
       })
     }
 
+    //角色下拉请求
+    // function optionselect() {
+    //   api.optionselect().then((requset) => {
+    //     if (requset.status === 'SUCCESS') {
+    //       console.log('requset.data')
+    //       console.log(requset.data)
+    //       // platFormData.value = requset.data.records
+    //     } else {
+    //       ElMessage.error(requset.msg)
+    //     }
+    //   })
+    // }
+
+    onMounted(() => {
+      // optionselect()
+    })
+
     return {
       closeDialog,
       dialogVisible,
@@ -138,38 +215,48 @@ export default defineComponent({
       open,
       submitForm,
       rules: {
-        accountNumber: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: "请输入账号", trigger: "blur" },
+        nickName: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
         userName: [
-          { required: true, message: "请输入用户名", trigger: "blur" },
+          { required: true, message: '请输入账号', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
+          },
+        ],
+        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
+        phonenumber: [
+          { required: true, message: '请输入手机号码', trigger: 'blur' },
+          {
+            validator: validatorPhone,
+            message: '输入的电话号码不正确',
+            trigger: 'blur',
           },
         ],
-        phone: [
-          { required: false, message: "请输入编号", trigger: "blur" },
+        createTime: [
+          { required: true, message: '请输入创建时间', trigger: 'change' },
+        ],
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
       },
     }
   },
-
 })
 </script>
  
@@ -178,4 +265,7 @@ export default defineComponent({
 .el-select {
   width: 240px;
 }
+</style>
+<style lang="scss">
+
 </style>

src/views/systemManage/userManage/index.vue

@@ -11,14 +11,13 @@
         </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">
             账号状态:
@@ -43,7 +42,12 @@
               style="width: auto"
             ></el-date-picker>
           </div>
-          <el-button type="primary" icon="el-icon-search" class="search-button" @click="list()">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="search-button"
+            @click="list()"
+          >
             查询
           </el-button>
         </div>
@@ -59,28 +63,36 @@
     <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
+        prop="nickName"
+        label="用户名"
+       
+      ></el-table-column>
+      <el-table-column prop="userName" label="账号"></el-table-column>
+      <el-table-column prop="sex" label="性别">
+        <template #default="scope">
+          <span>{{ scope.row.sex == 1 ? '男' : '女' }}</span>
+        </template>
       </el-table-column>
       <el-table-column
         prop="phonenumber"
         label="手机号码"
-        width=""
+       
+      ></el-table-column>
+      <el-table-column
+        prop="dept.createTime"
+        label="创建时间"
+       
       ></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
-            @click="checkItem(scope.$index, scope.row)"
+            @click="checkItem(scope.row)"
             type="text"
             size="small"
             class="delete-text"
@@ -154,26 +166,7 @@ export default defineComponent({
     const currentPage4 = ref(4)
     const dialogTitle = ref('')
     const showDialog = ref(false)
-    const tableData = ref([
-      {
-        xh: '1',
-        nickName: '张三',
-        sex: '男',
-        phonenumber: '12345678989 ',
-        password: '123456',
-        role: '维保 ',
-        ownerCompany: '伍继',
-      },
-      {
-        xh: '1',
-        nickName: '张三',
-        sex: '男',
-        phonenumber: '12345678989 ',
-        password: '123456',
-        ownerCompany: '伍继',
-        role: '维保 ',
-      },
-    ])
+    const tableData = ref([])
 
     // // 表头样式设置
     const headClass = () => {
@@ -193,14 +186,14 @@ export default defineComponent({
     function list() {
       store.commit('TimeAll_function', dateTime.value)
       const time = store.state.Time_Data
-       console.log('time[0]')
+      console.log('time[0]')
       console.log(time[0])
       api
         .list({
           pageSize: pageSize.value,
           pageNum: currentPage.value,
-          status:status.value,
-          userName:userName.value,
+          status: status.value,
+          userName: userName.value,
           beginTime: time[0],
           endTime: time[1],
           // platformAreaName: platformAreaName.value,
@@ -220,14 +213,12 @@ export default defineComponent({
     // 添加操作
     const addItem = () => {
       tableItem.value = {
-        id: '',
-        stationName: '',
-        xh: '',
         nickName: '',
-        siteList: [],
-        done: '',
-        guaZai: '',
-        checked: true,
+        userName: '',
+        sex: "1",
+        phonenumber: '',
+        createTime: '',
+        roleName: '',
       }
       dialogTitle.value = '新增'
       showDialog.value = true