Ver código fonte

extract common components

haojianlong 6 anos atrás
pai
commit
6828cff0fa

+ 53 - 0
src/components/point/dynamicdata/dataSource.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-select v-model="Datasource" multiple collapse-tags placeholder="全部" filterable>
+    <el-option v-for="item in sourceList" :key="item" :label="item" :value="item"></el-option>
+  </el-select>
+</template>
+<script>
+import { dynamicDataSource } from "@/api/scan/request";
+import { mapGetters, mapActions } from "vuex";
+export default {
+  data() {
+    return {
+      sourceList: [], //数据字典设备类型
+      timer: null,
+      Datasource: []
+    };
+  },
+  props: {
+    Related: {}
+  },
+  created() {
+    this.init();
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  methods: {
+    init() {
+      this.Datasource = [];
+      let param = { Related: this.Related };
+      //数据源
+      dynamicDataSource(param, res => {
+        if (res.Result == "success") {
+          this.sourceList = res.Content;
+        }
+      });
+    },
+    changeType(val) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.$emit("change", val);
+      }, 500);
+    }
+  },
+  watch: {
+    projectId(n, o) {
+      this.init();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>
+

+ 58 - 0
src/components/point/dynamicdata/dictionaryDevice.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <el-form>
+      <el-form-item label="数据字典设备类型">
+        <el-select v-model="SubTypeName" multiple collapse-tags placeholder="全部" filterable @change="changeType">
+          <el-option v-for="item in DynEquipList" :key="item" :label="item" :value="item"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { dynamicDynEquipList } from "@/api/scan/request";
+import { mapGetters, mapActions } from "vuex";
+export default {
+  data() {
+    return {
+      DynEquipList: [], //数据字典设备类型
+      timer: null,
+      SubTypeName: []
+    };
+  },
+  props: {
+    Related: {}
+  },
+  created() {
+    this.init();
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  methods: {
+    init() {
+      let param = { Related: this.Related };
+      //数据字典
+      dynamicDynEquipList(param, res => {
+        if (res.Result == "success") {
+          this.DynEquipList = res.Content;
+        }
+      });
+    },
+    changeType(val) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.$emit("change", val);
+      }, 500);
+    }
+  },
+  watch: {
+    projectId(n, o) {
+      this.init();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>
+

+ 318 - 0
src/components/point/dynamicdata/locationCascader.vue

@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <el-cascader placeholder="请选择所在位置" :options="options" v-model="value" filterable size="small" @change="changeCascader" change-on-select></el-cascader>
+  </div>
+</template>
+<script>
+import { dynamicLocationList } from "@/api/scan/request";
+import { mapGetters, mapActions } from "vuex";
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: "zhinan",
+          label: "指南",
+          children: [
+            {
+              value: "shejiyuanze",
+              label: "设计原则",
+              children: [
+                {
+                  value: "yizhi",
+                  label: "一致"
+                },
+                {
+                  value: "fankui",
+                  label: "反馈"
+                },
+                {
+                  value: "xiaolv",
+                  label: "效率"
+                },
+                {
+                  value: "kekong",
+                  label: "可控"
+                }
+              ]
+            },
+            {
+              value: "daohang",
+              label: "导航",
+              children: [
+                {
+                  value: "cexiangdaohang",
+                  label: "侧向导航"
+                },
+                {
+                  value: "dingbudaohang",
+                  label: "顶部导航"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: "zujian",
+          label: "组件",
+          children: [
+            {
+              value: "basic",
+              label: "Basic",
+              children: [
+                {
+                  value: "layout",
+                  label: "Layout 布局"
+                },
+                {
+                  value: "color",
+                  label: "Color 色彩"
+                },
+                {
+                  value: "typography",
+                  label: "Typography 字体"
+                },
+                {
+                  value: "icon",
+                  label: "Icon 图标"
+                },
+                {
+                  value: "button",
+                  label: "Button 按钮"
+                }
+              ]
+            },
+            {
+              value: "form",
+              label: "Form",
+              children: [
+                {
+                  value: "radio",
+                  label: "Radio 单选框"
+                },
+                {
+                  value: "checkbox",
+                  label: "Checkbox 多选框"
+                },
+                {
+                  value: "input",
+                  label: "Input 输入框"
+                },
+                {
+                  value: "input-number",
+                  label: "InputNumber 计数器"
+                },
+                {
+                  value: "select",
+                  label: "Select 选择器"
+                },
+                {
+                  value: "cascader",
+                  label: "Cascader 级联选择器"
+                },
+                {
+                  value: "switch",
+                  label: "Switch 开关"
+                },
+                {
+                  value: "slider",
+                  label: "Slider 滑块"
+                },
+                {
+                  value: "time-picker",
+                  label: "TimePicker 时间选择器"
+                },
+                {
+                  value: "date-picker",
+                  label: "DatePicker 日期选择器"
+                },
+                {
+                  value: "datetime-picker",
+                  label: "DateTimePicker 日期时间选择器"
+                },
+                {
+                  value: "upload",
+                  label: "Upload 上传"
+                },
+                {
+                  value: "rate",
+                  label: "Rate 评分"
+                },
+                {
+                  value: "form",
+                  label: "Form 表单"
+                }
+              ]
+            },
+            {
+              value: "data",
+              label: "Data",
+              children: [
+                {
+                  value: "table",
+                  label: "Table 表格"
+                },
+                {
+                  value: "tag",
+                  label: "Tag 标签"
+                },
+                {
+                  value: "progress",
+                  label: "Progress 进度条"
+                },
+                {
+                  value: "tree",
+                  label: "Tree 树形控件"
+                },
+                {
+                  value: "pagination",
+                  label: "Pagination 分页"
+                },
+                {
+                  value: "badge",
+                  label: "Badge 标记"
+                }
+              ]
+            },
+            {
+              value: "notice",
+              label: "Notice",
+              children: [
+                {
+                  value: "alert",
+                  label: "Alert 警告"
+                },
+                {
+                  value: "loading",
+                  label: "Loading 加载"
+                },
+                {
+                  value: "message",
+                  label: "Message 消息提示"
+                },
+                {
+                  value: "message-box",
+                  label: "MessageBox 弹框"
+                },
+                {
+                  value: "notification",
+                  label: "Notification 通知"
+                }
+              ]
+            },
+            {
+              value: "navigation",
+              label: "Navigation",
+              children: [
+                {
+                  value: "menu",
+                  label: "NavMenu 导航菜单"
+                },
+                {
+                  value: "tabs",
+                  label: "Tabs 标签页"
+                },
+                {
+                  value: "breadcrumb",
+                  label: "Breadcrumb 面包屑"
+                },
+                {
+                  value: "dropdown",
+                  label: "Dropdown 下拉菜单"
+                },
+                {
+                  value: "steps",
+                  label: "Steps 步骤条"
+                }
+              ]
+            },
+            {
+              value: "others",
+              label: "Others",
+              children: [
+                {
+                  value: "dialog",
+                  label: "Dialog 对话框"
+                },
+                {
+                  value: "tooltip",
+                  label: "Tooltip 文字提示"
+                },
+                {
+                  value: "popover",
+                  label: "Popover 弹出框"
+                },
+                {
+                  value: "card",
+                  label: "Card 卡片"
+                },
+                {
+                  value: "carousel",
+                  label: "Carousel 走马灯"
+                },
+                {
+                  value: "collapse",
+                  label: "Collapse 折叠面板"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: "ziyuan",
+          label: "资源",
+          children: [
+            {
+              value: "axure",
+              label: "Axure Components"
+            },
+            {
+              value: "sketch",
+              label: "Sketch Templates"
+            },
+            {
+              value: "jiaohu",
+              label: "组件交互文档"
+            }
+          ]
+        }
+      ],
+      value: [],
+      timer: null
+    };
+  },
+  created() {
+    this.init();
+  },
+  props: {
+    Related: {}
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  methods: {
+    init() {
+      let param = { Related: this.Related };
+      dynamicLocationList(param, res => {
+        if (res.Result == "success") {
+          this.LocationList = res.Content;
+        }
+      });
+    },
+    changeCascader(val) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.$emit("change", val);
+      }, 500);
+    }
+  },
+  watch: {
+    projectId(n, o) {
+      this.init();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>
+

+ 53 - 0
src/components/point/dynamicdata/locationFlag.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-select v-model="LocationFlag" multiple collapse-tags placeholder="全部" filterable>
+    <el-option v-for="item in LocFlagList" :key="item" :label="item" :value="item"></el-option>
+  </el-select>
+</template>
+<script>
+import { dynamicLocFlagList } from "@/api/scan/request";
+import { mapGetters, mapActions } from "vuex";
+export default {
+  data() {
+    return {
+      LocFlagList: [],
+      timer: null,
+      LocationFlag: []
+    };
+  },
+  props: {
+    Related: {}
+  },
+  created() {
+    this.init();
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  methods: {
+    init() {
+      this.Datasource = [];
+      let param = { Related: this.Related };
+      // 位置标签
+      dynamicLocFlagList(param, res => {
+        if (res.Result == "success") {
+          this.LocFlagList = res.Content;
+        }
+      });
+    },
+    changeType(val) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.$emit("change", val);
+      }, 500);
+    }
+  },
+  watch: {
+    projectId(n, o) {
+      this.init();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>
+

+ 52 - 57
src/views/point/dynamicdata/addRelation/index.vue

@@ -13,13 +13,9 @@
       <el-tab-pane v-for="(item) in typeList" :key="item.Name" :label="item.Name" :name="item.Name"></el-tab-pane>
     </el-tabs>
     <!-- 数据字典设备类型 -->
-    <el-form>
-      <el-form-item label="数据字典设备类型">
-        <el-select v-model="form.SubTypeName" multiple collapse-tags placeholder="全部" filterable>
-          <el-option v-for="item in DynEquipList" :key="item" :label="item" :value="item"></el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
+    <div>
+      <dictionary-device @change="changeDictionary" :Related="false"></dictionary-device>
+    </div>
     <!-- 列表及查询条件区域 -->
     <div class="table-container clearfix">
       <div class="left-table">
@@ -34,15 +30,11 @@
           </div>
           <div class="query-item">
             <label>数据源</label>
-            <el-select v-model="form.Datasource" multiple collapse-tags placeholder="全部" filterable>
-              <el-option v-for="item in sourceList" :key="item" :label="item" :value="item"></el-option>
-            </el-select>
+            <dataSource :Related="false" @change="changeDataSource"></dataSource>
           </div>
           <div class="query-item">
             <label>位置标签</label>
-            <el-select v-model="form.LocationFlag" multiple collapse-tags placeholder="全部" filterable>
-              <el-option v-for="item in LocFlagList" :key="item" :label="item" :value="item"></el-option>
-            </el-select>
+            <locationFlag :Related="false" @change="changeLocationFlag"></locationFlag>
           </div>
         </div>
         <!-- 左侧列表 -->
@@ -91,7 +83,7 @@
           </div>
           <div class="query-item">
             <label>所在位置</label>
-            <el-cascader placeholder="请选择所在位置" :options="LocationList" filterable change-on-select v-model="locationVal"></el-cascader>
+            <location-cas @change="changeLocation" :Related="false"></location-cas>
           </div>
         </div>
         <!-- 右侧列表 -->
@@ -137,34 +129,41 @@
 <script>
 import tools from "@/utils/tools";
 import historyDialog from "@/components/point/dynamicdata/historyDialog";
+import locationCas from "@/components/point/dynamicdata/locationCascader";
+import dictionaryDevice from "@/components/point/dynamicdata/dictionaryDevice";
+import dataSource from "@/components/point/dynamicdata/dataSource";
+import locationFlag from "@/components/point/dynamicdata/locationFlag";
 import { mapGetters, mapActions } from "vuex";
 import {
-  dynamicDataSource,
-  dynamicDynEquipList,
-  dynamicLocationList,
   dynamicPendingobjs,
   dynamicPendingPoint,
   dynamicCreateRelation,
   dynamicDeleteRelation,
-  dynamicLocFlagList,
   dynamicPointTypeList
 } from "@/api/scan/request";
 export default {
   components: {
-    historyDialog
+    historyDialog,
+    locationCas,
+    dictionaryDevice,
+    dataSource,
+    locationFlag
   },
   data() {
     return {
       isSwitch: true, //AI辅助
       curType: "", //当前所在tab页
       typeList: [], //tab页list
-      sourceList: [], //数据源
-      DynEquipList: [], //数据字典设备类型
-      LocFlagList: [], //位置标签
-      LocationList: [], //所在位置下拉
       LtableData: [], //列表数据
       RtableData: [], //列表数据
-      form: {}, //查询条件
+      form: {
+        EquipmentMark: "", //设备标识关键字
+        SubTypeName: [], //数据字典设备类型
+        LocationFlag: [], //位置标签
+        Datasource: [], //数据源
+        EquipLocalName: "", //设备实例关键字
+        locationVal: [] //所在位置下拉
+      }, //查询条件
       leftRecoList: [], //左推荐
       rightRecoList: [], //右推荐
       leftAI: true, //左右推荐公用-互斥
@@ -187,7 +186,6 @@ export default {
         pageSize: 50,
         total: 0
       },
-      locationVal: [],
       options: [
         {
           value: "zhinan",
@@ -515,30 +513,6 @@ export default {
       let param = { Related: false };
       //对象类型
       this.getTypeNames();
-      //数据源
-      dynamicDataSource(param, res => {
-        if (res.Result == "success") {
-          this.sourceList = res.Content;
-        }
-      });
-      //数据字典
-      dynamicDynEquipList(param, res => {
-        if (res.Result == "success") {
-          this.DynEquipList = res.Content;
-        }
-      });
-      // 位置标签
-      dynamicLocFlagList(param, res => {
-        if (res.Result == "success") {
-          this.LocFlagList = res.Content;
-        }
-      });
-      //所在位置下拉
-      dynamicLocationList(param, res => {
-        if (res.Result == "success") {
-          this.LocationList = res.Content;
-        }
-      });
     },
     //获取tab页
     getTypeNames() {
@@ -644,14 +618,14 @@ export default {
       if (this.form.SubTypeName.length) {
         param.SubTypeName = this.form.SubTypeName.toString();
       }
-      // if (this.LocationList.length == 1) {
-      //   param.BuildLocalName = this.LocationList[0];
-      // } else if (this.LocationList.length == 2) {
-      //   param.FloorLocalName = this.LocationList[1];
-      // } else if (this.LocationList.length == 3) {
-      //   param.RoomLocalName = this.LocationList[2];
-      // } else if (this.LocationList.length == 4) {
-      //   param.SpaceType = this.LocationList[3];
+      // if (this.locationVal.length == 1) {
+      //   param.BuildLocalName = this.locationVal[0];
+      // } else if (this.locationVal.length == 2) {
+      //   param.FloorLocalName = this.locationVal[1];
+      // } else if (this.locationVal.length == 3) {
+      //   param.RoomLocalName = this.locationVal[2];
+      // } else if (this.locationVal.length == 4) {
+      //   param.SpaceType = this.locationVal[3];
       // }
       this.rTableLoading = true;
       dynamicPendingobjs(param, res => {
@@ -674,6 +648,27 @@ export default {
     deleteSuc() {
       this.num--;
       this.refresh();
+    },
+    //所在位置修改
+    changeLocation(val) {
+      this.form.locationVal = val;
+      this.getRightData();
+    },
+    //数据字典设备类型修改
+    changeDictionary(val) {
+      this.form.SubTypeName = val;
+      this.getLeftData();
+      this.getRightData();
+    },
+    //数据源修改
+    changeDataSource(val) {
+      this.form.Datasource = val;
+      this.getLeftData();
+    },
+    //修改位置标签
+    changeLocationFlag(val) {
+      this.form.LocationFlag = val;
+      this.getLeftData();
     }
   },
   watch: {

+ 38 - 41
src/views/point/dynamicdata/index.vue

@@ -30,25 +30,15 @@
             </el-form-item>
           </el-col>
           <el-col :span="5">
-            <el-form-item label="数据源">
-              <el-select v-model="form.Datasource" multiple collapse-tags style="margin-left: 10px;" placeholder="全部" filterable>
-                <el-option v-for="item in sourceList" :key="item" :label="item" :value="item"></el-option>
-              </el-select>
-            </el-form-item>
+            <label>数据源</label>
+            <dataSource :Related="true" @change="changeDataSource"></dataSource>
           </el-col>
           <el-col :span="7">
-            <el-form-item label="数字字典设备类型">
-              <el-select v-model="form.SubTypeName" multiple collapse-tags style="margin-left: 10px;" placeholder="全部" filterable>
-                <el-option v-for="item in DynEquipList" :key="item" :label="item" :value="item"></el-option>
-              </el-select>
-            </el-form-item>
+            <dictionary-device @change="changeDictionary" :Related="true"></dictionary-device>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="位置标签">
-              <el-select v-model="form.LocationFlag" multiple collapse-tags style="margin-left: 10px;" placeholder="全部" filterable>
-                <el-option v-for="item in LocFlagList" :key="item" :label="item" :value="item"></el-option>
-              </el-select>
-            </el-form-item>
+            <label>位置标签</label>
+            <locationFlag :Related="true" @change="changeLocationFlag"></locationFlag>
           </el-col>
         </el-row>
       </el-form>
@@ -102,17 +92,16 @@ import tools from "@/utils/tools";
 import { mapGetters, mapActions } from "vuex";
 import applyRulesDialog from "@/components/point/dynamicdata/applyRulesDialog";
 import delRelationDialog from "@/components/point/dynamicdata/delRelationDialog";
+import dictionaryDevice from "@/components/point/dynamicdata/dictionaryDevice";
+import dataSource from "@/components/point/dynamicdata/dataSource";
+import locationFlag from "@/components/point/dynamicdata/locationFlag";
 import {
   dynamicClashConfirm,
-  dynamicDataSource,
-  dynamicDynEquipList,
   dynamicExecute,
-  dynamicLocFlagList,
   dynamicPromptmessage,
   dynamicPromptobjs,
   dynamicQuery,
   dynamicQueryPoint,
-  dynamicDeleteRelation,
   dynamicPointTypeList
 } from "@/api/scan/request";
 export default {
@@ -133,7 +122,12 @@ export default {
         pageNumber: 1,
         total: 0
       },
-      form: {}, //查询条件
+      form: {
+        EquipmentMark: "", //设备标识关键字
+        SubTypeName: [], //数据字典设备类型
+        LocationFlag: [], //位置标签
+        Datasource: [] //数据源
+      }, //查询条件
       lastUpdateTime: "", //最后更新时间
       tipsType: 1, //提示信息种类
       ruleDialogShow: false, //规则提示执行弹窗
@@ -142,7 +136,10 @@ export default {
   },
   components: {
     applyRulesDialog,
-    delRelationDialog
+    delRelationDialog,
+    dictionaryDevice,
+    dataSource,
+    locationFlag
   },
   created() {
     this.init();
@@ -154,24 +151,6 @@ export default {
       let param = { Related: true };
       //对象类型
       this.getTypeNames();
-      //数据源
-      dynamicDataSource(param, res => {
-        if (res.Result == "success") {
-          this.sourceList = res.Content;
-        }
-      });
-      //数据字典
-      dynamicDynEquipList(param, res => {
-        if (res.Result == "success") {
-          this.DynEquipList = res.Content;
-        }
-      });
-      // 位置标签
-      dynamicLocFlagList(param, res => {
-        if (res.Result == "success") {
-          this.LocFlagList = res.Content;
-        }
-      });
       //获取提示信息
       dynamicPromptmessage({}, res => {
         if (res.Result == "success") {
@@ -203,7 +182,7 @@ export default {
     },
     //获取tab页
     getTypeNames() {
-      let param = { Related: false };
+      let param = { Related: true };
       //对象类型
       dynamicPointTypeList(param, res => {
         if (res.Result == "success") {
@@ -284,7 +263,25 @@ export default {
       this.ruleDialogShow = false;
     },
     //现在执行
-    nowDo() {}
+    nowDo() {},
+    //数据字典设备类型修改
+    changeDictionary(val) {
+      this.page.pageNumber = 1;
+      this.form.SubTypeName = val;
+      this.getTableData();
+    },
+    //数据源修改
+    changeDataSource(val) {
+      this.page.pageNumber = 1;
+      this.form.Datasource = val;
+      this.getTableData();
+    },
+    //修改位置标签
+    changeLocationFlag(val) {
+      this.page.pageNumber = 1;
+      this.form.LocationFlag = val;
+      this.getTableData();
+    }
   },
   watch: {
     projectId() {