权限对接 站点树 摄像头vue3

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/siteManage/watchDog.js

@@ -41,6 +41,18 @@ export function deviceNewsDel(params) {
     })
 }
 
+
+// 菜单查询
+
+// export function menuList(params) {
+//     return request({
+//         url: '/system/menu/list',
+//         method: 'GET',
+//         params,
+//     })
+// }
+
+
 // export function variableListone(params) {
 //     return request({
 //         url: '/deviceAnalogVariableList/variableListone',

src/api/systemManage/rolePermission.js

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+// 角色查询
+export function roleList(params) {
+    return request({
+        url: '/system/role/list',
+        method: 'GET',
+        params,
+    })
+}
+
+
+//角色-新增
+export function roleAdd(params) {
+    return request({
+        url: '/system/role',
+        method: 'POST',
+        data: params,
+    })
+}
+
+
+
+// 角色-回显
+export function roleDetail(params, params2) {
+    return request({
+        url: '/system/role/' + params2,
+        method: 'GET',
+        params,
+    })
+}
+
+
+//角色-修改
+export function roleUpdate(params) {
+    return request({
+        url: '/system/role',
+        method: 'PUT',
+        data: params,
+    })
+}

src/api/systemManage/userManage.js

@@ -38,20 +38,23 @@ export function userUpdate(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 authRole(params, userId) {
+    return request({
+        url: '/system/user/authRole/' + userId,
+        method: 'GET',
+        params,
+    })
+}
+
+
+//用户授权角色
+export function authRoleDetail(params) {
+    return request({
+        url: '/system/user/authRole',
+        method: 'PUT',
+        data: params,
+    })
+}

src/views/siteManage/camera/checkVideo copy.vue

@@ -0,0 +1,155 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      v-model="showDialog"
+      width="600px"
+  
+      @close="closeDialog(0)"
+    >
+    <div style="width:100%;
+    height:400px;background:#aaa   "></div>
+     
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "CheckVideo",
+  props: {
+    dialogTitle: {
+      type: String,
+  
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  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: "站点五",
+        },
+      ],
+
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        watchCode: [
+          { required: true, message: "请输入设备编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        routeAddress: [
+          { required: true, message: "请选则回路表记地址", trigger: "change" },
+         
+        ],
+        ratedVoltage: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        ratedCurrent: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        fzlMx: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { 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">
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+// label样式
+.el-form-item__label {
+    width: 150px
+}
+.el-form-item__content {
+    margin-left: 150px
+}
+</style>

src/views/siteManage/camera/checkVideo.vue

@@ -1,142 +1,110 @@
 <template>
-  <transition name="dialog-fade">
+
     <el-dialog
-      v-if="showDialog"
       :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
+      v-model="dialogVisible"
       width="600px"
   
       @close="closeDialog(0)"
+       @open="open"
     >
     <div style="width:100%;
     height:400px;background:#aaa   "></div>
      
     </el-dialog>
-  </transition>
+
 </template>
 
 <script>
-export default {
-  name: "CheckVideo",
+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: 'CheckVideo',
+  emits: ['closeDialog'],
   props: {
-    dialogTitle: {
-      type: String,
-  
-    },
-    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)
 
-      rules: {
-        watchName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: "请输入设备名称", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        watchCode: [
-          { required: true, message: "请输入设备编号", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        routeAddress: [
-          { required: true, message: "请选则回路表记地址", trigger: "change" },
-         
-        ],
-        ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
-        ],
-        ratedCurrent: [
-          { required: true, message: "请输入已选站点个数", trigger: "blur" },
-          { trigger: "blur" },
-        ],
-        fzlMx: [
-          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
-          { trigger: "blur" },
-        ],
+    const form = ref([])
+
+     const siteList = ref([])
+
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      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: '站点一',
       },
-    };
-  },
-  methods: {
-    roleValid(rule, value, callback) {
+      {
+        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("角色不能为空"));
+        callback(new Error('角色不能为空'))
       } else {
-        callback();
+        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);
-    },
+
+    return {
+      closeDialog,
+      dialogVisible,
+      options,
+      roleValid,
+      formInfo,
+      siteList,
+      form,
+      open,
+    
+    }
   },
-};
+})
 </script>
  
 <style scoped lang="scss">

src/views/siteManage/camera/clone.vue

@@ -0,0 +1,185 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      v-model="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        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>
+        <el-form-item label="变量克隆至:" prop="ability">
+           <el-radio-group v-model="formInfo.resource">
+                <el-radio label="新设备"></el-radio>
+                <el-radio label="已有设备"></el-radio>
+              </el-radio-group>
+        </el-form-item>
+        <el-form-item label="设备名：" prop="stationAddress">
+          <el-input v-model="formInfo.ratedCurrent"></el-input>
+        </el-form-item>
+        <el-form-item label="设备编号：" prop="watchCode">
+          <el-input v-model="formInfo.watchCode"></el-input>
+        </el-form-item>
+ 
+        <div class="sublitArea" >
+          <el-button @click="closeDialog(0)">取消</el-button>
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+
+
+
+
+export default {
+  name: "Clone",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "克隆",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  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: "站点五",
+        },
+      ],
+
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        watchCode: [
+          { required: true, message: "请输入设备编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        routeAddress: [
+          { required: true, message: "请选则回路表记地址", trigger: "change" },
+         
+        ],
+        ratedVoltage: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        ratedCurrent: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        fzlMx: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      console.log(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, {});
+      console.log(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">
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+// label样式
+.el-form-item__label {
+    width: 150px
+}
+.el-form-item__content {
+    margin-left: 150px
+}
+</style>

src/views/siteManage/camera/dialogComponent-ora.vue

@@ -0,0 +1,212 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      v-model="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        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>
+        <el-form-item label="设备编号：" prop="watchCode">
+          <el-input v-model="formInfo.watchCode"></el-input>
+        </el-form-item>
+        <el-form-item label="回路表记地址:" prop="routeAddress">
+          <el-select
+            v-model="formInfo.routeAddress"
+            multiple
+            filterable
+            collapse-tags
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="额定电压(kV)：" prop="ratedVoltage">
+          <el-input v-model="formInfo.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>
+        <el-form-item label="电流负载率门限：" prop="fzlMx">
+          <el-input v-model="formInfo.fzlMx"></el-input>
+           <div class="remarksTxt">(0-100之间的数字)</div>
+        </el-form-item>
+        <el-form-item label="设备能力：" prop="ability">
+          <el-checkbox v-model="checked">电能质量分析</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
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+
+
+
+
+export default {
+  name: "DialogComponent",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  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: "站点五",
+        },
+      ],
+
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        watchCode: [
+          { required: true, message: "请输入设备编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        routeAddress: [
+          { required: true, message: "请选则回路表记地址", trigger: "change" },
+         
+        ],
+        ratedVoltage: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        ratedCurrent: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        fzlMx: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { 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">
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+// label样式
+.el-form-item__label {
+    width: 150px
+}
+.el-form-item__content {
+    margin-left: 150px
+}
+</style>

src/views/siteManage/camera/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,164 +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>
-           <div class="remarksTxt">(0-100之间的数字)</div>
+        <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>
+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: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+  },
+  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')
+    }
 
-export default {
-  name: "DialogComponent",
-  props: {
-    dialogTitle: {
-      type: String,
-      default: "新增",
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
+    const options = [
+      {
+        value: '选项1',
+        label: '站点一',
       },
-    },
-  },
-  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: "站点五",
-        },
-      ],
+      {
+        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">
@@ -204,9 +266,9 @@ export default {
 
 // label样式
 .el-form-item__label {
-    width: 150px
+  width: 150px;
 }
 .el-form-item__content {
-    margin-left: 150px
+  margin-left: 150px;
 }
 </style>

src/views/siteManage/camera/index-ora.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="siteManage-main variableList">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">【测试站点1】站点的所有变量</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()">
+            新增
+          </el-button>
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+      :cell-style="cellStyle"
+    >
+      <el-table-column
+        fixed
+        prop="watchStatus"
+        label="状态"
+        width="50"
+        align="center"
+      >
+        <template #default>
+          <el-avatar class="status"></el-avatar>
+        </template>
+      </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="">
+        <template #default="scope">
+          <a @click="checkVideo(scope.row)">查看</a>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @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>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+
+    <!--弹框组件开始-----------------------start-->
+    <check-video
+      v-if="showDialog"
+      ref="checkVideo"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></check-video>
+    <!--视频弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from './dialogComponent'
+import checkVideo from './checkVideo'
+
+export default {
+  name: 'Camera',
+
+  components: { DialogComponent, checkVideo },
+
+  data() {
+    return {
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: 'one',
+
+      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: {
+    //自定义列样式
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      row, column, rowIndex
+      if (columnIndex === 6) {
+        return `color:#0284E8;`
+      } else {
+        return ''
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: '../siteManage/variableList/index.vue',
+      })
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return 'background:#FAFAFA;'
+    },
+
+    // 查看视频
+    checkVideo() {
+      this.tableItem = {
+        id: '',
+        stationName: '',
+        watchName: '',
+        watchCode: '',
+        siteList: [],
+        done: '',
+        guaZai: '',
+        checked: true,
+        resource: '',
+      }
+      this.dialogTitle = '查看视频'
+      this.showDialog = true
+      this.$nextTick(() => {
+        this.$refs['checkVideo'].showDialog = true
+      })
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: '',
+        stationName: '',
+        watchName: '',
+        watchCode: '',
+        siteList: [],
+        done: '',
+        guaZai: '',
+        checked: true,
+      }
+      this.dialogTitle = '新增'
+      this.showDialog = true
+      this.$nextTick(() => {
+        this.$refs['dialogComponent'].showDialog = 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()
+      }
+      this.showDialog = false
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row)
+      alert(index)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/siteManage/camera/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="siteManage-main variableList">
+  <div class="siteManage-main watchDog">
     <!-- 筛选start -->
     <div class="filter-container mb-20">
-      <div class="left">
+     <div class="left">
         <div>
           <a class="" style="margin-right: 30px">【测试站点1】站点的所有变量</a>
           <el-button icon="el-icon-plus" type="success" @click="addItem()">
@@ -19,63 +19,91 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
-      <el-table-column
-        fixed
-        prop="watchStatus"
-        label="状态"
-        width="50"
-        align="center"
-      >
-        <template #default>
-          <el-avatar class="status"></el-avatar>
+    <el-table :data="tableData" border stripe :header-cell-style="headClass">
+      <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="watchCode" label="名称" width=""></el-table-column>
       <el-table-column
-        prop="ratedVoltage"
+        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="ratedCurrent"
+        prop="ratedVoltage"
         label="额定电压"
+        align="center"
         width=""
       ></el-table-column>
-      <el-table-column prop="fzlMx" label="额定电流" width=""></el-table-column>
       <el-table-column
-        prop="powerAnalysis"
-        label="电流负载率门限"
+        prop="ratedCurrent"
+        label="额定电流"
+        align="center"
         width=""
       ></el-table-column>
-      <el-table-column prop="watchAddress" label="视频画面" width="">
-        <template #default="scope">
-          <a @click="checkVideo(scope.row)">查看</a>
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="180">
+      <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-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="100">
+        <template #default="scope">
+          <a @click="checkVideo(scope.row)">查看</a>
         </template>
       </el-table-column>
     </el-table>
@@ -84,165 +112,127 @@
     <!-- 分页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"
+        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-->
 
-    <!--弹框组件开始-----------------------start-->
+    <!--视频弹框组件开始-----------------------start-->
     <check-video
-      v-if="showDialog"
-      ref="checkVideo"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
+      :dialogTitle="dialogTitle"
+      :itemInfo="tableItem"
       @closeDialog="closeDialog"
+      :flag="showDialog2"
     ></check-video>
-    <!--视频弹框组件开始-----------------------end-->
+    <!--视频弹框组件结束-----------------------end-->
   </div>
 </template>
 
 <script>
+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 checkVideo from './checkVideo'
 
-export default {
-  name: 'Camera',
-
+export default defineComponent({
   components: { DialogComponent, checkVideo },
+  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 {
-      currentPage4: 4,
-
-      showDialog: false,
-      tabPosition: 'one',
-
-      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',
-        },
-      ],
+    const showDialog = ref(false)
+    const showDialog2 = ref(false)
+    const tableData = ref([])
+
+    function goSiteList(params) {
+      goSiteListParam.value = params.id
+      pageShow.value = !pageShow.value
     }
-  },
-  methods: {
-    //自定义列样式
-    cellStyle({ row, column, rowIndex, columnIndex }) {
-      row, column, rowIndex
-      if (columnIndex === 6) {
-        return `color:#0284E8;`
-      } else {
-        return ''
+    const getMsgFormSon = () => {
+      pageShow.value = !pageShow.value
+    }
+
+    const tableItem = reactive([])
+    const dialogTitle = ref('')
+
+    //监控设备列表
+    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)
+          }
+        })
+    }
+
+    // 添加操作
+    // const addItem = () => {
+    //   tableItem.value = {
+    //     platformAreaName: '',
+    //     platformAreaCode: '',
+    //     platformAreaAddress: '',
+    //   }
+    //   dialogTitle.value = '新增'
+    //   showDialog.value = true
+    // }
+
+
+
+
+    // 编辑操作
+    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,
       }
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-    },
+      dialogTitle.value = '编辑'
+      showDialog.value = true
+    }
+
 
-    // 表头样式设置
-    goVariableList() {
-      // 跳转至订单列表页面传参
-      this.$router.push({
-        path: '../siteManage/variableList/index.vue',
-      })
-      // this.$router.push({ name:'variableList'})
-    },
-    headClass() {
-      return 'background:#FAFAFA;'
-    },
 
     // 查看视频
-    checkVideo() {
-      this.tableItem = {
+    const checkVideo=()=> {
+      alert(1)
+      tableItem.value = {
         id: '',
         stationName: '',
         watchName: '',
@@ -253,57 +243,93 @@ export default {
         checked: true,
         resource: '',
       }
-      this.dialogTitle = '查看视频'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['checkVideo'].showDialog = true
-      })
-    },
+      dialogTitle.value = '查看视频'
+      showDialog2.value = true
+    }
+
 
-    // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: '',
-        stationName: '',
-        watchName: '',
-        watchCode: '',
-        siteList: [],
-        done: '',
-        guaZai: '',
-        checked: true,
-      }
-      this.dialogTitle = '新增'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['dialogComponent'].showDialog = 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()
-      }
-      this.showDialog = false
-    },
-
-    //删除操作
-    handleDelete(index, row) {
-      console.log(index, row)
-      alert(index)
-    },
+    const closeDialog = () => {
+      showDialog.value = false,
+      showDialog2.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,
+      showDialog2,
+
+      platformAreaName,
+      pageShow,
+      dialogTitle,
+
+      props,
+      tableItem,
+      goSiteListParam,
+
+      total,
+      pageSize,
+      currentPage,
+
+      goVariableList,
+
+      deviceNewsList,
+      goSiteList,
+      getMsgFormSon,
+      headClass,
+      // addItem,
+
+      checkVideo,
+      editRow,
+      closeDialog,
+      handleDelete,
+      cancelEvent,
+      handleSizeChange,
+      handleCurrentChange,
+    }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/siteManage/index.vue

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

src/views/systemManage/rolePermission/addRoleCom.vue

@@ -1,36 +1,58 @@
 <template>
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="400px"
-      @close="closeDialog()"
-      @open="open"
+  <el-dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    width="400px"
+    @close="closeDialog()"
+    @open="open"
+  >
+    <el-form
+      ref="formInfo"
+      :model="form"
+      class="demo-form-inline"
+      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="watchName">
-          <el-input v-model="form.watchName"></el-input>
-        </el-form-item>
-         <el-form-item label="角色类型：" prop="watchName">
-          <el-input v-model="form.watchName"></el-input>
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input v-model="form.roleName"></el-input>
+      </el-form-item>
+      <el-form-item label="角色权限：" prop="roleKey">
+        <el-input v-model="form.roleKey"></el-input>
+      </el-form-item>
+      <!-- <el-form-item label="角色状态：" prop="status">
+        <el-input v-model="form.roleType"></el-input>
+      </el-form-item> -->
+
+      <el-form-item label="角色状态：" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio label="0" value="0">正常</el-radio>
+          <el-radio label="1" value="1">停用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+       <el-form-item label="角色排序:" prop="roleSort">
+           <el-input-number
+              v-model="form.roleSort"
+              controls-position="right"
+              :min="0"
+              :max="255"
+            ></el-input-number>
+
         </el-form-item>
-   
-      
-        <div style="text-align: right">
-          <el-button type="primary" @click="submitForm('formInfo')"
-            >保存</el-button
-          >
-        </div>
-      </el-form>
-    </el-dialog>
+
+
+      <div style="text-align: right">
+        <el-button type="primary" @click="submitForm('formInfo')">
+          保存
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
 </template>
 <script>
 import { defineComponent, ref, watchEffect } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
 
 export default defineComponent({
   name: 'AddRoleCom',
@@ -48,15 +70,12 @@ export default defineComponent({
 
     const form = ref([])
 
-    
     // open(): Dialog弹窗打开之前做的事
     const open = () => {
       console.log('')
       form.value = props.itemInfo.value
     }
 
- 
-
     // 关闭弹框
     const closeDialog = () => {
       context.emit('closeDialog', false)
@@ -83,11 +102,31 @@ export default defineComponent({
       formInfo.value.validate((valid) => {
         if (valid) {
           // 走保存请求
-          this.$message({
-            message: '操作成功！',
-            type: 'success',
-          })
-          this.closeDialog(1)
+          if (props.dialogTitle === '角色新增') {
+            api.roleAdd(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '新增成功',
+                  type: 'success',
+                })
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          } else {
+            api.roleUpdate(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
@@ -104,23 +143,20 @@ export default defineComponent({
       open,
       submitForm,
       rules: {
-        watchName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: "请输入角色名称", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' },
+        ],
+        roleKey: [
+          { required: true, message: '请输入角色权限', trigger: 'blur' },
+        ],
+        status: [
+          { required: true, message: '请选择角色状态', trigger: 'change' },
         ],
       },
     }
   },
-
 })
 </script>
  
 <style scoped lang="scss">
-
 </style>

src/views/systemManage/rolePermission/index.vue

@@ -5,15 +5,17 @@
       <div style="" class="mb-20 addBox">
         <b>角色类型</b>
         <el-button type="success" @click="addRole()">新增</el-button>
+        <el-button type="primary" @click="editRole()">修改</el-button>
       </div>
       <el-radio-group v-model="radio1">
         <el-radio-button
+         @change="listTabsChange(radio1)"
           v-for="(item, index) in roleData"
-          :label="item.id"
+          :label="item.roleId"
           :key="index"
         >
           <img src="@/assets/images/userIcon.svg" />
-          {{ item.name }}
+          {{ item.roleName }}
           <i class="el-icon-delete" @click="deleteRoleItem(index)"></i>
         </el-radio-button>
       </el-radio-group>
@@ -42,7 +44,9 @@
 </template>
 
 <script>
-import { defineComponent, ref, reactive } from 'vue'
+import { defineComponent, ref, reactive,onMounted } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
 
 import roleInfoCom from './roleInfoCom'
 import addRoleCom from './addRoleCom'
@@ -52,13 +56,7 @@ export default defineComponent({
   setup() {
     const radio1 = ref('1')
     const showDialog = ref(false)
-    const roleData = ref([
-      { id: 1, name: '普通用户' },
-      { id: 2, name: '超级管理员' },
-      { id: 3, name: '主管' },
-      { id: 4, name: '电力' },
-      { id: 5, name: '维保' },
-    ])
+    const roleData = ref([])
 
     const dialogTitle = ref('')
 
@@ -69,27 +67,90 @@ export default defineComponent({
 
     // 新增角色
     const tableItem = reactive([])
+
     function addRole() {
+      alert('新增')
       tableItem.value = {
-        id: '',
-        region: '',
-        stationName: '',
-        watchName: '',
-        watchCode: '',
-        RoleList: [],
-        done: '',
-        guaZai: '',
-        checked: true,
-        resource: '',
+        roleName: '',
+        roleKey: '',
+        status: '',
+        roleSort:1
+
       }
       dialogTitle.value = '角色新增'
       showDialog.value = true
     }
 
+    // 修改角色
+    function editRole() {
+       alert('修改')
+      console.log(radio1.value)
+      api.roleDetail({},radio1.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            console.log(requset.data);
+
+      //       tableItem.value = {
+      //   roleName: requset.data.roleName,
+      //   roleKey: requset.data.roleKey,
+      //   status: requset.data.status,
+      //   roleSort:requset.data.status
+
+      // }
+            // siteCount.value = requset.data[0].siteCount
+            // deviceCount.value = requset.data[0].deviceCount
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+
+
+      dialogTitle.value = '编辑'
+      showDialog.value = true
+
+      // tableItem.value = {
+      //   id: '',
+      //   region: '',
+      //   stationName: '',
+      //   watchName: '',
+      //   watchCode: '',
+      //   RoleList: [],
+      //   done: '',
+      //   guaZai: '',
+      //   checked: true,
+      //   resource: '',
+      // }
+      dialogTitle.value = '角色修改'
+      showDialog.value = true
+    }
+
+     const listTabsChange = (value) => {
+      console.log(value)
+      radio1.value=value;
+      console.log(radio1.value)
+     
+    }
+
+
     // 关闭弹框操作
     const closeDialog=() =>{
       showDialog.value = false
+      roleList()
+    }
+
+    //角色列表
+    function roleList() {
+    
+      api.roleList().then((requset) => {
+          if (requset.code === 200) {
+            roleData.value = requset.rows
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
     }
+     onMounted(() => {
+      roleList()
+    })
 
     return {
       radio1,
@@ -97,8 +158,10 @@ export default defineComponent({
       roleData,
       dialogTitle,
       tableItem,
+      listTabsChange,
       deleteRoleItem,
       addRole,
+      editRole,
       closeDialog,
     }
   },
@@ -106,6 +169,9 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.el-button+.el-button{
+  margin-left:0
+}
 .app-container.page-nesting {
   padding: 0;
   background: rgba(0, 0, 0, 0);

src/views/systemManage/userManage/dialogComponent.vue

@@ -29,6 +29,9 @@
       <el-form-item label="手机号码：" prop="phonenumber">
         <el-input v-model="form.phonenumber"></el-input>
       </el-form-item>
+      <el-form-item label="密码" prop="password" v-if="dialogTitle == '新增'">
+        <el-input v-model="form.password"></el-input>
+      </el-form-item>
 
       <el-form-item
         label="创建时间："
@@ -43,20 +46,17 @@
         ></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-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-select v-model="form.roleId" placeholder="请选择">
+          <el-option
+            v-for="(item, index) in roleSelectData"
+            :key="index"
+            :label="item.roleName"
+            :value="item.roleId"
+          ></el-option>
+        </el-select>
       </el-form-item>
 
       <br />
@@ -76,7 +76,7 @@
 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'
+import { parseTime, validatorPhone } from '@/utils'
 
 export default defineComponent({
   name: 'DialogComponent',
@@ -93,6 +93,7 @@ export default defineComponent({
     const formInfo = ref(null)
 
     const form = ref([])
+    const roleSelectData = ref([])
 
     // open(): Dialog弹窗打开之前做的事
     const open = () => {
@@ -146,11 +147,8 @@ export default defineComponent({
 
     // 保存-修改操作
     const submitForm = () => {
-
-       form.value.createTime
-        ? (form.value.createTime = parseTime(
-            form.value.createTime
-          ))
+      form.value.createTime
+        ? (form.value.createTime = parseTime(form.value.createTime))
         : ''
 
       formInfo.value.validate((valid) => {
@@ -169,6 +167,20 @@ export default defineComponent({
             })
           } else {
             alert('修改')
+
+            //  如果选了角色调用绑定接口
+            // if (form.value.roleId) {
+            //   alert(1)
+            //   api.authRoleDetail({userId: form.value.userId,roleIds:[form.value.roleId]}).then((requset) => {
+            //     if (requset.status === 'SUCCESS') {
+             
+            //       closeDialog()
+            //     } else {
+            //       ElMessage.error(requset.msg)
+            //     }
+            //   })
+            // } 
+            form.value.roleIds=[form.value.roleId];
             api.userUpdate(form.value).then((requset) => {
               if (requset.status === 'SUCCESS') {
                 ElMessage.success({
@@ -189,20 +201,20 @@ 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)
-    //     }
-    //   })
-    // }
+    function optionselect() {
+      api.optionselect().then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          console.log('requset.data')
+          console.log(requset.data)
+          roleSelectData.value = requset.data
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
 
     onMounted(() => {
-      // optionselect()
+      optionselect()
     })
 
     return {
@@ -212,6 +224,7 @@ export default defineComponent({
       roleValid,
       formInfo,
       form,
+      roleSelectData,
       open,
       submitForm,
       rules: {
@@ -245,12 +258,15 @@ export default defineComponent({
         createTime: [
           { required: true, message: '请输入创建时间', trigger: 'change' },
         ],
-        roleName: [
-          { required: true, message: '请输入角色名称', trigger: 'blur' },
+        roleId: [
+          { required: true, message: '请选择角色名称', trigger: 'change' },
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: '用户名长度在 3 到 6 个字符',
+            message: '长度在 3 到 6 个字符',
             trigger: 'blur',
           },
         ],
@@ -267,5 +283,4 @@ export default defineComponent({
 }
 </style>
 <style lang="scss">
-
 </style>

src/views/systemManage/userManage/index.vue

@@ -63,32 +63,20 @@
     <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="用户名"
-       
-      ></el-table-column>
+      <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="手机号码"
-       
-      ></el-table-column>
-      <el-table-column
-        prop="dept.createTime"
-        label="创建时间"
-       
-      ></el-table-column>
-      <el-table-column
+      <el-table-column prop="phonenumber" label="手机号码"></el-table-column>
+      <el-table-column prop="createTime" label="创建时间"></el-table-column>
+      <!-- <el-table-column
         prop="roles.roleName"
         label="角色名称"
        
-      ></el-table-column>
+      ></el-table-column> -->
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
           <el-button
@@ -151,13 +139,10 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const total = ref(0)
-    const pageSize = ref(1)
+    const pageSize = ref(3)
     const currentPage = ref(1)
 
-    const dateTime = ref([
-      new Date(2021, 8, 10, 10, 10),
-      new Date(2021, 10, 11, 10, 10),
-    ])
+    const dateTime = ref('')
 
     const userName = ref('')
     const phone = ref('')
@@ -215,10 +200,11 @@ export default defineComponent({
       tableItem.value = {
         nickName: '',
         userName: '',
-        sex: "1",
+        sex: '1',
         phonenumber: '',
         createTime: '',
         roleName: '',
+        password: '',
       }
       dialogTitle.value = '新增'
       showDialog.value = true
@@ -235,7 +221,21 @@ export default defineComponent({
     // 编辑操作
     const editRow = (row) => {
       console.log(row)
-      tableItem.value = row
+      
+
+      api.authRole({}, row.userId).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          console.log(requset.data.user.roles[0].roleId)
+
+          tableItem.value.roleId= requset.data.user.roles[0].roleId
+          
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+       tableItem.value = row
+
+     
       dialogTitle.value = '编辑'
       showDialog.value = true
     }
@@ -243,6 +243,7 @@ export default defineComponent({
     // 关闭操作
     const closeDialog = () => {
       showDialog.value = false
+      list()
     }
 
     onMounted(() => {