拉取

src/views/deviceManage/powerEquip/deviceDetails.vue

@@ -78,31 +78,32 @@
     </el-table-column>
   </el-table>
 
+  <!-- 克隆 -->
   <el-dialog
-    v-model="dialogVisible"
+    v-model="cloneDialog"
     title="变量克隆"
-    width="30%"
-    :before-close="handleClose"
+    width="30rem"
+    :before-close="cloneHandleClose"
   >
     <div class="dialogOne">
       <div>克隆设备对象: <span>183</span></div>
       <div class="content">
         <span>* </span>变量克隆至:
-        <el-radio v-model="radio1" label="1">新设备</el-radio>
-        <el-radio v-model="radio1" label="2">已有设备</el-radio>
+        <el-radio v-model="cloneRadio" label="1">新设备</el-radio>
+        <el-radio v-model="cloneRadio" label="2">已有设备</el-radio>
       </div>
       <div class="content">
         <span>* </span>设备名:
         <el-input
           class="inputer"
-          v-model="inputName"
+          v-model="cloneInputName"
           placeholder="请输入设备名"
           clearable
         />
         设备编号:
         <el-input
           class="inputer"
-          v-model="inputCode"
+          v-model="cloneInputCode"
           placeholder="请输入设备编号"
           clearable
         />
@@ -111,14 +112,14 @@
         <span>* </span>模拟量:
         <el-input
           class="inputer"
-          v-model="inputName"
+          v-model="cloneInputModel"
           placeholder="请输入模拟量"
           clearable
         />
         状态量:
         <el-input
           class="inputer"
-          v-model="inputCode"
+          v-model="cloneInputState"
           placeholder="请输入状态量"
           clearable
         />
@@ -127,14 +128,46 @@
     <template #footer>
       <span class="dialog-footer">
         <el-checkbox
-          v-model="checked1"
+          v-model="cloneChecked"
           label="连续克隆模式"
           style="margin-right: 10px"
         ></el-checkbox>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="dialogVisible = false"
-          >确定</el-button
-        >
+        <el-button @click="cloneDialog = false">取消</el-button>
+        <el-button type="primary" @click="cloneDialog = false">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+
+  <!-- 变量列表 -->
+  <el-dialog
+    v-model="listDialog"
+    :title="listTitleDialog + '的变量列表'"
+    width="70rem"
+    :before-close="listHandleClose"
+  >
+    <div class="dialogOne">
+      <el-radio-group
+        v-model="listTabPosition"
+        @change="listTabsChange(listTabPosition)"
+        style="margin-bottom: 30px"
+      >
+        <el-radio-button label="model">模拟量</el-radio-button>
+        <el-radio-button label="state">状态量</el-radio-button>
+        <el-radio-button label="parameter">参数量</el-radio-button>
+      </el-radio-group>
+      <el-button
+        class="search-button"
+        icon="el-icon-plus"
+        type="success"
+        @click="addItem()"
+        >新增</el-button
+      >
+
+      <el-button type="primary" icon="el-icon-delete">删除</el-button>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="listDialog = false">关闭</el-button>
       </span>
     </template>
   </el-dialog>
@@ -144,15 +177,55 @@
 import { defineComponent, ref, Ref } from "vue";
 import { ElMessageBox } from "element-plus";
 
-interface PowerEquipData {
-  deviceNumData: Ref;
-  dialogVisible: Ref<boolean>;
-  checked1: Ref<boolean>;
-  handleClose: (done: any) => void;
-  radio1: Ref;
-  inputName: Ref;
-  inputCode: Ref;
-}
+// interface PowerEquipData {
+//   cloneDialog: Ref<boolean>; //克隆弹窗控制
+//   cloneChecked: Ref<boolean>; //克隆复选框控制
+//   cloneRadio: Ref; //克隆单选框控制
+//   cloneHandleClose: (done: any) => void; //克隆弹窗控制方法回调
+//   cloneInputName: Ref; //克隆input
+//   cloneInputCode: Ref; //克隆input
+
+//   listDialog: Ref<boolean>; //变量列表弹窗控制
+//   listHandleClose: (done: any) => void; //克隆弹窗控制方法回调
+// }
+
+//克隆弹窗基础数据定义
+const cloneData = () => {
+  const cloneDialog = ref(false); //克隆弹窗控制
+  const cloneChecked = ref(false); //克隆复选框控制
+  const cloneRadio = ref("1"); //克隆单选框控制
+  const cloneInputName = ref(""); //克隆input名
+  const cloneInputCode = ref(""); //克隆input编号
+  const cloneInputModel = ref(""); //克隆input模拟量
+  const cloneInputState = ref(""); //克隆input状态量
+
+  //克隆弹窗控制方法回调
+  const cloneHandleClose = (done) => {
+    done();
+    //   ElMessageBox.confirm("确定要关闭弹出?").then(() => { done();}).catch(() => {// catch error});
+  };
+  return {
+    cloneDialog,
+    cloneChecked,
+    cloneRadio,
+    cloneInputName,
+    cloneInputCode,
+    cloneHandleClose,
+    cloneInputModel,
+    cloneInputState,
+  };
+};
+//变量列表弹窗基础数据定义
+const listData = () => {
+  const listDialog = ref(false);
+  const listTitleDialog = ref();
+  const listHandleClose = (done) => {
+    done();
+  };
+  const listTabPosition = ref("model");
+
+  return { listDialog, listHandleClose, listTitleDialog, listTabPosition };
+};
 
 export default defineComponent({
   name: "powerEquip",
@@ -164,36 +237,42 @@ export default defineComponent({
   data() {
     return {};
   },
-  setup(): PowerEquipData {
-    const deviceNumData = ref([]);
-    const dialogVisible = ref(false);
-    const checked1 = ref(false);
-    const radio1 = ref("1");
-    const inputName = ref("");
-    const inputCode = ref("");
+  setup() {
+    const {
+      cloneDialog,
+      cloneChecked,
+      cloneRadio,
+      cloneInputName,
+      cloneInputCode,
+      cloneHandleClose,
+      cloneInputModel,
+      cloneInputState,
+    } = cloneData();
 
-    const handleClose = (done) => {
-      done();
-      //   ElMessageBox.confirm("确定要关闭弹出?")
-      //     .then(() => {
-      //       done();
-      //     })
-      //     .catch(() => {
-      //       // catch error
-      //     });
-    };
+    const { listDialog, listHandleClose, listTitleDialog, listTabPosition } =
+      listData();
 
     return {
-      deviceNumData,
-      dialogVisible,
-      checked1,
-      handleClose,
-      radio1,
-      inputName,
-      inputCode,
+      cloneDialog,
+      cloneChecked,
+      cloneHandleClose,
+      cloneRadio,
+      cloneInputName,
+      cloneInputCode,
+      cloneInputModel,
+      cloneInputState,
+
+      listDialog,
+      listHandleClose,
+      listTitleDialog,
+      listTabPosition,
     };
   },
   methods: {
+    //变量列表弹窗tabs切换change事件
+    listTabsChange(value) {
+      console.log(value);
+    },
     //编辑
     editRow(row) {
       console.log(row);
@@ -204,11 +283,13 @@ export default defineComponent({
     },
     //变量列表
     variableList(row) {
+      this.listTitleDialog = 183;
+      this.listDialog = true;
       console.log(row);
     },
     //克隆
     clone(index, row) {
-      this.dialogVisible = true;
+      this.cloneDialog = true;
       console.log(index, row);
     },
     // 表头样式设置

src/views/deviceManage/powerEquip/index.vue

@@ -37,7 +37,11 @@
                 class="search-button"
                 >搜索</el-button
               > -->
-              <el-button class="search-button" icon="el-icon-plus" type="success" @click="addItem()"
+              <el-button
+                class="search-button"
+                icon="el-icon-plus"
+                type="success"
+                @click="addItem()"
                 >新增</el-button
               >
             </div>
@@ -240,6 +244,7 @@ export default defineComponent({
 <style lang="scss">
 .powerEquip {
   height: calc(100vh - 100px);
+  min-width: 810px;
   padding: 30px;
   margin-top: 50px;
 }

src/views/siteManage/watchDog/dialogComponent.vue

@@ -48,13 +48,13 @@
         </el-form-item>
         <el-form-item label="电流负载率门限：" prop="fzlMx">
           <el-input v-model="formInfo.fzlMx"></el-input>
-           <div class="remarksTxt">(0-100之间的数字)</div>
+          <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 />
@@ -70,10 +70,6 @@
 </template>
 
 <script>
-
-
-
-
 export default {
   name: "DialogComponent",
   props: {
@@ -90,7 +86,7 @@ export default {
   },
   data() {
     return {
-       checked: true,
+      checked: true,
       showDialog: false,
       formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
       options: [
@@ -138,11 +134,9 @@ export default {
         ],
         routeAddress: [
           { required: true, message: "请选则回路表记地址", trigger: "change" },
-         
         ],
         ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
+          { required: true, message: "请选择站点列表", trigger: "change" },
         ],
         ratedCurrent: [
           { required: true, message: "请输入已选站点个数", trigger: "blur" },
@@ -202,9 +196,9 @@ export default {
 
 // label样式
 .el-form-item__label {
-    width: 150px
+  width: 150px;
 }
 .el-form-item__content {
-    margin-left: 150px
+  margin-left: 150px;
 }
 </style>