提交

src/views/govern/components/deviceTree.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="device-tree">
+
+        <energyTree @eleMenuData="getTreeText" :dataTree="dataTree" ref="energyTree" :showCheckbox="showCheckbox"
+                    @check-change="checkChange" :default-checked-keys="defaultCheckedKeys"></energyTree>
+    </div>
+</template>
+
+<script>
+import energyTree from '../../components/tree/energyTree'
+import {getDeviceTree} from '@/api/app/device.js'
+
+export default {
+    components: {
+        energyTree,
+    },
+    props: {
+        showCheckbox: {
+            type: Boolean,
+            default: false
+        },
+        defaultCheckedKeys: {
+            type: Array,
+            default: () => []
+        },
+    },
+    data() {
+        return {
+            dataTree: [],
+
+        }
+    },
+    created() {
+        this.getDeviceTree()
+    },
+    mounted() {
+
+    },
+    methods: {
+        checkChange(data, checked, indeterminate) {
+            this.$emit('check-change', data, checked, indeterminate)
+        },
+        getDeviceTree() {
+            getDeviceTree().then((res) => {
+                console.log(res)
+                if (res.code === 'A0000') {
+                    this.dataTree = res.data
+                    let arr = []
+                    this.dataTree.forEach((item) => {
+                        item.icon = 'el-icon-s-home'
+                        item.color = 'royalblue'
+                        item.children.forEach((item2) => {
+                            item2.icon = 'el-icon-s-order'
+                            item2.color = 'royalblue'
+                            item2.children.forEach((item3) => {
+                                item3.icon = 'el-icon-s-platform'
+                                item3.color = 'royalblue'
+                                if(item3.comFlag === 1){
+                                    item3.color = '#e26257 !important'
+                                }
+                                arr.push(item3)
+                            })
+                        })
+                    })
+                    this.$emit('selectDevice', arr[0])
+                    //默认点击
+                    this.$nextTick().then(() => {
+                        this.$refs.energyTree.$refs.menuTree.setCurrentKey(arr[0].id) // 默认选中节点第一个
+                    })
+                }
+            })
+        },
+        getTreeText(data, level) {
+            console.log(data, level)
+            this.$emit('selectDevice', data)
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.device-tree{
+    font-size: 14px;
+    width: 270px;
+    margin-right: 10px;
+    flex-shrink: 0;
+    .menu-tree > .el-row {
+        height: 36px !important;
+        padding-top: 2px;
+    }
+}
+</style>

src/views/govern/components/marketTree.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="device-tree">
+        <energyTree
+            @eleMenuData="getTreeText"
+            :dataTree="dataTree"
+            ref="energyTree"
+            :showCheckbox="showCheckbox"
+            :eventLevel="1"
+            @check-change="checkChange"
+            :default-checked-keys="defaultCheckedKeys"
+        ></energyTree>
+    </div>
+</template>
+
+<script>
+import energyTree from '../../components/tree/energyTree'
+import { getMarketList } from '@/api/app/user'
+
+export default {
+    components: {
+        energyTree
+    },
+    props: {
+        showCheckbox: {
+            type: Boolean,
+            default: false
+        },
+        defaultCheckedKeys: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            dataTree: []
+        }
+    },
+    created() {
+        this.getDeviceTree()
+    },
+    methods: {
+        checkChange(data, checked, indeterminate) {
+            this.$emit('check-change', data, checked, indeterminate)
+        },
+        getDeviceTree() {
+            getMarketList().then(res => {
+                console.log(res)
+                if (res.code === 'A0000') {
+                    this.dataTree = res.data.map(item => {
+                        return {
+                            ...item,
+                            icon: 'el-icon-user',
+                            color: 'royalblue'
+                        }
+                    })
+                    this.$emit('selectUser', this.dataTree[0])
+                    //默认点击
+                    this.$nextTick().then(() => {
+                        this.$refs.energyTree.$refs.menuTree.setCurrentKey(this.dataTree[0].id) // 默认选中节点第一个
+                    })
+                }
+            })
+        },
+        getTreeText(data, level) {
+            console.log(data, level)
+            this.$emit('selectUser', data)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.device-tree {
+    font-size: 14px;
+    width: 270px;
+    margin-right: 10px;
+    flex-shrink: 0;
+    .menu-tree > .el-row {
+        height: 36px !important;
+        padding-top: 2px;
+    }
+}
+</style>

src/views/govern/components/pointTree.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="device-tree">
+        <energyTree :eventLevel="4" @eleMenuData="getTreeText" :dataTree="dataTree" ref="energyTree"
+                    :highlightCurrent="highlightCurrent"
+                    :showCheckbox="showCheckbox" @check-change="checkChange"
+                    :default-checked-keys="defaultCheckedKeys"></energyTree>
+    </div>
+</template>
+
+<script>
+import energyTree from '../../components/tree/energyTree'
+import {lineTree} from '@/api/app/device.js'
+import * as echarts from 'echarts'
+import {queryStatisticalSelect, queryCommonStatisticalByTime} from '@/api/app/steady'
+
+export default {
+    components: {
+        energyTree,
+    },
+    data() {
+        return {
+            dataTree: [],
+        }
+    },
+    props: {
+        showCheckbox: {
+            type: Boolean,
+            default: false
+        },
+        highlightCurrent: {
+            type: Boolean,
+            default: true
+        },
+        defaultCheckedKeys: {
+            type: Array,
+            default: () => []
+        },
+    },
+    created() {
+        this.lineTree()
+    },
+    methods: {
+        checkChange(data, checked, indeterminate) {
+            this.$emit('check-change', data, checked, indeterminate)
+        },
+        lineTree() {
+            lineTree().then((res) => {
+                console.log(res)
+                if (res.code === 'A0000') {
+                    this.dataTree = res.data
+                    let arr = []
+                    this.dataTree.forEach((item) => {
+                        item.icon = 'el-icon-s-home'
+                        item.color = 'royalblue'
+                        item.children.forEach((item2) => {
+                            item2.icon = 'el-icon-s-order'
+                            item2.color = 'royalblue'
+                            item2.children.forEach((item3) => {
+                                item3.icon = 'el-icon-s-platform'
+                                item3.color = 'royalblue'
+                                if(item3.comFlag === 1){
+                                    item3.color = '#e26257 !important'
+                                }
+                                item3.children.forEach((item4) => {
+                                    item4.icon = 'el-icon-location'
+                                    arr.push(item4)
+                                })
+                            })
+                        })
+                    })
+                    console.log(this.dataTree)
+                    this.$emit('selectPoint', arr[0])
+                    //默认点击
+                    this.$nextTick().then(() => {
+                        this.$refs.energyTree.$refs.menuTree.setCurrentKey(arr[0].id) // 默认选中节点第一个
+                    })
+                }
+            })
+        },
+        getTreeText(data, level) {
+            console.log(data, level)
+            this.$emit('selectPoint', data)
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.device-tree {
+    width: 270px;
+    margin-right: 10px;
+    flex-shrink: 0;
+    .menu-tree > .el-row {
+        height: 36px !important;
+        padding-top: 2px;
+    }
+}
+</style>

src/views/govern/components/projectSelect.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-select
+    v-model="nowValue"
+    filterable
+    remote
+    clearable
+    reserve-keyword
+    placeholder="请输入关键词"
+    :remote-method="remoteMethod"
+    :loading="loading"
+    style="width: 100%"
+  >
+    <el-option
+      v-for="(item, index) in options"
+      :key="index"
+      :label="item.label"
+      :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { queryProject } from "@/api/app/project.js";
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+
+  watch: {
+    nowValue(val) {
+      console.log(val);
+      this.$emit("input", val);
+      this.$emit("change", val);
+    },
+  },
+  data() {
+    return {
+      options: [],
+      nowValue: this.value,
+      loading: false,
+      state: [],
+    };
+  },
+  mounted() {
+    this.getProjectList("");
+  },
+  methods: {
+    getProjectList(searchValue) {
+      queryProject({
+        pageNum: 1,
+        pageSize: 100,
+        searchValue,
+      }).then((res) => {
+        this.options = res.data.records.map((item) => {
+          return { value: item.id, label: item.name };
+        });
+        this.state.length > 0 ? null : (this.state = this.options);
+        console.log(this.options);
+      });
+    },
+    remoteMethod(query) {
+      console.log(query);
+      if (query !== "") {
+        this.getProjectList(query);
+      } else {
+        console.log(this.state);
+        this.options = this.state;
+      }
+    },
+  },
+};
+</script>