合并分支并处理冲突

package.json

@@ -16,7 +16,8 @@
     "et:list": "gulp themes"
   },
   "dependencies": {
-    "@tinymce/tinymce-vue": "^3.2.8",
+    "@riophae/vue-treeselect": "^0.4.0",
+    "@tinymce/tinymce-vue": "^4.0.4",
     "axios": "^0.19.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",

src/router/index.js

@@ -224,7 +224,11 @@ router.beforeEach((to, from, next) => {
   //   });
   window.SITE_CONFIG["menuShujuList"] = [
     {
-      icon: "icon-setting",
+      url: "/visual/plugin/power/organization",
+      name: "组织架构",
+      id: "5feawfwaefwa577",
+    },
+    {
       id: "22213213",
       name: "基础信息",
       // url: "visual/basicinfo/basicInfoMain",

src/utils/treeSelect.js

@@ -0,0 +1,50 @@
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+ export function handleTree(data, id, parentId, children) {
+	let config = {
+		id: id || 'id',
+		parentId: parentId || 'parentId',
+		childrenList: children || 'children'
+	};
+
+	var childrenListMap = {};
+	var nodeIds = {};
+	var tree = [];
+
+	for (let d of data) {
+		let parentId = d[config.parentId];
+		if (childrenListMap[parentId] == null) {
+			childrenListMap[parentId] = [];
+		}
+		nodeIds[d[config.id]] = d;
+		childrenListMap[parentId].push(d);
+	}
+
+	for (let d of data) {
+		let parentId = d[config.parentId];
+		if (nodeIds[parentId] == null) {
+			tree.push(d);
+		}
+	}
+
+	for (let t of tree) {
+		adaptToChildrenList(t);
+	}
+
+	function adaptToChildrenList(o) {
+		if (childrenListMap[o[config.id]] !== null) {
+			o[config.childrenList] = childrenListMap[o[config.id]];
+		}
+		if (o[config.childrenList]) {
+			for (let c of o[config.childrenList]) {
+				adaptToChildrenList(c);
+			}
+		}
+	}
+	return tree;
+}

src/views/modules/plugins/power/kernelhousehold.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div class="div_search">
+      <el-form :rules="dataRule" :inline="true">
+          <el-form-item label="所属组织" prop="deptName">
+              <el-cascader
+                      style="width:350px"
+                      placeholder="请选择所属组织"
+                      :options="agencytree"
+                      v-model="agencyId"
+                      :props="{ expandTrigger: 'hover', label: 'orgName', value: 'orgId', children: 'subOrgList' }"
+                      clearable/>
+          </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="loadTree()">加载动力主轴</el-button>
+            </el-form-item>
+      </el-form>
+    </div>
+    <div class="div_main">
+      <div :style="{height:rowHeight}"
+          class="div_tree">
+        <el-input placeholder="输入关键字进行过滤"
+                  v-model="filterText">
+        </el-input>
+        <el-scrollbar :style="{height:treeHeight}"
+                      class="scrollar">
+          <el-tree ref="ref_tree"
+                  v-loading="treeLoading"
+                  class="filter_tree"
+                  :data="treeData"
+                  :props="defaultProps"
+                  :highlight-current="true"
+                  node-key="id"
+                  :expand-on-click-node="false"
+                  default-expand-all
+                  :filter-node-method="filterNode"
+                  @node-click="handleNodeClick">
+          </el-tree>
+        </el-scrollbar>
+      </div>
+      <div :style="{height:rowHeight}"
+          class="div_table">
+        <kernelhousehold-table :axisStructId="axisStructId" ref="ref_communityTable"></kernelhousehold-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CDialog from '@c/CDialog'
+import kernelhouseholdTable from './kernelhouseholdTable'
+import { requestPost } from "@/js/dai/request";
+import { mapGetters } from 'vuex'
+export default {
+  data () {
+    return {
+      agencytree: [], // 所属组织
+      agencyId: '',
+      filterText: '',
+      treeLoading: false,
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      selTreeObj: {},
+      centerPoint: [],
+      axisStructId: '' // 动力主轴节点id
+    }
+  },
+  async mounted () {
+    // this.treeLoading = true
+    // await this.loadTree()
+    await this.getAgencyTree()
+    // this.treeLoading = false
+  },
+  computed: {
+    rowHeight () {
+      return this.$store.state.inIframe ? this.clientHeight - 230 + this.iframeHeight + 'px' : this.clientHeight - 230 + 'px'
+    },
+    treeHeight () {
+      return this.$store.state.inIframe ? this.clientHeight - 310 + this.iframeHeight + 'px' : this.clientHeight - 310 + 'px'
+    },
+    ...mapGetters(['clientHeight', 'iframeHeight']),
+
+    dataRule () {
+      return {
+        deptName:[
+            { required: true, message: "请选择", trigger: "blur" }
+        ]
+      }
+    }
+  },
+  methods: {
+    async loadTree () {
+      this.axisStructId = ''
+      if (this.agencyId.length === 0 || !this.agencyId) {
+        return this.$message.error('请选择所属组织')
+      }
+      this.treeLoading = true
+      const url = "/pli/power/data/axis/structTree"
+      let params = {
+        agencyId: this.agencyId[this.agencyId.length-1]
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      this.treeLoading = false
+      if (code === 0) {
+        this.treeData = data
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    handleNodeClick (obj) {
+      this.axisStructId = obj.id
+    },
+    filterNode (value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    // 获取组织列表
+    async getAgencyTree(){
+        const url = '/data/aggregator/org/agencytree'
+
+        let params = {
+            agencyId:this.agencyId,
+            client:'gov'
+        }
+
+        const { data, code, msg } = await requestPost(url,params)
+
+        if (code === 0) {
+            let _data
+            if (data) {
+                _data = this.removeByOrgType(data, 'agency')
+                if (_data) {
+                    this.agencytree = this.removeEmptySubOrgList(_data)
+                }
+            }
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    removeByOrgType (orgArray, orgType) {
+        if (orgArray && orgArray.length > 0) {
+            for (let p = orgArray.length - 1; p >= 0; p--) {
+                let orgInfo = orgArray[p]
+                if (orgInfo) {
+                    if (orgInfo.orgType !== orgType) {
+                        orgArray.splice(p, 1)
+                    } else {
+                        this.removeByOrgType(orgInfo.subOrgList, orgType)
+                    }
+                }
+            }
+        }
+        return orgArray
+    },
+    removeEmptySubOrgList (orgArray) {
+        orgArray.forEach((orgInfo) => {
+            if (orgInfo && orgInfo.subOrgList) {
+                if (orgInfo.subOrgList.length === 0) {
+                    orgInfo.subOrgList = undefined
+                } else {
+                    this.removeEmptySubOrgList(orgInfo.subOrgList)
+                }
+            }
+        })
+        return orgArray;
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.ref_tree.filter(val);
+    }
+  },
+  components: {
+    kernelhouseholdTable, CDialog
+  }
+}
+</script>
+<style lang="scss" scoped >
+.div_search {
+  width: calc(100% - 5px);
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 30px 20px 5px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+}
+.div_main {
+  margin-top: 10px;
+  display: flex;
+}
+.scrollar {
+  margin-top: 10px;
+}
+
+.div_tree {
+  flex: 0 0 280px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  padding: 10px;
+  overflow-y: hidden;
+}
+.filter_tree {
+  overflow-x: auto;
+}
+
+.div_table {
+  margin-left: 15px;
+  // flex: 1;
+  width: calc(100% - 300px);
+  background-color: #ffffff;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.div_btn {
+  margin-top: 20px;
+}
+
+.row {
+  padding: 10px;
+}
+</style>
+
+<style>
+/* .aui-content > .el-tabs > .el-tabs__content {
+  padding: 0px;
+} */
+
+.el-tree-node:focus > .el-tree-node__content {
+  /* background-color: #ccc !important; */
+  color: #2195fe;
+}
+</style>
+<style lang="scss" scoped>
+.div_tree {
+  /deep/ .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+}
+</style>

src/views/modules/plugins/power/kernelhouseholdForm.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+      <div>
+        <div class="div_search">
+          <div class="resi-cell">
+            <div class="resi-cell-label">房屋</div>
+            <div class="resi-cell-value">
+              <el-input v-model="keyword"
+                        style="width:350px"
+                        class="resi-cell-input"
+                        size="small"
+                        clearable
+                        placeholder="请输入“小区名称，楼号，如：亿联小区，1号楼">
+              </el-input>
+            </div>
+          </div>
+          <el-button style="margin-left:10px"
+                    class="diy-button--search"
+                    size="small"
+                    @click="handleSearch">查询</el-button>
+        </div>
+        <div class="div_table">
+          <el-table ref="ref_table"
+                    :data="tableData"
+                    border
+                    :height="tableHeight"
+                    v-loading="tableLoading"
+                    :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
+                    style="width: 100%"
+                    @selection-change="selectionChange">
+            <el-table-column type="selection"
+                            width="55">
+            </el-table-column>
+            <el-table-column prop="houseName"
+                            label="房屋名称">
+            </el-table-column>
+            <el-table-column prop="neighborHoodName"
+                            label="所属小区">
+            </el-table-column>
+            <el-table-column prop="buildingName"
+                            label="所属楼栋">
+            </el-table-column>
+            <el-table-column prop="ownerName"
+                            label="房主姓名">
+            </el-table-column>
+            <el-table-column prop="ownerPhone"
+                            label="房主电话">
+            </el-table-column>
+          </el-table>
+          <div>
+            <el-pagination @size-change="handleSizeChange"
+                          @current-change="handleCurrentChange"
+                          :current-page.sync="pageNo"
+                          :page-sizes="[20, 50, 100, 200]"
+                          :page-size="pageSize"
+                          layout="sizes, prev, pager, next, total"
+                          :total="total">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+      <el-button size="small"
+                 type="primary"
+                 :disabled="btnDisable"
+                 @click="handleComfirm">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { requestPost } from "@/js/dai/request";
+export default {
+  data () {
+    return {
+      btnDisable: false,
+      keyword: '',
+      // 列表相关
+      tableData: [],
+      tableLoading: false,
+      selection: [],
+      total: 0,
+      pageSize: 20,
+      pageNo: 0,
+    }
+  },
+  props: {
+    axisStructId: { // 动力主轴id
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    tableHeight () {
+      return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeight : this.clientHeight - 410
+    },
+    ...mapGetters(['clientHeight', 'iframeHeight'])
+  },
+  components: {},
+  // mounted () {
+  //   this.tableLoading = true
+  //   this.loadTable()
+  // },
+  methods: {
+    // 搜索
+    handleSearch() {
+      this.tableLoading = true
+      this.loadTable()
+    },
+    selectionChange (selection) {
+      this.selection = []
+      selection.forEach(element => {
+        this.selection.push(element.houseId)
+      });
+    },
+    handleSizeChange (val) {
+      this.pageSize = val
+      this.pageNo = 1
+      this.loadTable()
+    },
+    handleCurrentChange (val) {
+      this.pageNo = val
+      this.loadTable()
+    },
+    // 确定
+    async handleComfirm () {
+      if (this.selection.length === 0 || !this.selection) {
+          return this.$message.error('请选择房屋')
+      }
+      const url = "/pli/power/kernelHousehold/bind";
+      let params = {
+          axisStructId: this.axisStructId,
+          houseIdList: this.selection
+      }
+      const { data, code, msg } = await requestPost(url, params);
+      this.tableLoading = false
+      if (code === 0) {
+        this.$refs.ref_table.clearSelection();
+        this.$emit('dialogOk')
+      }
+    },
+    // 取消
+    handleCancle () {
+      this.$refs.ref_table.clearSelection();
+      this.$emit('dialogCancle')
+    },
+    // 查询列表
+    async loadTable () {
+      const url = "/gov/org/house/search";
+      let params = {
+          keyword: this.keyword,
+          pageSize: this.pageSize,
+          pageNo: this.pageNo
+      }
+      const { data, code, msg } = await requestPost(url, params);
+      this.tableLoading = false
+      if (code === 0) {
+        this.total = data.total || 0;
+        this.tableData = data.list ? data.list.map((item) => { return item }) : []
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManage.scss";
+</style>
+<style  lang="scss" scoped>
+.div_btn{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+}
+</style>
+
+
+

src/views/modules/plugins/power/kernelhouseholdTable.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <div class="div_search">
+      <div class="resi-cell">
+        <div class="resi-cell-label">房主姓名</div>
+        <div class="resi-cell-value">
+          <el-input v-model="ownerName"
+                    class="resi-cell-input"
+                    size="small"
+                    clearable
+                    placeholder="请输入内容">
+          </el-input>
+        </div>
+      </div>
+      <el-button style="margin-left:10px"
+                 class="diy-button--search"
+                 size="small"
+                 @click="handleSearch">查询</el-button>
+    </div>
+    <div class="div_btn">
+      <el-button style=""
+                 class="diy-button--add"
+                 size="small"
+                 @click="handleAdd">绑定</el-button>
+    </div>
+    <div class="div_table">
+      <el-table ref="ref_table"
+                :data="tableData"
+                border
+                :height="tableHeight"
+                v-loading="tableLoading"
+                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
+                style="width: 100%">
+        <el-table-column prop="ownerName"
+                         label="姓名"
+                         width="100">
+        </el-table-column>
+        <el-table-column prop="address"
+                         label="地址">
+        </el-table-column>
+        <el-table-column prop="ownerPhone"
+                         label="联系方式"
+                         width="150">
+        </el-table-column>
+        <el-table-column prop="ownerIdCard"
+                         label="身份证"
+                         width="150">
+        </el-table-column>
+        <el-table-column label="操作"
+                         fixed="right"
+                         width="80"
+                         header-align="center"
+                         align="center"
+                         class="operate">
+          <template slot-scope="scope">
+            <el-button type="text"
+                       class="div-table-button--delete"
+                       size="small"
+                       @click="handleDelete(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-pagination @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="pageNo"
+                       :page-sizes="[20, 50, 100, 200]"
+                       :page-size="pageSize"
+                       layout="sizes, prev, pager, next, total"
+                       :total="total">
+        </el-pagination>
+      </div>
+    </div>
+    <!-- 修改弹出框 -->
+    <el-dialog :visible.sync="formShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="formTitle"
+               width="850px"
+               top="5vh"
+               class="dialog-h"
+               @closed="diaClose">
+      <kernelhousehold-form ref="ref_form"
+                      @dialogCancle="addFormCancle"
+                      @dialogOk="addFormOk"
+                      :axisStructId="axisStructId"></kernelhousehold-form>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import KernelhouseholdForm from './kernelhouseholdForm'
+import { requestPost, requestGet } from "@/js/dai/request";
+import { mapGetters } from 'vuex'
+export default {
+  data () {
+    return {
+      total: 0,
+      pageSize: 20,
+      pageNo: 0,
+      tableLoading: false,
+      ownerName: '',
+      tableData: [],
+      //form相关
+      formShow: false,
+      formTitle: '绑定'
+    }
+  },
+  components: {
+    KernelhouseholdForm
+  },
+  computed: {
+    tableHeight () {
+      return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeight : this.clientHeight - 410
+    },
+    ...mapGetters(['clientHeight', 'iframeHeight'])
+  },
+  methods: {
+    async loadTable () {
+      this.tableLoading = true
+      const url = "/pli/power/kernelHousehold/page"
+      let params = {
+        limit: this.pageSize,
+        page: this.pageNo,
+        axisStructId: this.axisStructId,
+        ownerName: this.ownerName
+      }
+      const { data, code, msg, total } = await requestGet(url, params)
+      if (code === 0) {        
+        this.total = data.total || 0;
+        this.tableData = data.list ? data.list.map((item) => { return item }) : []
+      } else {
+        this.$message.error(msg)
+      }
+      this.tableLoading = false
+    },
+    // 删除
+    async handleDelete (id) {
+      this.$confirm("确认删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+          this.deleteKernelhousehold(id)
+        }).catch(err => {
+          console.log('取消删除')
+        })
+    },
+
+    async deleteKernelhousehold (id) {
+      const url = "/pli/power/kernelHousehold/delete"
+      const { data, code, msg } = await requestPost(url, [id])
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "删除成功"
+        });
+        this.loadTable()
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    handleSizeChange (val) {
+      this.pageSize = val
+      this.pageNo = 1
+      this.loadTable()
+    },
+    handleCurrentChange (val) {
+      this.pageNo = val
+      this.loadTable()
+    },
+    handleSearch () {
+      if (!this.axisStructId) {
+        return this.$message.error('请选择动力主轴节点')
+      }
+      this.loadTable()
+    },
+    diaClose () {
+      // this.$refs.ref_form.resetData()
+      this.formShow = false
+    },
+    handleAdd () {
+      if (this.axisStructId) {
+          this.formShow = true
+      } else {
+        return this.$message.error('请选择动力主轴节点')
+      }
+    },
+    addFormCancle () {
+      this.formShow = false
+    },
+    addFormOk () {
+      this.formShow = false
+      this.loadTable()
+    },
+  },
+  props: {
+    axisStructId: {
+      type: String,
+      default: '',
+    }
+  },
+  watch: {
+    axisStructId (newName) {
+      if (newName) {
+        this.pageSize = 20
+        this.pageNo = 1
+        this.loadTable()
+      } else {
+        this.pageSize = 20
+        this.pageNo = 0
+        this.total = 0;
+        this.tableData = []
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManage.scss";
+</style>
+
+<style >
+.el-message.is-closable .el-message__content {
+  line-height: 20px;
+}
+</style>
+

src/views/modules/plugins/power/poweraxis-add-or-update.vue

@@ -0,0 +1,496 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form class="form" 
+            :model="dataForm" 
+            :rules="dataRule" 
+            ref="dataForm" 
+            @keyup.enter.native="dataFormSubmitHandle()" 
+            :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+      <el-form-item prop="categoryCode" label="类别">
+          <el-select v-model="dataForm.categoryCode" @change="handelChange" placeholder="请选择类别">
+              <el-option
+              v-for="item in structCategoryArr"
+              :key="item.categoryCode"
+              :label="item.categoryName"
+              :value="item.categoryCode">
+              </el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item  prop="name" label="名称">
+          <el-input  v-model="dataForm.name" placeholder="请输入名称"  style="width:250px"></el-input>
+      </el-form-item>
+      <!-- 下拉框组织的参数 -->
+      <el-form-item  prop="agencyId" label="所属组织" v-if="orgListSwitch">
+          <el-cascader
+              v-model="dataForm.agencyId"
+              :options="agencytree"
+              placeholder="请选择所属组织"
+              :props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }"
+              :show-all-levels="false"
+              clearable />
+      </el-form-item>
+      <el-form-item prop="pid" label="所属上级" v-if="!orgListSwitch">
+          <el-cascader
+            placeholder="请选择所属上级"
+            :options="parentStructTree"
+            v-model="dataForm.pid"
+            :props="{ expandTrigger: 'hover', emitPath: false, label: 'name', value: 'id', children: 'children' }"
+            :show-all-levels="false"
+            clearable />
+      </el-form-item>
+      <el-form-item label="排序">
+          <el-input-number v-model="dataForm.sort" :min="0" :max="10" label="请输入排序"></el-input-number>
+      </el-form-item>
+      <el-form-item label="活动坐标"
+                    prop="longitude"
+                    style="display: block">
+        <div class="item_width_1">
+
+          <div class="div_map">
+            <div id="app">
+
+            </div>
+            <div style="display: none" id="mapSeach_id" class="div_searchmap">
+              <el-input class="item_width_4"
+                        maxlength="50"
+                        size="mini"
+                        placeholder="请输入关键字"
+                        v-model="keyWords">
+              </el-input>
+              <el-button style="margin-left: 10px"
+                          type="primary"
+                          size="mini"
+                          @click="handleSearchMap">查询</el-button>
+            </div>
+          </div>
+
+          <div id="lon_lat_id" style="margin-top: 10px; display: none">
+            <span>经度</span>
+            <el-input class="item_width_3"
+                      maxlength="50"
+                      placeholder="请输入经度"
+                      :readonly="true"
+                      v-model="dataForm.longitude">
+            </el-input>
+            <span style="margin-left: 20px">纬度</span>
+            <el-input class="item_width_3"
+                      maxlength="50"
+                      placeholder="请输入纬度"
+                      :readonly="true"
+                      v-model="dataForm.latitude">
+            </el-input>
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+var map
+var search
+var markers
+var infoWindowList
+var geocoder // 新建一个正逆地址解析类
+import debounce from 'lodash/debounce'
+import { requestPost } from "@/js/dai/request";
+export default {
+  data () {
+    return {
+      visible: false,
+      keyWords: '',
+      dataForm: {
+        id:'',
+        name:'',
+        agencyId:'',
+        agencyName:'',
+        agencyType:'',
+        structLevel: null,
+        pid:'',
+        categoryCode:'',
+        sort:'',
+        address: '', //详细地址
+        longitude: 36.0722275, //经度
+        latitude: 120.38945519 //纬度
+      },      
+      structCategoryArr: [], // 查询动力主轴标签类别
+      leaderCategoryArr: [], // 查询动力主轴负责人标签类别
+      agencytree: [], // 绑定组织列表
+      parentStructTree: [], // 上级节点列表
+      orgListSwitch: false, // 组织列表开关
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        categoryCode:[
+            { required: true, message: "类别不能为空", trigger: "blur" }
+        ],
+        name:[
+            { required: true, message: "名称不能为空", trigger: "blur" }
+        ],
+        agencyId:[
+            { required: true, message: "所属组织不能为空", trigger: "blur" }
+        ],
+        pid:[
+            { required: true, message: "所属上级不能为空", trigger: "blur" }
+        ],
+        longitude: [
+          { required: true, message: '坐标不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.initMap()
+    }, 500);
+  },
+  methods: {
+    init () {
+      this.visible = true;
+      this.getTagCategoryArr()
+      this.getAgencyTree()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取动力主轴标签
+    async getTagCategoryArr(){
+        const url = '/pli/power/axisTag/listSimpleAll'
+        let params = {}
+        const { data, code, msg } = await requestPost(url, params)
+        if (code === 0) {
+            data.forEach((item) => {
+                if (item.tagCategory === 'struct') {
+                    this.structCategoryArr = item.tagList
+                }
+                if (item.tagCategory === 'leader') {
+                    this.leaderCategoryArr = item.tagList
+                } 
+            })
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    // 获取组织列表
+    async getAgencyTree(){
+        const url = '/data/aggregator/org/agencytree'
+
+        let params = {
+            agencyId:  localStorage.getItem('agencyId'),
+            client:'gov'
+        }
+        const { data, code, msg } = await requestPost(url,params)
+        if (code === 0) {
+            let _data
+            if (data) {
+                _data = this.removeByOrgType(data, 'agency')
+                if (_data) {
+                    this.agencytree = this.removeEmptySubOrgList(_data)
+                }
+            }
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    removeByOrgType (orgArray, orgType) {
+        if (orgArray && orgArray.length > 0) {
+            for (let p = orgArray.length - 1; p >= 0; p--) {
+                let orgInfo = orgArray[p]
+                if (orgInfo) {
+                    if (orgInfo.orgType !== orgType) {
+                        orgArray.splice(p, 1)
+                    } else {
+                        this.removeByOrgType(orgInfo.subOrgList, orgType)
+                    }
+                }
+            }
+        }
+        return orgArray
+    },
+    removeEmptySubOrgList (orgArray) {
+        orgArray.forEach((orgInfo) => {
+            if (orgInfo && orgInfo.subOrgList) {
+                if (orgInfo.subOrgList.length === 0) {
+                    orgInfo.subOrgList = undefined
+                } else {
+                    this.removeEmptySubOrgList(orgInfo.subOrgList)
+                }
+            }
+        })
+        return orgArray;
+    },
+    removeEmptyStructTree (structArray) {
+        structArray.forEach((structInfo) => {
+            if (structInfo && structInfo.children) {
+                if (structInfo.children.length === 0) {
+                    structInfo.children = undefined
+                } else {
+                    this.removeEmptyStructTree(structInfo.children)
+                }
+            }
+        })
+        return structArray;
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.post(`/pli/power/axisStruct/queryModifyById/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg);
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        this.structCategoryArr.forEach((item) => {
+          if(item.categoryCode === this.dataForm.categoryCode){
+            this.dataForm.structLevel = item.structLevel
+          }
+        })
+        if(this.dataForm.structLevel === 0) {
+          this.orgListSwitch = true
+        } else {
+          this.orgListSwitch = false
+          this.getParentStructTree(this.dataForm.structLevel)
+        }
+      }).catch(() => {})
+    },
+    // 获取上级动力主轴节点
+    async getParentStructTree(structLevel){
+        const url = `/pli/power/axisStruct/bylevel/${structLevel}/parenttree`
+        let params = {}
+        const { data, code, msg } = await requestPost(url,params)
+        if (code === 0) {
+            this.parentStructTree = this.removeEmptyStructTree(data)
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    // 动力主轴选中后的操作
+    handelChange(val){
+        this.dataForm.categoryCode = val
+        this.structCategoryArr.forEach((item) => {
+          if(item.categoryCode === val){
+            this.dataForm.structLevel = item.structLevel
+          }
+        })
+        if (this.dataForm.structLevel === 0) {
+          this.orgListSwitch = true
+          this.dataForm.pid = '0'
+        } else {
+          this.orgListSwitch = false
+          this.dataForm.pid = ''
+          this.getParentStructTree(this.dataForm.structLevel)
+        }
+    },
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap () {
+      if (document.getElementById('app')) {
+        document.getElementById('mapSeach_id').style.display = "block"
+        document.getElementById('lon_lat_id').style.display = "block"
+      }
+      
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519)
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById('app'), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45 // 设置地图旋转角度
+      })
+
+      search = new window.TMap.service.Search({ pageSize: 10 })
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: []
+      })
+      infoWindowList = Array(10)
+
+      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+
+      // 监听地图平移结束
+      map.on('panend', () => {
+        this.handleMoveCenter()
+      })
+      this.handleMoveCenter()
+      this.convert()
+    },
+
+    setMarker (lat, lng) {
+      markers.setGeometries([])
+      markers.add([
+        {
+          id: '4',
+          styleId: 'marker',
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: 'marker4'
+          }
+        }
+      ])
+    },
+
+    handleSearchMap () {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close()
+      })
+      infoWindowList.length = 0
+      markers.setGeometries([])
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.keyWords,
+          bounds: map.getBounds()
+        })
+        .then((result) => {
+          let { data } = result
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng }
+            } = data[0]
+
+
+            map.setCenter(new TMap.LatLng(lat, lng))
+            this.setMarker(lat, lng)
+            this.dataForm.latitude = lat
+            this.dataForm.longitude = lng
+            this.convert()
+          } else {
+            this.$message.error('未检索到相关位置坐标')
+          }
+        })
+    },
+
+    handleMoveCenter () {
+      //修改地图中心点
+      const center = map.getCenter()
+      const lat = center.getLat()
+      const lng = center.getLng()
+      this.dataForm.latitude = lat
+      this.dataForm.longitude = lng
+      this.setMarker(lat, lng)
+      this.convert(lat, lng)
+    },
+
+    convert (lat, lng) {
+      markers.setGeometries([]);
+      // var input = document.getElementById('location').value.split(',');
+      let location
+      if (lat && lng) {
+        location = new TMap.LatLng(lat, lng);
+      } else {
+        location = new TMap.LatLng(this.dataForm.latitude, this.dataForm.longitude);
+      }
+      // map.setCenter(location);
+      markers.updateGeometries([
+        {
+          id: 'main', // 点标注数据数组
+          position: location,
+        },
+      ]);
+      geocoder
+        .getAddress({ location: location }) // 将给定的坐标位置转换为地址
+        .then((result) => {
+          this.dataForm.address = result.result.address
+          // 显示搜索到的地址
+        });
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if(this.dataForm.id) { // 修改
+          this.submitModifyOrg()
+        } else { // 新增
+          this.submitAddNewOrg()
+        }
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    // 修改
+    async submitModifyOrg(){
+        const url = '/pli/power/axisStruct/update'
+        const { data, code, msg } = await requestPost(url,this.dataForm)
+        if (code === 0) {
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        } else {
+            return this.$message.error(msg)
+        }
+    },
+    // 新增
+    async submitAddNewOrg(){
+        const url = '/pli/power/axisStruct/save'
+        const { data, code, msg } = await requestPost(url,this.dataForm)
+        if (code === 0) {
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        } else {
+            return this.$message.error(msg)
+        }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
+<style  lang="scss" scoped>
+.item_width_1 {
+  width: 560px;
+
+  /deep/.tox .tox-dialog {
+    z-index: 20000;
+  }
+}
+
+
+.div_map {
+  position: relative;
+}
+.div_searchmap {
+  z-index: 5000;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+
+.tinymce_view {
+  height: 400px;
+  overflow: auto;
+}
+.text_p {
+  margin: 0;
+  padding: 0 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 5px;
+  > p {
+    margin: 0;
+  }
+}
+</style>

src/views/modules/plugins/power/poweraxis.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="div_main">
+      <div class="div_search">
+        <el-form :model="dataForm" ref="queryForm" :inline="true" @keyup.enter.native="getDataList()">
+            <el-form-item label="所属组织" prop="deptName">
+                <el-cascader
+                        placeholder="请选择所属组织"
+                        :options="agencytree"
+                        v-model="dataForm.agencyId"
+                        :props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }"
+                        clearable/>
+            </el-form-item>
+            <el-form-item label="部门名称" prop="deptName">
+                <el-input v-model="dataForm.axisName" placeholder="请输入部门名称" clearable size="small" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList()">搜索</el-button>
+                <el-button style="margin-left:10px"
+                           class="diy-button--reset"
+                           size="small">重置</el-button>
+            </el-form-item>
+        </el-form>
+      </div>
+      <div class="div_table">
+        <div class="div_btn">
+            <el-button style=""
+                    class="diy-button--add"
+                    size="small"
+                    @click="handleAdd()">{{ $t('add') }}</el-button>
+        </div>
+        <!-- 列表表格 -->
+        <el-table
+            class="table"
+            v-loading="dataListLoading"
+            :data="dataList"
+            :default-expand-all="true"
+            row-key="id"
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}">
+            <el-table-column prop="name" label="动力主轴"></el-table-column>
+            <el-table-column prop="categoryCode" :formatter="categoryCodeFormatter" label="类别" ></el-table-column>
+            <el-table-column prop="leaderName" label="负责人" width="100"></el-table-column>
+            <el-table-column prop="leaderMobile" label="联系方式" width="110"></el-table-column>
+            <el-table-column prop="createdTime" label="创建时间" width="160"></el-table-column>
+            <el-table-column label="操作" align="center" width="300">
+                <template slot-scope="scope">
+                    <!-- <el-button size="mini" type="danger" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> -->
+                    <el-button size="mini" type="danger" icon="el-icon-edit" @click="handleEdit(scope.row.id)">修改</el-button>
+                    <el-button size="mini" type="warning" icon="el-icon-edit" @click="deleteHandle_my(scope.row.id)">删除</el-button>
+                    <el-button size="mini" type="primary" icon="el-icon-user" @click="add_edit_Leader(scope.row.id, scope.row.leaderId, scope.row.structLevel)">负责人</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+      </div>
+        <!-- 弹窗, 新增 / 修改 -->
+        <el-dialog :visible.sync="formShow"
+                :close-on-click-modal="false"
+                :close-on-press-escape="false"
+                :title="formTitle"
+                width="850px"
+                top="5vh"
+                class="dialog-h"
+                @closed="diaClose">
+        <poweraxis-form ref="ref_form"
+                        @dialogCancle="addFormCancle"
+                        @dialogOk="addFormOk"></poweraxis-form>
+        </el-dialog>
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <el-dialog  :visible.sync="leaderVisible"
+                    :close-on-click-modal="false"
+                    :close-on-press-escape="false"
+                    title="负责人"
+                    width="850px"
+                    top="5vh"
+                    class="dialog-h"
+                    @closed="leaderDiaClose">
+            <add-leader ref="ref_leader"
+                        @leaderCancle="addleaderCancle"
+                        @leaderOk="addleaderOk"></add-leader>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import { handleTree } from "@/utils/treeSelect";
+import Treeselect from "@riophae/vue-treeselect";
+import AddOrUpdate from './poweraxis-add-or-update'
+import poweraxisForm from './poweraxisForm'
+import mixinViewModule from '@/mixins/view-module'
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import AddLeader from './poweraxis_add_leader.vue';
+export default {
+    mixins: [mixinViewModule],
+    components: { 
+      Treeselect,
+      AddOrUpdate,
+      AddLeader,
+      poweraxisForm
+    },
+    data(){
+        return{
+            mixinViewModuleOptions: {
+                createdIsNeed: false,
+                activatedIsNeed: false, // 此⻚⾯是否在激活（进⼊）时，调⽤查询数据列表接⼝？
+                getDataListIsPage: false, // 数据列表接⼝，是否需要分⻚？
+            },
+            dataForm:{ // 查询参数
+             agencyId: '', // 组织ID
+             axisName: '', // 动力主轴节点名称
+             leaderName: '' // 动力主轴节点负责人
+            },
+            agencytree: [], // 所属组织
+            dataList:[], // 列表
+            structCategoryArr: [], // 查询动力主轴标签类别
+            leaderCategoryArr: [], // 查询动力主轴负责人标签类别
+            leaderVisible: false,
+            axisStructId: '', // 动力主轴id 添加负责人的时候用
+            structLevel: null, // 动力主轴节点级别 添加负责人的时候用
+            leaderId: '',
+            dataListLoading: false,
+            //form相关
+            formShow: false,
+            formTitle: '新增',
+        }
+    },
+    async created(){
+        this.dataListLoading = true
+        await this.getDataList()
+        await this.getAgencyTree()
+        await this.getTagCategoryArr()
+        this.dataListLoading = false
+    },
+    mounted(){
+        this.customerId = localStorage.getItem('customerId')
+        this.agencyId = localStorage.getItem('agencyId')
+    },
+    methods:{
+        handleEdit (id) {
+            this.formTitle = '修改'
+            this.formShow = true
+            this.$nextTick(() => {
+                this.$refs.ref_form.initForm('edit', id)
+            })
+        },
+        handleAdd () {
+            this.formTitle = '新增'
+            this.formShow = true
+            this.$nextTick(() => {
+                this.$refs.ref_form.initForm('add')
+            })
+        },
+        addFormCancle () {
+            this.formShow = false
+        },
+        addFormOk () {
+            this.formShow = false
+            this.getDataList()
+        },
+        diaClose () {
+        // this.$refs.ref_form.resetData()
+        this.formShow = false
+        },
+        // 获取组织列表
+        async getAgencyTree(){
+            const url = '/data/aggregator/org/agencytree'
+
+            let params = {
+                agencyId:  localStorage.getItem('agencyId'),
+                client:'gov'
+            }
+            const { data, code, msg } = await requestPost(url,params)
+            if (code === 0) {
+                let _data
+                if (data) {
+                    _data = this.removeByOrgType(data, 'agency')
+                    if (_data) {
+                        this.agencytree = this.removeEmptySubOrgList(_data)
+                    }
+                }
+            } else {
+                this.$message.error(msg)
+            }
+        },
+        removeByOrgType (orgArray, orgType) {
+            if (orgArray && orgArray.length > 0) {
+                for (let p = orgArray.length - 1; p >= 0; p--) {
+                    let orgInfo = orgArray[p]
+                    if (orgInfo) {
+                        if (orgInfo.orgType !== orgType) {
+                            orgArray.splice(p, 1)
+                        } else {
+                            this.removeByOrgType(orgInfo.subOrgList, orgType)
+                        }
+                    }
+                }
+            }
+            return orgArray
+        },
+        removeEmptySubOrgList (orgArray) {
+            orgArray.forEach((orgInfo) => {
+                if (orgInfo && orgInfo.subOrgList) {
+                    if (orgInfo.subOrgList.length === 0) {
+                        orgInfo.subOrgList = undefined
+                    } else {
+                        this.removeEmptySubOrgList(orgInfo.subOrgList)
+                    }
+                }
+            })
+            return orgArray;
+        },
+        // 初始化动力主轴组织树
+        async getDataList () {
+            const url = '/pli/power/axisStruct/list4Tree'
+
+            const { data, code, msg } = await requestPost(url, this.dataForm)
+
+            if (code === 0) {
+                this.dataList = handleTree(data, 'id', 'pid');
+            } else {
+                this.$message.error(msg)
+                
+            }
+        },
+        // 获取动力主轴标签
+        async getTagCategoryArr(){
+            const url = '/pli/power/axisTag/listSimpleAll'
+
+            let params = {}
+
+            const { data, code, msg } = await requestPost(url, params)
+
+            if (code === 0) {
+                data.forEach((item) => {
+                    if (item.tagCategory === 'struct') {
+                        this.structCategoryArr = item.tagList
+                    }
+                    if (item.tagCategory === 'leader') {
+                        this.leaderCategoryArr = item.tagList
+                    } 
+                })
+            } else {
+                this.$message.error(msg)
+            }
+        },
+        categoryCodeFormatter (row) {
+            let ca = ''
+            this.structCategoryArr.forEach((tagCategory) => {
+                if (tagCategory.categoryCode === row.categoryCode) {
+                    ca = tagCategory.categoryName
+                }
+            })
+            return ca
+        },
+        // 删除方法
+        deleteHandle_my(id) {
+            this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
+                confirmButtonText: this.$t('confirm'),
+                cancelButtonText: this.$t('cancel'),
+                type: 'warning'
+            }).then(() => {
+                this.submitDelete(id)
+            }).catch(() => {})
+        },
+        async submitDelete(id){
+            const url = '/pli/power/axisStruct/deleteById/'+ id
+            const { code, msg } = await requestPost(url)
+            if (code === 0) {
+                this.$message.success("删除成功")
+                this.getDataList()
+            } else {
+                this.$message.error(msg)
+            }
+        },
+        // 添加负责人
+        add_edit_Leader(axisStructId, leaderId, structLevel) {
+            this.leaderVisible = true
+            let agencyObj = {
+                axisStructId: axisStructId,
+                structLevel: structLevel,
+                leaderId: leaderId,
+            }
+            this.$nextTick(() => {
+                this.$refs.ref_leader.initForm(agencyObj)
+            })
+        },
+        addleaderOk() {
+            this.leaderVisible = false
+            this.axisStructId = ''
+            this.getDataList()
+        },
+        addleaderCancle() {
+           this.leaderVisible = false
+        },
+        leaderDiaClose() {
+           this.leaderVisible = false
+        },
+        // 取消按钮 
+        handleCancle () {
+            console.log('取消：：：：')
+        // this.resetData()
+        // this.$emit('dialogCancle')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped >
+.div_main {
+  width: 100%;
+}
+
+.div_search {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 30px 20px 5px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+}
+
+.item_width_1 {
+  width: 260px;
+}
+.item_width_2 {
+  width: 495px;
+}
+
+.div_table {
+  background: #ffffff;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  margin-top: 15px;
+  padding: 23px 30px 10px;
+
+  .table {
+    margin-top: 20px;
+  }
+}
+
+.div_btn {
+}
+
+.el-row {
+  /* margin-bottom: 20px; */
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  margin-right: 50px;
+}
+</style>

src/views/modules/plugins/power/poweraxisForm.vue

@@ -0,0 +1,472 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+      <div v-show="!propertyFormShow">
+        <el-form ref="ref_form"
+                 :inline="true"
+                 :model="dataForm"
+                 :rules="dataRule"
+                 :disabled="formType === 'detail'"
+                 class="form">
+
+      <el-form-item prop="categoryCode" label="类别" label-width="150px">
+          <el-select class="item_width_1" v-model="dataForm.categoryCode" @change="handelChange" placeholder="请选择类别" clearable>
+              <el-option
+              v-for="item in structCategoryArr"
+              :key="item.categoryCode"
+              :label="item.categoryName"
+              :value="item.categoryCode">
+              </el-option>
+          </el-select>
+      </el-form-item>
+          <el-form-item label="名称"
+                        prop="name"
+                        label-width="150px"
+                        style="display: block">
+            <el-input class="item_width_1"
+                      maxlength="50"
+                      show-word-limit
+                      placeholder="请输入名称"
+                      v-model="dataForm.name">
+            </el-input>
+          </el-form-item>
+          <!-- 下拉框组织的参数 -->
+          <el-form-item abel-width="150px" prop="agencyId" label="所属组织" v-if="orgListSwitch" label-width="150px">
+              <el-cascader
+                  class="item_width_1"
+                  v-model="dataForm.agencyId"
+                  :options="agencytree"
+                  placeholder="请选择所属组织"
+                  :props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }"
+                  :show-all-levels="false"
+                  clearable />
+          </el-form-item>
+          <el-form-item abel-width="150px" prop="pid" label="所属上级" v-if="!orgListSwitch" label-width="150px">
+              <el-cascader
+                class="item_width_1"
+                placeholder="请选择所属上级"
+                :options="parentStructTree"
+                v-model="dataForm.pid"
+                :props="{ expandTrigger: 'hover', emitPath: false, label: 'name', value: 'id', children: 'children' }"
+                :show-all-levels="false"
+                clearable />
+          </el-form-item>
+          <el-form-item abel-width="150px" label="排序" label-width="150px">
+              <el-input-number v-model="dataForm.sort" :min="0" :max="10" label="请输入排序"></el-input-number>
+          </el-form-item>
+          <el-form-item label="输入位置查坐标"
+                        prop="longitude"
+                        label-width="150px"
+                        style="display: block">
+            <div style="width:500px">
+              <el-input class="item_width_4"
+                        maxlength="50"
+                        placeholder="请输入关键字"
+                        v-model="keyWords">
+              </el-input>
+              <el-button style="margin-left: 10px"
+                         type="primary"
+                         size="small"
+                         @click="handleSearchMap">查询</el-button>
+              <div id="app"
+                   class="div_map"></div>
+              <div style="margin-top: 10px">
+                <span>经度</span>
+                <el-input class="item_width_3"
+                          maxlength="50"
+                          placeholder="请输入经度"
+                          :readonly="true"
+                          v-model="dataForm.longitude">
+                </el-input>
+                <span style="margin-left: 20px">纬度</span>
+                <el-input class="item_width_3"
+                          maxlength="50"
+                          placeholder="请输入纬度"
+                          :readonly="true"
+                          v-model="dataForm.latitude">
+                </el-input>
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+      <el-button size="small"
+                 v-if="formType != 'detail'"
+                 type="primary"
+                 :disabled="btnDisable"
+                 @click="handleComfirm">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+var map
+var search
+var markers
+var infoWindowList
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+      btnDisable: false,
+      dataForm: {
+        id:'',
+        name:'',
+        agencyId:'',
+        structLevel: null,
+        pid:'',
+        categoryCode:'',
+        sort:'',
+        longitude: '', //经度
+        latitude: ''//纬度
+      },
+      propertyFormShow: false,
+      keyWords: '',
+      structCategoryArr: [], // 查询动力主轴标签类别
+      leaderCategoryArr: [], // 查询动力主轴负责人标签类别
+      agencytree: [], // 绑定组织列表
+      parentStructTree: [], // 上级节点列表
+      orgListSwitch: false, // 组织列表开关
+    }
+  },
+  components: {},
+  mounted () {
+    this.initMap()
+  },
+  methods: {
+    initForm (type, id) {
+      this.$refs.ref_form.resetFields();
+      this.formType = type
+      this.getTagCategoryArr()
+      this.getAgencyTree()
+      if (this.formType === 'edit') {
+         this.getInfo(id)
+      }
+    },
+    // 获取动力主轴标签
+    async getTagCategoryArr(){
+        const url = '/pli/power/axisTag/listSimpleAll'
+        let params = {}
+        const { data, code, msg } = await requestPost(url, params)
+        if (code === 0) {
+            data.forEach((item) => {
+                if (item.tagCategory === 'struct') {
+                    this.structCategoryArr = item.tagList
+                }
+                if (item.tagCategory === 'leader') {
+                    this.leaderCategoryArr = item.tagList
+                } 
+            })
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    // 获取组织列表
+    async getAgencyTree(){
+        const url = '/data/aggregator/org/agencytree'
+
+        let params = {
+            agencyId:  localStorage.getItem('agencyId'),
+            client:'gov'
+        }
+        const { data, code, msg } = await requestPost(url,params)
+        if (code === 0) {
+            let _data
+            if (data) {
+                _data = this.removeByOrgType(data, 'agency')
+                if (_data) {
+                    this.agencytree = this.removeEmptySubOrgList(_data)
+                }
+            }
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    removeByOrgType (orgArray, orgType) {
+        if (orgArray && orgArray.length > 0) {
+            for (let p = orgArray.length - 1; p >= 0; p--) {
+                let orgInfo = orgArray[p]
+                if (orgInfo) {
+                    if (orgInfo.orgType !== orgType) {
+                        orgArray.splice(p, 1)
+                    } else {
+                        this.removeByOrgType(orgInfo.subOrgList, orgType)
+                    }
+                }
+            }
+        }
+        return orgArray
+    },
+    removeEmptySubOrgList (orgArray) {
+        orgArray.forEach((orgInfo) => {
+            if (orgInfo && orgInfo.subOrgList) {
+                if (orgInfo.subOrgList.length === 0) {
+                    orgInfo.subOrgList = undefined
+                } else {
+                    this.removeEmptySubOrgList(orgInfo.subOrgList)
+                }
+            }
+        })
+        return orgArray;
+    },
+    removeEmptyStructTree (structArray) {
+        structArray.forEach((structInfo) => {
+            if (structInfo && structInfo.children) {
+                if (structInfo.children.length === 0) {
+                    structInfo.children = undefined
+                } else {
+                    this.removeEmptyStructTree(structInfo.children)
+                }
+            }
+        })
+        return structArray;
+    },
+    // 获取信息
+    getInfo (id) {
+      this.$http.post(`/pli/power/axisStruct/queryModifyById/${id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg);
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        map.setCenter(new TMap.LatLng(this.dataForm.latitude, this.dataForm.longitude))
+        this.setMarker(this.dataForm.latitude, this.dataForm.longitude)
+        this.structCategoryArr.forEach((item) => {
+          if(item.categoryCode === this.dataForm.categoryCode){
+            this.dataForm.structLevel = item.structLevel
+            if(this.dataForm.structLevel === 0) {
+              this.orgListSwitch = true
+            } else {
+              this.orgListSwitch = false
+              this.getParentStructTree(this.dataForm.structLevel)
+            }
+          }
+        })
+      }).catch(() => {})
+    },
+    // 获取上级动力主轴节点
+    async getParentStructTree(structLevel){
+        const url = `/pli/power/axisStruct/bylevel/${structLevel}/parenttree`
+        let params = {}
+        const { data, code, msg } = await requestPost(url,params)
+        if (code === 0) {
+            this.parentStructTree = this.removeEmptyStructTree(data)
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    // 动力主轴选中后的操作
+    handelChange(val){
+        this.dataForm.categoryCode = val
+        this.structCategoryArr.forEach((item) => {
+          if(item.categoryCode === val){
+            this.dataForm.structLevel = item.structLevel
+          }
+        })
+        if (this.dataForm.structLevel === 0) {
+          this.orgListSwitch = true
+          this.dataForm.pid = '0'
+        } else {
+          this.orgListSwitch = false
+          this.dataForm.pid = ''
+          this.getParentStructTree(this.dataForm.structLevel)
+        }
+    },
+
+
+    // 添加
+    async handleComfirm () {
+      // 确定
+        this.btnDisable = true
+        setTimeout(() => {
+          this.btnDisable = false
+        }, 10000)
+        this.$refs['ref_form'].validate((valid, messageObj) => {
+          if (!valid) {
+            app.util.validateRule(messageObj)
+            this.btnDisable = false
+          } else {
+            this.addCommunity()
+          }
+
+        })
+    },
+    async addCommunity () {
+      let url = ''
+      if (this.formType === 'add') {
+        this.dataForm.id = ''
+        url = '/pli/power/axisStruct/save'
+      } else {
+        url = '/pli/power/axisStruct/update'
+      }
+      const { data, code, msg } = await requestPost(url, this.dataForm)
+      if (code === 0) {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        // this.resetData()
+        this.$emit('dialogOk')
+        this.btnDisable = false
+      } else {
+        this.btnDisable = false
+        this.$message.error(msg)
+      }
+
+    },
+    // 取消按钮 
+    handleCancle () {
+      // this.resetData()
+      this.$emit('dialogCancle')
+    },
+    resetData () {
+      this.keyWords = ''
+      this.dataForm = {
+        id:'',
+        name:'',
+        agencyId:'',
+        structLevel: null,
+        pid:'',
+        categoryCode:'',
+        sort:'',
+        longitude: '', //经度
+        latitude: ''//纬度
+      }
+      this.propertyFormShow = false
+      this.keyWords= ''
+      this.structCategoryArr = [] // 查询动力主轴标签类别
+      this.leaderCategoryArr = [] // 查询动力主轴负责人标签类别
+      this.agencytree = [] // 绑定组织列表
+      this.parentStructTree = [] // 上级节点列表
+    },
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    },
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap () {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519)
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById('app'), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45 // 设置地图旋转角度
+      })
+
+      search = new window.TMap.service.Search({ pageSize: 10 })
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: []
+      })
+      infoWindowList = Array(10)
+
+      // 监听地图平移结束
+      map.on('panend', () => {
+        this.handleMoveCenter()
+      })
+      this.handleMoveCenter()
+    },
+    setMarker (lat, lng) {
+      markers.setGeometries([])
+      markers.add([
+        {
+          id: '4',
+          styleId: 'marker',
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: 'marker4'
+          }
+        }
+      ])
+    },
+    handleSearchMap () {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close()
+      })
+      infoWindowList.length = 0
+      markers.setGeometries([])
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.keyWords,
+          bounds: map.getBounds()
+        })
+        .then((result) => {
+          let { data } = result
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng }
+            } = data[0]
+            map.setCenter(new TMap.LatLng(lat, lng))
+            this.setMarker(lat, lng)
+            this.dataForm.latitude = lat
+            this.dataForm.longitude = lng
+          } else {
+            this.$message.error('未检索到相关位置坐标')
+          }
+        })
+    },
+    handleMoveCenter () {
+      //修改地图中心点
+      const center = map.getCenter()
+      const lat = center.getLat()
+      const lng = center.getLng()
+      this.dataForm.latitude = lat
+      this.dataForm.longitude = lng
+      this.setMarker(lat, lng)
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        categoryCode:[
+            { required: true, message: "类别不能为空", trigger: "blur" }
+        ],
+        name:[
+            { required: true, message: "名称不能为空", trigger: "blur" }
+        ],
+        agencyId:[
+            { required: true, message: "所属组织不能为空", trigger: "blur" }
+        ],
+        pid:[
+            { required: true, message: "所属上级不能为空", trigger: "blur" }
+        ],
+        longitude: [
+          { required: true, message: '坐标不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  props: {}
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
+
+
+

src/views/modules/plugins/power/poweraxis_add_leader.vue

@@ -0,0 +1,358 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+        <div>
+          <el-form ref="ref_leader"
+                  :inline="true"
+                  :model="dataForm"
+                  :rules="dataRule"
+                  class="form">
+            <el-form-item label-width="150px" label="添加方式">
+              <el-radio-group v-model="tagTab" size="small">
+                <el-radio-button label="add">编辑</el-radio-button>
+                <el-radio-button label="choose">绑定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <div v-if="tagTab === 'add'">
+              <el-form-item label="类别" label-width="150px" v-if="structLevel || structLevel === 0">
+                  <el-input class="item_width_1" :readonly="true" v-model="categoryName"></el-input>
+              </el-form-item>
+              <el-form-item label="名称" prop="name" label-width="150px">
+                  <el-input class="item_width_1" v-model="dataForm.name" placeholder="负责任人名称"></el-input>
+              </el-form-item>
+              <el-form-item label="性别" prop="gender" label-width="150px">
+                <el-select class="item_width_1" v-model="dataForm.gender" clearable placeholder="性别">
+                  <el-option
+                    v-for="item in gender"
+                    :key="item.dictValue"
+                    :label="item.dictName"
+                    :value="item.dictValue"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="联系方式" label-width="150px">
+                  <el-input class="item_width_1" v-model="dataForm.mobile" placeholder="联系方式"></el-input>
+              </el-form-item>
+              <el-form-item label="简介" prop="interoduction" label-width="150px">
+                  <el-input type="textarea" class="item_width_1" v-model="dataForm.interoduction" placeholder="简介"></el-input>
+              </el-form-item>
+              <el-form-item label="头像" label-width="150px">
+                <el-upload class="avatar-uploader"
+                  :data="{customerId:customerId}"
+                  :action="uploadUlr"
+                  :show-file-list="false"
+                  :on-success="(response, file, fileList) => handleImgSuccess('avatar', response, file, fileList)"
+                  :before-upload="beforeImgUpload">
+                  <img v-if="dataForm.avatar"
+                    :src="dataForm.avatar"
+                    style="width:70px;height:70px"
+                    class="function-icon">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-form-item>
+            </div>
+            <div v-if="tagTab === 'choose'">
+              <el-form-item label="负责人" label-width="150px" prop="selectleaderId">
+                <el-select class="item_width_1" v-model="dataForm.selectleaderId" clearable placeholder="请选择负责人">
+                  <el-option
+                    v-for="item in listbriefArr"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </el-form>
+          <div class="div_btn">
+            <el-button size="small"
+                      @click="handleCancle">取 消</el-button>
+            <el-button size="small"
+                      type="primary"
+                      :disabled="btnDisable"
+                      @click="dataFormSubmitHandle">确 定</el-button>
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { requestPost } from "@/js/dai/request";
+export default {
+  data () {
+    return {
+      tagTab: 'add',
+      btnDisable: false,
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
+      dataForm: {
+        name: '',
+        gender: '',
+        mobile: '',
+        interoduction: '',
+        categoryCode: '',
+        avatar: '',
+        structReferenceId: '', // 动力主轴节点ID
+        leaderId: '',
+        selectleaderId: ''
+      },
+      structLevel: '',
+      leaderCategoryCodeArr: '', // 动力主轴节点级别
+      categoryName: '',
+      gender: [
+        { dictValue: '1', dictName: '男' },
+        { dictValue: '2', dictName: '女' }
+      ],
+      customerId: localStorage.getItem('customerId'),
+      listbriefArr: []
+    }
+  },
+
+  props: {
+  },
+  watch: {
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        gender: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        // mobile: [
+        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        // ],
+        interoduction: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        // avatar: [
+        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        // ],
+        selectleaderId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    initForm(agencyObj) {
+      // this.$refs.ref_leader.resetFields();
+      this.dataForm = {
+        name: '',
+        gender: '',
+        mobile: '',
+        interoduction: '',
+        categoryCode: '',
+        avatar: '',
+        structReferenceId: '', // 动力主轴节点ID
+        leaderId: '',
+        selectleaderId: ''
+      },
+      this.dataForm.structReferenceId = agencyObj.axisStructId
+      this.dataForm.leaderId = agencyObj.leaderId
+      this.structLevel = agencyObj.structLevel
+      this.getTagCategoryArr()
+      this.listbrief()
+      if (this.dataForm.leaderId) {
+        this.getInfo()
+      }
+    },
+    handleImgSuccess (type, res, file) {
+      if (res.code === 0 && res.msg === 'success') {
+        //         console.log('type', type)
+        // console.log('res.data.url', res.data.url)
+        this.dataForm.avatar = res.data.url
+      } else {
+        this.$message.error(res.msg)
+      }
+    },
+    beforeImgUpload (file) {
+      // const isPNG = file.type === 'image/png'
+      const isLt1M = file.size / 1024 / 1024 < 1
+
+      // if (!isPNG) {
+      //   this.$message.error('上传图片只能是 PNG 格式!')
+      // }
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 1MB!')
+      }
+      // return isPNG && isLt1M
+      return isLt1M
+    },
+    // 获取信息
+    async getInfo () {
+      // this.$http.get(`/pli/power/axisLeader/getLeaderDetai/${this.dataForm.structReferenceId}`).then(({ data: res }) => {
+      //   if (res.code !== 0) {
+      //     return this.$message.error(res.msg)
+      //   }
+      //   this.dataForm = {
+      //     ...this.dataForm,
+      //     ...res.data
+      //   }
+      // }).catch(() => {})
+      const url = `/pli/power/axisLeader/getLeaderDetail/${this.dataForm.structReferenceId}`
+      const { data, code, msg } = await requestPost(url)
+      if (code === 0) {
+          this.dataForm = {
+            ...this.dataForm,
+            ...data
+          }
+      } else {
+          this.$message.error(msg)
+      }
+    },
+    // 表单提交
+    async dataFormSubmitHandle () {
+      // 确定
+        this.btnDisable = true
+        setTimeout(() => {
+          this.btnDisable = false
+        }, 10000)
+        this.$refs['ref_leader'].validate((valid, messageObj) => {
+          if (!valid) {
+            app.util.validateRule(messageObj)
+            this.btnDisable = false
+          } else {
+            this.btnDisable = false
+            if (this.dataForm.leaderId) {
+              if (this.tagTab === 'choose') {
+                this.bindLeader()
+              } else {
+                this.updateLeader()
+              }
+            }  else {
+              this.addLeader()
+            }
+          }
+        })
+    },
+    async addLeader() {
+      this.dataForm.categoryCode = this.leaderCategoryCodeArr[this.structLevel].categoryCode
+      this.dataForm.id = ''
+      const url = '/pli/power/axisLeader/save/'
+      const { data, code, msg } = await requestPost(url, this.dataForm)
+      if (code === 0) {
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.$emit('leaderOk')
+            }
+          })
+      } else {
+          this.$message.error(msg)
+      }
+    },
+    async updateLeader() {
+      this.dataForm.categoryCode = this.leaderCategoryCodeArr[this.structLevel].categoryCode
+      const url = '/pli/power/axisLeader/update'
+      const { data, code, msg } = await requestPost(url, this.dataForm)
+      if (code === 0) {
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.$emit('leaderOk')
+            }
+          })
+      } else {
+          this.$message.error(msg)
+      }
+    },
+    async bindLeader() {
+      if (!this.dataForm.selectleaderId) {
+        return this.$message.error('请选择负责人')
+      }
+      let params = {
+          categoryCode:  this.leaderCategoryCodeArr[this.structLevel].categoryCode,
+          axisStructId: this.dataForm.structReferenceId,
+          leaderId: this.dataForm.selectleaderId
+      }
+      const url = '/pli/power/axisstructleader/bind'
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.$emit('leaderOk')
+            }
+          })
+      } else {
+          this.$message.error(msg)
+      }
+    },
+    // 获取动力主轴标签
+    async getTagCategoryArr(){
+      const url = '/pli/power/axisTag/listSimple/leader'
+      let params = {}
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.leaderCategoryCodeArr = data
+      } else {
+          this.$message.error(msg)
+      }
+      this.categoryName = this.leaderCategoryCodeArr[this.structLevel].categoryName
+    },
+    // 获取动力主轴相关负责人
+    async listbrief(){
+      const url = '/pli/power/axisstructleader/listbrief'
+      let params = {
+        structLevel: this.structLevel,
+        axisStructId: this.dataForm.structReferenceId,
+        keyWord: ''
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.listbriefArr = data
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    // 取消按钮 
+    handleCancle () {
+      this.$emit('leaderCancle')
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.avatar-uploader {
+  ::v-deep
+  .el-upload {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar {
+    width: 70px;
+    height: 70px;
+    display: block;
+  }
+  .avatar-uploader-icon {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    font-size: 28px;
+    color: #8c939d;
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    text-align: center;
+  }
+}
+</style>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>

src/views/modules/plugins/power/poweraxistag-add-or-update.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+      <el-form-item label="类别" prop="tagCategory">
+        <el-radio-group v-model="dataForm.tagCategory" size="small">
+          <el-radio-button label="struct">动力主轴</el-radio-button>
+          <el-radio-button label="leader">负责人</el-radio-button>
+          <el-radio-button label="param">默认参数</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="类别编码" prop="categoryCode">
+        <el-input v-model="dataForm.categoryCode" placeholder="标签类别编码"></el-input>
+      </el-form-item>
+      <el-form-item label="类别属性" prop="categoryName">
+        <el-input v-model="dataForm.categoryName" placeholder="标签类别属性"></el-input>
+      </el-form-item>
+      <el-form-item label="节点等级" prop="structLevel">
+        <el-radio-group v-model="dataForm.structLevel" size="small">
+          <el-radio-button label="0">一级</el-radio-button>
+          <el-radio-button label="1">二级</el-radio-button>
+          <el-radio-button label="2">三级</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="禁用" prop="forbiddenFlag">
+        <el-switch
+          v-model="dataForm.forbiddenFlag"
+          active-color="#ff4949"
+          inactive-color="#13ce66"
+          active-value="1"
+          inactive-value="0"
+          active-text="禁用"
+          inactive-text="正常">
+        </el-switch>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        tagCategory: '',
+        categoryCode: '',
+        categoryName: '',
+        structLevel: 0,
+        forbiddenFlag: '0'
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        tagCategory: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        categoryCode: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        categoryName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        structLevel: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        forbiddenFlag: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/pli/power/axisTag/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http['post'](
+          !this.dataForm.id ? '/pli/power/axisTag/save' : '/pli/power/axisTag/update', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/modules/plugins/power/poweraxistag.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-axis__powerAxisTag}">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="tagCategory" label="类别" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag size="mini" v-if="scope.row.tagCategory ==='struct'">动力主轴</el-tag>
+            <el-tag size="mini" v-if="scope.row.tagCategory ==='leader'" type="success">负责人</el-tag>
+            <el-tag size="mini" v-if="scope.row.tagCategory ==='param'" type="info">默认参数</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="categoryCode" label="类别编码" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="categoryName" label="类别属性" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="structLevel" label="节点等级" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.structLevel === 0 ? '一级' : scope.row.structLevel === 1 ? '二级' : '三级' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="forbiddenFlag" label="禁用状态" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag size="mini" v-if="scope.row.forbiddenFlag === '0'" type="success">正常</el-tag>
+            <el-tag size="mini" v-else type="danger">禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updatedTime" label="更新时间" header-align="center" align="center"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './poweraxistag-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/pli/power/axisTag/page',
+        getDataListIsPage: true,
+        deleteURL: '/pli/power/axisTag/delete',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        id: ''
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>

src/views/modules/plugins/power/servicestation.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div class="div_search">
+      <el-form :rules="dataRule" :inline="true">
+          <el-form-item label="所属组织" prop="deptName">
+              <el-cascader
+                      style="width:350px"
+                      placeholder="请选择所属组织"
+                      :options="agencytree"
+                      v-model="agencyId"
+                      :props="{ expandTrigger: 'hover', label: 'orgName', value: 'orgId', children: 'subOrgList' }"
+                      clearable/>
+          </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="loadTree()">加载动力主轴</el-button>
+            </el-form-item>
+      </el-form>
+    </div>
+    <div class="div_main">
+      <div :style="{height:rowHeight}"
+          class="div_tree">
+        <el-input placeholder="输入关键字进行过滤"
+                  v-model="filterText">
+        </el-input>
+        <el-scrollbar :style="{height:treeHeight}"
+                      class="scrollar">
+          <el-tree ref="ref_tree"
+                  v-loading="treeLoading"
+                  class="filter_tree"
+                  :data="treeData"
+                  :props="defaultProps"
+                  :highlight-current="true"
+                  node-key="id"
+                  :expand-on-click-node="false"
+                  default-expand-all
+                  :filter-node-method="filterNode"
+                  @node-click="handleNodeClick">
+          </el-tree>
+        </el-scrollbar>
+      </div>
+      <div :style="{height:rowHeight}"
+          class="div_table">
+        <servicestation-table :axisStructId="axisStructId" ref="ref_communityTable"></servicestation-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CDialog from '@c/CDialog'
+import servicestationTable from './servicestationTable'
+import { requestPost } from "@/js/dai/request";
+import { mapGetters } from 'vuex'
+export default {
+  data () {
+    return {
+      agencytree: [], // 所属组织
+      agencyId: '',
+      filterText: '',
+      treeLoading: false,
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      selTreeObj: {},
+      centerPoint: [],
+      axisStructId: '' // 动力主轴节点id
+    }
+  },
+  async mounted () {
+    // this.treeLoading = true
+    // await this.loadTree()
+    await this.getAgencyTree()
+    // this.treeLoading = false
+  },
+  computed: {
+    rowHeight () {
+      return this.$store.state.inIframe ? this.clientHeight - 230 + this.iframeHeight + 'px' : this.clientHeight - 230 + 'px'
+    },
+    treeHeight () {
+      return this.$store.state.inIframe ? this.clientHeight - 310 + this.iframeHeight + 'px' : this.clientHeight - 310 + 'px'
+    },
+    ...mapGetters(['clientHeight', 'iframeHeight']),
+
+    dataRule () {
+      return {
+        deptName:[
+            { required: true, message: "请选择", trigger: "blur" }
+        ]
+      }
+    }
+  },
+  methods: {
+    async loadTree () {
+      this.axisStructId = ''
+      if (this.agencyId.length === 0 || !this.agencyId) {
+        return this.$message.error('请选择所属组织')
+      }
+      this.treeLoading = true
+      const url = "/pli/power/data/axis/structTree"
+      let params = {
+        agencyId: this.agencyId[this.agencyId.length-1]
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      this.treeLoading = false
+      if (code === 0) {
+        this.treeData = data
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    handleNodeClick (obj) {
+      this.axisStructId = obj.id
+    },
+    filterNode (value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    // 获取组织列表
+    async getAgencyTree(){
+        const url = '/data/aggregator/org/agencytree'
+
+        let params = {
+            agencyId:this.agencyId,
+            client:'gov'
+        }
+
+        const { data, code, msg } = await requestPost(url,params)
+
+        if (code === 0) {
+            let _data
+            if (data) {
+                _data = this.removeByOrgType(data, 'agency')
+                if (_data) {
+                    this.agencytree = this.removeEmptySubOrgList(_data)
+                }
+            }
+        } else {
+            this.$message.error(msg)
+        }
+    },
+    removeByOrgType (orgArray, orgType) {
+        if (orgArray && orgArray.length > 0) {
+            for (let p = orgArray.length - 1; p >= 0; p--) {
+                let orgInfo = orgArray[p]
+                if (orgInfo) {
+                    if (orgInfo.orgType !== orgType) {
+                        orgArray.splice(p, 1)
+                    } else {
+                        this.removeByOrgType(orgInfo.subOrgList, orgType)
+                    }
+                }
+            }
+        }
+        return orgArray
+    },
+    removeEmptySubOrgList (orgArray) {
+        orgArray.forEach((orgInfo) => {
+            if (orgInfo && orgInfo.subOrgList) {
+                if (orgInfo.subOrgList.length === 0) {
+                    orgInfo.subOrgList = undefined
+                } else {
+                    this.removeEmptySubOrgList(orgInfo.subOrgList)
+                }
+            }
+        })
+        return orgArray;
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.ref_tree.filter(val);
+    }
+  },
+  components: {
+    servicestationTable, CDialog
+  }
+}
+</script>
+<style lang="scss" scoped >
+.div_search {
+  width: calc(100% - 5px);
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 30px 20px 5px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+}
+.div_main {
+  margin-top: 10px;
+  display: flex;
+}
+.scrollar {
+  margin-top: 10px;
+}
+
+.div_tree {
+  flex: 0 0 280px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  padding: 10px;
+  overflow-y: hidden;
+}
+.filter_tree {
+  overflow-x: auto;
+}
+
+.div_table {
+  margin-left: 15px;
+  // flex: 1;
+  width: calc(100% - 300px);
+  background-color: #ffffff;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.div_btn {
+  margin-top: 20px;
+}
+
+.row {
+  padding: 10px;
+}
+</style>
+
+<style>
+/* .aui-content > .el-tabs > .el-tabs__content {
+  padding: 0px;
+} */
+
+.el-tree-node:focus > .el-tree-node__content {
+  /* background-color: #ccc !important; */
+  color: #2195fe;
+}
+</style>
+<style lang="scss" scoped>
+.div_tree {
+  /deep/ .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+  }
+}
+</style>

src/views/modules/plugins/power/servicestationForm.vue

@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+      <el-form ref="ref_form"
+                :inline="true"
+                :model="dataForm"
+                :rules="dataRule"
+                :disabled="formType === 'detail'"
+                class="form">
+
+        <el-form-item label="服务站名称"
+                      prop="name"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    maxlength="50"
+                    show-word-limit
+                    placeholder="请输入服务站名称"
+                    v-model="dataForm.name">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="服务站地址"
+                      prop="address"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    maxlength="50"
+                    show-word-limit
+                    placeholder="请输入服务站地址"
+                    v-model="dataForm.address">
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="服务站坐标"
+                      prop="longitude"
+                      label-width="150px"
+                      style="display: block">
+          <div style="width:500px">
+            <el-input class="item_width_4"
+                      maxlength="50"
+                      placeholder="请输入关键字"
+                      v-model="keyWords">
+            </el-input>
+            <el-button style="margin-left: 10px"
+                        type="primary"
+                        size="small"
+                        @click="handleSearchMap">查询</el-button>
+            <div id="app"
+                  class="div_map"></div>
+            <div style="margin-top: 10px">
+              <span>经度</span>
+              <el-input class="item_width_3"
+                        maxlength="50"
+                        placeholder="请输入经度"
+                        :readonly="true"
+                        v-model="dataForm.longitude">
+              </el-input>
+              <span style="margin-left: 20px">纬度</span>
+              <el-input class="item_width_3"
+                        maxlength="50"
+                        placeholder="请输入纬度"
+                        :readonly="true"
+                        v-model="dataForm.latitude">
+              </el-input>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label-width="150px" label="排序">
+            <el-input-number v-model="dataForm.sort" :min="0" :max="10" label="请输入排序"></el-input-number>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+      <el-button size="small"
+                 v-if="formType != 'detail'"
+                 type="primary"
+                 :disabled="btnDisable"
+                 @click="handleComfirm">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from '@/js/dai/request'
+var map
+var search
+var markers
+var infoWindowList
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+      btnDisable: false,
+      dataForm: {
+        structReferenceId: '', //关联动力主轴ID
+        name: '', //服务站名称
+        address: '', // 服务站地址
+        longitude: '', //服务站经度
+        latitude: '', //服务站纬度
+        sort: '', // 排序
+      },
+      keyWords: ''
+    }
+  },
+  components: {},
+  mounted () {
+    this.initMap()
+  },
+
+  methods: {
+    async initForm (type, row, agencyObj) {
+      this.$refs.ref_form.resetFields();
+      this.agencyObj = agencyObj
+      this.formType = type
+      console.log(row)
+      if (row) {
+        this.dataForm = JSON.parse(JSON.stringify(row))
+        map.setCenter(new TMap.LatLng(this.dataForm.latitude, this.dataForm.longitude))
+        this.setMarker(this.dataForm.latitude, this.dataForm.longitude)
+      } 
+      // else {
+      //   map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude))
+      // }
+    },
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap () {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519)
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById('app'), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45 // 设置地图旋转角度
+      })
+
+      search = new window.TMap.service.Search({ pageSize: 10 })
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: []
+      })
+      infoWindowList = Array(10)
+
+      // 监听地图平移结束
+      map.on('panend', () => {
+        this.handleMoveCenter()
+      })
+      this.handleMoveCenter()
+    },
+
+    setMarker (lat, lng) {
+      markers.setGeometries([])
+      markers.add([
+        {
+          id: '4',
+          styleId: 'marker',
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: 'marker4'
+          }
+        }
+      ])
+    },
+
+    handleSearchMap () {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close()
+      })
+      infoWindowList.length = 0
+      markers.setGeometries([])
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.keyWords,
+          bounds: map.getBounds()
+        })
+        .then((result) => {
+          let { data } = result
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng }
+            } = data[0]
+            map.setCenter(new TMap.LatLng(lat, lng))
+            this.setMarker(lat, lng)
+            this.dataForm.latitude = lat
+            this.dataForm.longitude = lng
+          } else {
+            this.$message.error('未检索到相关位置坐标')
+          }
+        })
+    },
+
+    handleMoveCenter () {
+      //修改地图中心点
+      const center = map.getCenter()
+      const lat = center.getLat()
+      const lng = center.getLng()
+      this.dataForm.latitude = lat
+      this.dataForm.longitude = lng
+      this.setMarker(lat, lng)
+    },
+
+    async handleComfirm () {
+        this.btnDisable = true
+        setTimeout(() => {
+          this.btnDisable = false
+        }, 10000)
+        this.$refs['ref_form'].validate((valid, messageObj) => {
+          if (!valid) {
+            app.util.validateRule(messageObj)
+            this.btnDisable = false
+          } else {
+            this.addCommunity()
+          }
+
+        })
+    },
+    async addCommunity () {
+
+      let url = ''
+      this.dataForm.structReferenceId = this.axisStructId
+      if (this.formType === 'add') {
+        url = '/pli/power/serviceStation/save'
+      } else {
+        url = '/pli/power/serviceStation/update'
+      }
+
+      const { data, code, msg } = await requestPost(url, this.dataForm)
+
+      if (code === 0) {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.resetData()
+        this.$emit('dialogOk')
+        this.btnDisable = false
+      } else {
+        this.btnDisable = false
+        this.$message.error(msg)
+      }
+
+    },
+
+    handleCancle () {
+        this.resetData()
+        this.$emit('dialogCancle')
+    },
+    resetData () {
+      this.keyWords = ''
+      this.dataForm = {
+        name: '', // 服务站名称
+        address: '', //详细地址
+        longitude: '', //服务站经度
+        latitude: '' //服务站纬度
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          { required: true, message: '服务站名称不能为空', trigger: 'blur' },
+          {
+            min: 1,
+            max: 50,
+            message: '服务站名称长度在 1 到 50个字符',
+            trigger: 'blur'
+          }
+        ],
+        address: [
+          { required: true, message: '详细地址不能为空', trigger: 'blur' }
+        ],
+        longitude: [
+          { required: true, message: '坐标不能为空', trigger: 'blur' }
+        ]
+      }
+    },
+    propertyRule () {
+      name: [
+        { required: true, message: '物业名称不能为空', trigger: 'blur' }
+        // { min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' }
+      ]
+    }
+  },
+  props: {
+    axisStructId: { // 动力主轴id
+      type: String,
+      default: ''
+    }
+  },
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
+
+
+

src/views/modules/plugins/power/servicestationTable.vue

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <div class="div_search">
+      <div class="resi-cell">
+        <div class="resi-cell-label">服务站名</div>
+        <div class="resi-cell-value">
+          <el-input v-model="name"
+                    class="resi-cell-input"
+                    size="small"
+                    clearable
+                    placeholder="请输入服务站名">
+          </el-input>
+        </div>
+      </div>
+      <el-button style="margin-left:10px"
+                 class="diy-button--search"
+                 size="small"
+                 @click="handleSearch">查询</el-button>
+    </div>
+    <div class="div_btn">
+      <el-button style=""
+                 class="diy-button--add"
+                 size="small"
+                 @click="handleAdd">添加</el-button>
+    </div>
+    <div class="div_table">
+      <el-table ref="ref_table"
+                :data="tableData"
+                border
+                :height="tableHeight"
+                v-loading="tableLoading"
+                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
+                style="width: 100%">
+        <el-table-column prop="name"
+                         label="服务站名称"
+                         width="150">
+        </el-table-column>
+        <el-table-column prop="address"
+                         label="服务站地址">
+        </el-table-column>
+        <el-table-column prop="createdTime"
+                         label="创建时间">
+        </el-table-column>
+        <el-table-column label="操作"
+                         fixed="right"
+                         width="120"
+                         header-align="center"
+                         align="center"
+                         class="operate">
+          <template slot-scope="scope">
+            <el-button type="text"
+                       class="div-table-button--delete"
+                       size="small"
+                       @click="handleDelete(scope.row.id)">删除</el-button>
+            <el-button type="text"
+                       class="div-table-button--edit"
+                       size="small"
+                       @click="handleEdit(scope.row)">修改</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-pagination @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="pageNo"
+                       :page-sizes="[20, 50, 100, 200]"
+                       :page-size="pageSize"
+                       layout="sizes, prev, pager, next, total"
+                       :total="total">
+        </el-pagination>
+      </div>
+    </div>
+    <!-- 修改弹出框 -->
+    <el-dialog :visible.sync="formShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="formTitle"
+               width="850px"
+               top="5vh"
+               class="dialog-h"
+               @closed="diaClose">
+      <servicestation-form ref="ref_form"
+                      @dialogCancle="addFormCancle"
+                      @dialogOk="addFormOk"
+                      :axisStructId="axisStructId"></servicestation-form>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import ServicestationForm from './servicestationForm'
+import { requestPost, requestGet } from "@/js/dai/request";
+import { mapGetters } from 'vuex'
+export default {
+  data () {
+    return {
+      total: 0,
+      pageSize: 20,
+      pageNo: 0,
+      tableLoading: false,
+      name: '',
+      tableData: [],
+      //form相关
+      formShow: false,
+      formTitle: '添加'
+    }
+  },
+  components: {
+    ServicestationForm
+  },
+  computed: {
+    tableHeight () {
+      return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeight : this.clientHeight - 410
+    },
+    ...mapGetters(['clientHeight', 'iframeHeight'])
+  },
+  methods: {
+    async loadTable () {
+      this.tableLoading = true
+      const url = "/pli/power/serviceStation/page"
+      let params = {
+        limit: this.pageSize,
+        page: this.pageNo,
+        axisStructId: this.axisStructId,
+        name: this.name
+      }
+      const { data, code, msg, total } = await requestGet(url, params)
+      if (code === 0) {        
+        this.total = data.total || 0;
+        this.tableData = data.list ? data.list.map((item) => { return item }) : []
+      } else {
+        this.$message.error(msg)
+      }
+      this.tableLoading = false
+    },
+    // 删除
+    async handleDelete (id) {
+      this.$confirm("确认删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+          this.deleteKernelhousehold(id)
+        }).catch(err => {
+          console.log('取消删除')
+        })
+    },
+
+    async deleteKernelhousehold (id) {
+      const url = "/pli/power/serviceStation/delete"
+      const { data, code, msg } = await requestPost(url, [id])
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "删除成功"
+        });
+        this.loadTable()
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    handleSizeChange (val) {
+      this.pageSize = val
+      this.pageNo = 1
+      this.loadTable()
+    },
+    handleCurrentChange (val) {
+      this.pageNo = val
+      this.loadTable()
+    },
+    handleSearch () {
+      if (!this.axisStructId) {
+        return this.$message.error('请选择动力主轴节点')
+      }
+      this.loadTable()
+    },
+    diaClose () {
+      // this.$refs.ref_form.resetData()
+      this.formShow = false
+    },
+    handleAdd () {
+      if (this.axisStructId) {
+          this.formShow = true
+          this.$nextTick(() => {
+            this.$refs.ref_form.initForm('add', null, {})
+          })
+      } else {
+        return this.$message.error('请选择动力主轴节点')
+      }
+    },
+    // 修改
+    handleEdit (row) {
+      this.formTitle = '修改'
+      this.formShow = true
+      this.$nextTick(() => {
+        this.$refs.ref_form.initForm('edit', row, {})
+      })
+    },
+    addFormCancle () {
+      this.formShow = false
+    },
+    addFormOk () {
+      this.formShow = false
+      this.loadTable()
+    },
+  },
+  props: {
+    axisStructId: {
+      type: String,
+      default: '',
+    }
+  },
+  watch: {
+    axisStructId (newName) {
+      if (newName) {
+        this.pageSize = 20
+        this.pageNo = 1
+        this.loadTable()
+      } else {
+        this.pageSize = 20
+        this.pageNo = 0
+        this.total = 0;
+        this.tableData = []
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManage.scss";
+</style>
+
+<style >
+.el-message.is-closable .el-message__content {
+  line-height: 20px;
+}
+</style>
+

src/views/modules/visual/basicinfo/basicInfoMain.vue

@@ -702,12 +702,10 @@ const vueGis = {
           'features': featureData
         };
         let feature = (new GeoJSON()).readFeatures(geojsonObject)
-
         polygonSource.addFeatures(feature)
 
         let iconFeatures = [];
         feature.forEach(oneIcon => {
-
           var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
           // var center = getCenter(extent);   //获取边界区域的中心位置
           //添加标注

src/views/modules/visual/basicinfo/cpts/people-more.vue

@@ -16,7 +16,7 @@
              v-for="(fieldSubList, index) in fieldList">
           <div class="list">
             <div class="item"
-                 v-if="index == 0">
+                 v-if="index == 0 && gridName">
               <span class="item-field">所属网格：</span>
               <span>{{ gridName }}</span>
             </div>

src/views/modules/visual/plugin/power/components/house-dialog.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="dialog-bg">
+      <div class="info-dialog">
+          <img src="../../../../../../assets/img/plugins/close.png" class="info-dialog-close" @click="closeDialog">
+          <div class="card-title">
+              <img class="title-icon" src="../../../../../../assets/img/shuju/title-tip.png" />
+              <div class="title-label">更多信息</div> 
+          </div>
+          <div class="info-dialog-content">
+            <screen-table :headerStyle="headerStyle"
+                          :headerList="headerList"
+                          :tableContentStyle="headerStyle"
+                          :tableData="tableData"
+                          :visibleLoading="visibleLoading"
+                          :operate="true"
+                          @look="handleLook"></screen-table>
+          </div>
+      </div>
+      <people-more v-show="showedMoreInfo"
+                      v-if="info.id"
+                      :userId="info.id"
+                      :gridName="''"
+                      @close="showedMoreInfo = false" />
+  </div>
+</template>
+
+<script>
+import screenTable from "../../../components/screen-table/index"
+import { requestPost } from "@/js/dai/request"
+import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+export default {
+  name: 'info-dialog',
+  props: {
+    houseId: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    houseId (newVal, oldVal) {
+      this.getInfo()
+    }
+  },
+  components: {
+    screenTable,
+    peopleMore
+  },
+  data () {
+    return {
+      showedMoreInfo: false,
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "家庭成员", coulmn: 'name' },
+        { title: "与户主关系", coulmn: 'yhzgx' },
+        { title: "性别", coulmn: 'gender' },
+        { title: "是否党员", coulmn: 'isParty' },
+        { title: "身份证号", coulmn: 'idCard' },
+        { title: "手机号", coulmn: 'mobile' }
+      ],
+      headerStyle: [
+        { width: '80px' },
+        { width: '180px' },
+        { width: '200px' },
+        { width: '120px' },
+        { width: '120px' },
+        { width: '300px' },
+        { width: '240px' }
+      ],
+      tableData: [],
+      visibleLoading: true,
+      info: {}
+    }
+  },
+  created () {
+    this.getInfo()
+  },
+  methods: {
+    closeDialog () {
+        this.$emit('close')
+    },
+    async handleLook (val) {
+      this.info = { ...val }
+      console.log(JSON.stringify(val))
+      this.showedMoreInfo = true
+    },
+    async getInfo () {
+      this.visibleLoading = true
+      // console.log(this.axisStructId, this.leaderId)
+      const url = `/epmetuser/icresiuser/listhomeuserbrief/${this.houseId}`
+      const { data, code, msg } = await requestPost(url)
+      if (code === 0) {
+        this.tableData = data.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1,
+            gender: item.gender == '1' ? '男' : item.gender == '2' ? '女' : '未知',
+            isParty: item.isParty == '1' ? '是' : '否'
+          }
+        })
+      } else {
+        this.$message.error(msg)
+      }
+      this.visibleLoading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  margin: 27px 20px;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.dialog-bg {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .info-dialog {
+      width: 960px;
+      height: auto;
+      max-height: 800px;
+      background: url('../../../../../../assets/img/modules/visual/warning-box.png') no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      // left: 30%;
+      // top: 25%;
+      z-index: 999;
+      &-close {
+          position: absolute;
+          right: -15px;
+          top: -10px;
+      }
+      &-content {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          padding: 0 20px 20px 20px;
+          box-sizing: border-box;
+      }
+  }  
+}
+
+</style>

src/views/modules/visual/plugin/power/components/info-dialog.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="info-dialog" :style="'left:' + position.x + 'px; top:' + position.y + 'px;'">
+        <img src="../../../../../../assets/img/plugins/close.png" class="info-dialog-close" @click="closeDialog">
+        <div class="card-title">
+            <img class="title-icon" src="../../../../../../assets/img/shuju/title-tip.png" />
+            <div class="title-label">信息详情</div> 
+        </div>
+        <div class="info-dialog-content" v-if="infoDetail">
+            <div class="info-dialog-content-item">
+              <img class="info-dialog-content-item-img" :src="infoDetail.avatar">
+              <div class="info-dialog-content-item-info">
+                <div class="info-dialog-content-item-info-name">{{infoDetail.name}}</div>
+                <div class="info-dialog-content-item-info-mobile">手机号：{{infoDetail.mobile}}</div>
+                <div class="info-dialog-content-item-info-mobile">类别：{{infoDetail.categoryName}}</div>
+              </div>
+            </div>
+            <div class="info-dialog-content-intro" style="margin-top: 30px;">简介：{{infoDetail.interoduction}}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request"
+export default {
+  name: 'info-dialog',
+  props: {
+    axisStructId: {
+      type: String,
+      default: ''
+    },
+    leaderId: {
+      type: String,
+      default: ''
+    },
+    position: {
+      type: Object,
+      default: function () {
+        return {
+          x: '',
+          y: ''
+        }
+      }
+    }
+  },
+  watch: {
+    axisStructId (newVal, oldVal) {
+      this.getInfo()
+    }
+  },
+  data () {
+    return {
+      infoDetail: {}
+    }
+  },
+  created () {
+    this.getInfo()
+  },
+  methods: {
+    closeDialog () {
+        this.$emit('close')
+    },
+    async getInfo () {
+      // console.log(this.axisStructId, this.leaderId)
+      const url = "/pli/power/data/axis/leader"
+      let params = {
+        axisStructId: this.axisStructId,
+        leaderId: this.leaderId
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.infoDetail = data
+      } else {
+        this.$message.error(msg)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  margin: 27px 20px;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.info-dialog {
+    width: 494px;
+    height: 372px;
+    background: url('../../../../../../assets/img/plugins/tanchuang.png') no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    z-index: 999;
+    &-close {
+        position: absolute;
+        right: -15px;
+        top: -10px;
+    }
+    &-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 0 20px 20px 20px;
+        box-sizing: border-box;
+        &-item {
+          display: flex;
+          padding-left: 40px;
+          box-sizing: border-box;
+          &-img {
+            width: 120px;
+            height: 140px;
+            height: 140px;
+          }
+          &-info {
+            margin-left: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            &-name {
+              font-size: 20px;
+              font-weight: bold;
+              margin-bottom: 30px;
+            }
+            &-mobile {
+              font-size: 14px;
+              margin-bottom: 12px;
+            }
+          }
+        }
+        &-intro {
+          padding-left: 40px;
+          box-sizing: border-box;
+          word-break: break-all;
+        }
+    }
+}
+</style>

src/views/modules/visual/plugin/power/components/screen-org-map.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="div_map" id="map" ref="map"></div>
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js'
+import XYZ from 'ol/source/XYZ.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorSource from 'ol/source/Vector.js'
+import GeoJSON from 'ol/format/GeoJSON.js'
+import Point from "ol/geom/Point.js"
+import Feature from "ol/Feature.js"
+import Overlay from 'ol/Overlay'
+import { Select, DoubleClickZoom } from 'ol/interaction.js'
+import { getCenter, boundingExtent } from 'ol/extent.js'
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js'
+import { altKeyOnly, click, pointerMove } from 'ol/events/condition'
+import { getDistance } from 'ol/sphere'
+import MousePosition from 'ol/control/MousePosition'
+import { createStringXY } from 'ol/coordinate'
+import { defaults as defaultControls } from 'ol/control'
+import { mapGetters } from "vuex"
+import { Loading } from 'element-ui'
+
+let map
+let mapView
+let gaodeMapLayer // 背景地图图层
+let markerSource
+let markerLayer
+
+const iconArray = [
+    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+]
+const textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+]
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    text: feature.values_.properties.name,
+    backgroundFill: new Fill({
+      color: textColorArray[0]
+    }),
+    padding: [4, 10, 4, 10],
+    fill: new Fill({ color: "#ffffff" }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  })
+}
+export default {
+  name: "screen-org-map",
+  data() {
+    return {
+      centerPoint: [120.38945519, 36.0722275], // 中心点位置
+      zoom: 15, // 缩放范围：区14
+      minZoom: 1, // 最小缩放
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap () {
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true // x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      })
+
+      mapView = new View({
+        center: this.centerPoint,
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+      map = new Map({
+        layers: [gaodeMapLayer],
+        view: mapView,
+        target: 'map'
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+    },
+    addMarker (list, icon=iconArray[0], scale=1) {
+      markerSource = new VectorSource({
+        // features: new GeoJSON().readFeatures(geojsonObject)
+      })
+      markerLayer = new VectorLayer({
+        source: markerSource,
+        zIndex: 50
+      })
+      let features = []
+      list.forEach((item, index) => {
+        const point = [parseFloat(item.longitude), parseFloat(item.latitude)]
+        let marker = new Feature({
+          geometry: new Point(point),
+          properties: {
+            ...item
+          }
+        })
+        let iconStyle = new Style({
+          image: new Icon({
+            scale: scale,
+            src: icon
+          })
+        })
+        marker.setStyle(iconStyle)
+        features.push(marker)
+      })
+      // // 点击图标
+      // var overlayStyle = (function () {
+      //   return function (feature) {
+      //     var styles = {}
+      //     styles['Point'] = [
+      //       new Style({
+      //         image: new Icon({
+      //           scale: scale,
+      //           src: iconArray[0] // feature.values_.properties.index
+      //         })
+      //       }),
+      //       new Style({
+      //         text: createTextStyle(feature)
+      //       })
+      //     ]
+      //     return styles[feature.getGeometry().getType()]
+      //   }
+      // })()
+      // let select = new Select({
+      //   style: overlayStyle
+      // })
+      // map.addInteraction(select)
+      // select.on('select', e => {
+      //   if (e.selected.length > 0) {
+      //     console.log('------', e.selected[0].values_.properties.id)
+      //   }
+      // })
+      markerSource.addFeatures(features)
+      map.addLayer(markerLayer)
+    },
+  },
+}
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_map {
+    box-sizing: border-box;
+    // width: 100%;
+    height: 100%;
+    color: #fff;
+}
+</style>

src/views/modules/visual/plugin/power/components/screen-org-tree.vue

@@ -0,0 +1,406 @@
+<template>
+    <div class="screen-org-tree">
+      <div class="no-data" v-if="list.length == 0">
+        <img
+          src="../../../../../../assets/img/modules/visual/noData.png"
+          alt=""
+          srcset=""
+          class="no-data-img"
+        />
+      </div>
+      <div class="level-row" v-for="(level1, index1) in list" :key="index1">
+        <div class="level-1-row">
+          <div class="level-1-row-item">
+            <img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/zuo.png">
+            <div class="level-1-row-item-content">
+              <div class="level-1-row-item-content-info" @click.stop="onClickNode(level1.id)">
+                <img src="../../../../../../assets/img/plugins/dangqi.png" class="level-1-row-item-content-info-icon">
+                <div class="level-1-row-item-content-info-text">
+                  <div class="level-1-row-item-content-info-text-title">{{level1.name}}</div>
+                  <div class="level-1-row-item-content-info-text-leader">书记: {{level1.leaderName}}
+                    <img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-1-row-item-content-info-text-leader-icon" @click.stop="onShowInfoDialog(level1.id, level1.leaderId, $event)">
+                  </div>
+                </div>
+              </div>
+              <img src="../../../../../../assets/img/plugins/jiantou-D.png" class="level-1-row-item-content-arrow">
+            </div>
+            <img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/you.png">
+          </div>
+        </div>
+        <div class="level-2-row">
+          <div class="level-2-row-item" v-for="(level2, index2) in level1.children" :key="index2" @click.stop="onClickNode(level2.id)">
+            <img class="level-2-row-item-top" src="../../../../../../assets/img/plugins/jiantou-A.png">
+            <div class="level-2-row-item-content">
+              <img src="../../../../../../assets/img/plugins/danghui.png" class="level-2-row-item-content-icon">
+              <div class="level-2-row-item-content-title">{{level2.name}}</div>
+              <div class="level-2-row-item-content-leader">书记: {{level2.leaderName}}
+                <img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-2-row-item-content-leader-icon" @click.stop="onShowInfoDialog(level2.id, level2.leaderId, $event)">
+              </div>
+            </div>
+            <img class="level-2-row-item-bottom" src="../../../../../../assets/img/plugins/jiantou-X.png">
+            <div class="level-3-item" v-for="(level3, index3) in level2.children" :key="index3" @click.stop="onClickNode(level3.id)">
+              <img src="../../../../../../assets/img/plugins/dian.png" class="level-3-item-icon">
+              <div class="level-3-item-title">{{level3.name}}</div>
+              <div class="level-3-item-leader">{{level3.leaderName}}</div>
+              <img class="level-3-item-leader-icon" src="../../../../../../assets/img/plugins/shuoming-X.png" @click.stop="onShowInfoDialog(level3.id, level3.leaderId, $event)">
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 个人信息弹窗 -->
+      <transition name="el-fade-in-linear">
+        <info-dialog v-if="showInfo"
+                      :axisStructId="axisStructId"
+                      :leaderId="leaderId"
+                      :position="pos" 
+                      @close="showInfo = false"></info-dialog>
+      </transition>
+    </div>
+</template>
+
+<script>
+import infoDialog from './info-dialog'
+export default {
+  name: "screen-org-tree",
+  components: {
+    infoDialog
+  },
+  props: {
+    list: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      // list: [
+      //   {  
+      //     id: '0',
+      //     name: '兴德路社区党委',
+      //     leaderId: '0',
+      //     leaderName: '杨磊',
+      //     children: [
+      //       {
+      //         id: '1',
+      //         name: '第一党支部',
+      //         leaderId: '1',
+      //         leaderName: '吴红',
+      //         children: [
+      //           {
+      //             id: '11',
+      //             name: '第一党小组第一党小组第一党小组',
+      //             leaderId: '11',
+      //             leaderName: '吴红',
+      //             children: []
+      //           },
+      //           {
+      //             id: '12',
+      //             name: '第二党小组',
+      //             leaderId: '12',
+      //             leaderName: '牟振华',
+      //             children: []
+      //           },
+      //           {
+      //             id: '31',
+      //             name: '第三党小组',
+      //             leaderId: '31',
+      //             leaderName: '吴红',
+      //             children: []
+      //           },
+      //           {
+      //             id: '42',
+      //             name: '第四党小组',
+      //             leaderId: '42',
+      //             leaderName: '牟振华',
+      //             children: []
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         id: '2',
+      //         name: '第二党支部',
+      //         leaderId: '2',
+      //         leaderName: '吴红',
+      //         children: [
+      //           {
+      //             id: '21',
+      //             name: '第一党小组',
+      //             leaderId: '21',
+      //             leaderName: '吴红',
+      //             children: []
+      //           },
+      //           {
+      //             id: '22',
+      //             name: '第二党小组',
+      //             leaderId: '22',
+      //             leaderName: '牟振华',
+      //             children: []
+      //           },
+      //           {
+      //             id: '31',
+      //             name: '第三党小组',
+      //             leaderId: '31',
+      //             leaderName: '吴红',
+      //             children: []
+      //           },
+      //           {
+      //             id: '42',
+      //             name: '第四党小组',
+      //             leaderId: '42',
+      //             leaderName: '牟振华',
+      //             children: []
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         id: '3',
+      //         name: '第三党支部',
+      //         leaderId: '3',
+      //         leaderName: '吴红',
+      //         children: [
+      //           {
+      //             id: '31',
+      //             name: '第一党小组',
+      //             leaderId: '31',
+      //             leaderName: '吴红',
+      //             children: []
+      //           },
+      //           {
+      //             id: '32',
+      //             name: '第二党小组',
+      //             leaderId: '32',
+      //             leaderName: '牟振华',
+      //             children: []
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         id: '4',
+      //         name: '第四党支部',
+      //         leaderId: '4',
+      //         leaderName: '吴红',
+      //         children: [
+      //           {
+      //             id: '41',
+      //             name: '第一党小组',
+      //             leaderId: '41',
+      //             leaderName: '吴红',
+      //             children: []
+      //           },
+      //           {
+      //             id: '42',
+      //             name: '第二党小组',
+      //             leaderId: '42',
+      //             leaderName: '牟振华',
+      //             children: []
+      //           }
+      //         ]
+      //       },
+      //       {
+      //         id: '5',
+      //         name: '第五党支部',
+      //         leaderId: '5',
+      //         leaderName: '吴红',
+      //         children: [
+      //           {
+      //             id: '51',
+      //             name: '第一党小组',
+      //             leaderId: '51',
+      //             leaderName: '吴红',
+      //             children: []
+      //           },
+      //           {
+      //             id: '52',
+      //             name: '第二党小组',
+      //             leaderId: '52',
+      //             leaderName: '牟振华',
+      //             children: []
+      //           }
+      //         ]
+      //       }
+      //     ]
+      //   }
+      // ],
+      showInfo: false, // 是否显示个人信息弹窗
+      pos: { x: 0, y: 0 }, // 个人信息弹窗位置
+      axisStructId: '', // 传给弹窗的组织节点id
+      leaderId: '', // 传给弹窗的人员id
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    onShowInfoDialog (axisStructId, leaderId, e) {
+      this.axisStructId = axisStructId
+      this.leaderId = leaderId
+      this.pos.x = e.layerX
+      this.pos.y = e.layerY
+      this.showInfo = true
+    },
+    onClickNode (id) {
+      console.log(id)
+      this.$emit('onClickNode', { id: id })
+    }
+  },
+}
+</script>
+
+<style lang="scss" >
+.screen-org-tree {
+  width: 100%;
+  height: 100%;
+  .level-1-row {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-item {
+      width: 80%;
+      display: flex;
+      justify-content: center;
+      border-bottom: 1px dashed #2b85ff;
+      cursor: pointer;
+      &-line {
+        width: 178px;
+        height: 16px;
+        margin-top: 30px;
+      }
+      &-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 0 7px;
+        &-info {
+          width: 300px;
+          height: 80px;
+          background: url('../../../../../../assets/img/plugins/dangwei-by.png') no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          &-icon {
+            width: 57px;
+            height: 41px;
+            margin-left: 12px;
+          }
+          &-text {
+            width: calc(100% - 70px);
+            height: 100%;
+            text-align: center;
+            &-title {
+              height: 30px;
+              font-size: 26px;
+              font-weight: bold;
+              display: flex;
+              align-items: flex-end;
+              letter-spacing: 3px;
+              margin-left: 7px;
+              margin-top: 20px;
+              background-image: linear-gradient(to top, #00a2ff, #56f9ff, #ffffff);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+            &-leader {
+              height: calc(100% - 50px);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              letter-spacing: 2px;
+              font-size: 16px;
+              &-icon {
+                margin-left: 7px;
+                width: 14px;
+                height: 14px;
+                cursor: help;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .level-2-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-around;
+    &-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      &-top {
+
+      }
+      &-bottom {
+
+      }
+      &-content {
+        width: 170px;
+        height: 110px;
+        background: url('../../../../../../assets/img/plugins/zhibu-by.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        cursor: pointer;
+        &-icon {
+          margin-top: 10px;
+        }
+        &-title {
+          font-size: 20px;
+          font-weight: bold;
+          letter-spacing: 1px;
+          width: 100%;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-wrap:break-word;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          display: -webkit-box;
+        }
+        &-leader {
+          display: flex;
+          align-items: center;
+          &-icon {
+            width: 14px;
+            height: 14px;
+            margin-left: 4px;
+            cursor: help;
+          }
+        }
+      }
+      .level-3-item {
+        width: 170px;
+        height: 38px;
+        background: url('../../../../../../assets/img/plugins/xiaozu-by.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        cursor: pointer;
+        margin-bottom: 16px;
+        &-leader-icon {
+          width: 14px;
+          height: 14px;
+          cursor: help;
+        }
+      }
+    }
+  }
+  // 暂无数据
+  .no-data {
+    width: 100%;
+    height: calc(100% - 50px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-img {
+      width: 249px;
+      height: 172px;
+    }
+  }
+}
+</style>

src/views/modules/visual/plugin/power/components/screen-top-count.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="screen-top-count">
+    <div class="number" :class="'font-color-' + colorIndex"><slot name="number"></slot></div>
+    <div class="title-image"></div>
+    <div class="title"><slot name="title"></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'screen-top-count',
+  props: {
+    colorIndex: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-top-count {
+    width: 110px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    .number {
+      font-family: 'Impact';
+      font-size: 40px;
+      letter-spacing: 3px;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .font-color-0 {
+      background-image: -webkit-linear-gradient(top,#f60000,#ff6c68);
+    }
+    .font-color-1 {
+      background-image: -webkit-linear-gradient(top,#faa700,#ffd428); 
+    }
+    .font-color-2 {
+      background-image: -webkit-linear-gradient(top,#ffffff,#98efff, #30deff); 
+    }
+    .font-color-3 {
+      background-image: -webkit-linear-gradient(top,#58ffce,#21be96, #009673); 
+    }
+    .font-color-4 {
+      background-image: -webkit-linear-gradient(top,#1a5afd,#26c4ff); 
+    }
+    .font-color-5 {
+      background-image: -webkit-linear-gradient(top,#b08fff,#855eed,#592dda); 
+    }
+    .font-color-6 {
+      background-image: -webkit-linear-gradient(top,#faa700,#ffd428);
+    }
+    .font-color-7 {
+      background-image: -webkit-linear-gradient(top,#f60000,#ff6c68);
+    }
+    .title-image {
+      width: 100%;
+      height: 4px;
+      background: url('../../../../../../assets/img/plugins/faguang.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .title {
+      margin-top: 12px;
+      font-family: 'PingFang Regular';
+      font-size: 14px;
+      color: #a2c7ed;
+      text-align: center;
+    }
+}
+</style>

src/views/modules/visual/plugin/power/organization.vue

@@ -0,0 +1,564 @@
+<template>
+  <div class="warning-box">
+    <cpt-card>
+      <!-- <div class="card-title">
+        <img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          组织架构
+        </div>
+      </div> -->
+      <div class="title">
+        <img src="../../../../../assets/img/shuju/title-tip.png" />
+        <span>组织架构</span>
+        <div class="second-select cascader">
+          <el-cascader  class="customer_cascader"
+                        ref="myCascader"
+                        placeholder="请选择所属组织"
+                        :options="agencytree"
+                        v-model="agencyId"
+                        :show-all-levels="false"
+                        :props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }"
+                        clearable/>
+        </div>
+        <!-- <div class="second-select ">
+
+          <el-date-picker v-model="dateIdShow"
+                          type="date"
+                          :clearable="false"
+                          @change="handleChangeDate"
+                          :picker-options="pickerOptions"
+                          prefix-icon="el-icon-caret-bottom"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd">
+          </el-date-picker>
+
+        </div> -->
+      </div>
+      <div class="card-panel">
+        <div class="card-left">
+          <!-- <div class="card-item-title">小标题</div> -->
+          <div class="card-left-top">
+            <screen-org-tree :list="list" @onClickNode="onClickNode"></screen-org-tree>
+          </div>
+          <div class="card-left-bottom">
+            <screen-table :headerStyle="headerStyle"
+                          :headerList="headerList"
+                          :tableContentStyle="headerStyle"
+                          :tableData="tableData"
+                          :visibleLoading="visibleLoading"
+                          :operate="true"
+                          @look="handleLook"></screen-table>
+            <div class="pagination">
+              <el-pagination :current-page="pageNo"
+                             :page-size="pageSize"
+                             background
+                             layout="prev, pager, next"
+                             @size-change="pageSizeChangeHandleNew"
+                             @current-change="pageCurrentChangeHandleNew"
+                             :total="total">
+              </el-pagination>
+            </div>
+            <house-dialog v-if="showHouse"
+                      :houseId="houseId"
+                      @close="showHouse = false"></house-dialog>
+          </div>
+        </div>
+        <div class="card-right">
+          <div class="card-right-top">
+            <screen-top-count :colorIndex="item.index" v-for="(item, key) in countList" :key="key">
+                <template v-slot:number>{{item.value}}</template>
+                <template v-slot:title>{{item.title}}</template>
+            </screen-top-count>
+          </div>
+          <div class="card-title" style="margin-left: 20px; margin-bottom: 20px; margin-top: 20px;">
+            <img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
+            <div class="title-label">
+              网格分布
+            </div> 
+          </div>
+          <div class="card-right-bottom">
+            <screen-org-map ref="orgMap"></screen-org-map>
+            <div class="legend">
+              <div class="legend-item">
+                <img src="../../../../../assets/img/plugins/danghui.png" class="legend-item-icon">
+                <div class="legend-item-text">党群服务站</div>
+              </div>
+              <div class="legend-item">
+                <img src="../../../../../assets/img/plugins/louyuanxiaozu.png" class="legend-item-icon">
+                <div class="legend-item-text">楼院党小组</div>
+              </div>
+              <div class="legend-item">
+                <img src="../../../../../assets/img/plugins/dangyuanzhongxinhu.png" class="legend-item-icon">
+                <div class="legend-item-text">党员中心户</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick"
+import cptCard from "@/views/modules/visual/cpts/card"
+import screenMap from "@/views/modules/visual/components/screen-map"
+import screenTable from "../../components/screen-table/index"
+import screenOrgMap from './components/screen-org-map.vue'
+import screenOrgTree from './components/screen-org-tree.vue'
+import screenTopCount from './components/screen-top-count.vue'
+import houseDialog from './components/house-dialog.vue'
+import { requestPost } from "@/js/dai/request"
+
+import dhIcon from '@/assets/img/plugins/danghui.png'
+import lyxzIcon from '@/assets/img/plugins/louyuanxiaozu.png'
+import dyzxhIcon from '@/assets/img/plugins/dangyuanzhongxinhu.png'
+
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+    screenMap,
+    screenOrgMap,
+    screenOrgTree,
+    screenTopCount,
+    houseDialog
+  },
+  data() {
+    return {
+      headerList: [
+        { title: "序号", coulmn: 'index', width: '100px' },
+        { title: "党员", coulmn: 'ownerName' },
+        { title: "地址", coulmn: 'address' }
+      ],
+      headerStyle: [
+        { width: '100px' },
+        { width: '200px' },
+        { width: '400px' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      agencytree: [],
+      agencyId: '',
+      noInit: false,
+      visibleLoading: false,
+      pageNo: 1,
+      pageSize: 5,
+      total: 0,
+      list: [],
+      countList: {
+        gridNum: { index: 0, title: '网格党支部', value: '0' },
+        groupNum: { index: 1, title: '楼院党小组', value: '0' },
+        kernelHouseHoldNum: { index: 2, title: '党员中心户', value: '0' },
+        partyMemberNum: { index: 3, title: '党员数', value: '0' },
+        serviceStationNum: { index: 4, title: '网格党群服务站实体阵地数', value: '0' },
+        volunteerTeamNum: { index: 5, title: '社区服务队伍数', value: '0' }
+      },
+      axisStructId: '', // 动力主轴节点
+      showHouse: false, // 显示house-dialog
+      houseId: '', // 房屋ID
+      dangqunList: [], // 党群服务站列表
+      xiaozuList: [], // 楼院小组地图坐标列表
+      zhongxinhuList: [], // 党员中心户列表
+    }
+  },
+  async mounted() {
+    this.showInfo = false
+    // const { user } = this.$store.state
+    // this.agencyId = user.agencyId
+    // console.log('agencyId-------', this.agencyId)
+    // this.agencyId = '50140d770c578100328792121aa7b3c5'
+    this.axisStructId = '1518062548749725697'
+    await nextTick(100)
+    await this.getAgencylist()//获取组织级别
+    await this.getStructTree()
+    await this.getCount()
+    await this.getMapData()
+  },
+  methods: {
+    onClickNode (e) {
+      this.axisStructId = e.id
+      this.getList()
+    },
+    async handleLook (val) {
+      this.houseId = val.houseId
+      this.showHouse = true
+    },
+    pageSizeChangeHandleNew (val) {
+      this.pageNo = 1
+      this.pageSize = val
+      this.getList()
+    },
+    pageCurrentChangeHandleNew (val) {
+      this.pageNo = val
+      this.getList()
+    },
+    getList() {
+      this.tableData = []
+      this.visibleLoading = true
+      let params = {
+        axisStructId: this.axisStructId,
+        pageSize: this.pageSize,
+        pageNo: this.pageNo,
+      }
+      const url = "/pli/power/data/kernelHousehold/list"
+      this.$http.post(url, params).then(res => {
+        this.total = parseInt(res.data.total)
+        this.tableData = res.data.data.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.visibleLoading = false
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    async getCount() {
+      const url = "/pli/power/data/axis/statistics"
+      let params = {
+        agencyId: this.agencyId
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        Object.keys(this.countList).forEach(item => {
+          if (item != 'partyMemberNum' && item != 'volunteerTeamNum') {
+            this.countList[item].value = data[item]
+          }
+        })
+        this.getPartyNumber() // 党员数
+        this.getVolunteerTeamNum() // 社区服务队伍数
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async getPartyNumber () {
+      const url = "/epmetuser/icresiuser/partymemberagestatistics"
+      let params = {
+        orgId: this.agencyId,
+        orgType: 'agency'
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        let count = 0
+        data.forEach(item => {
+          count += parseInt(item.value)
+        })
+        this.countList.partyMemberNum.value = count
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async getVolunteerTeamNum () {
+      const url = "/heart/userdemand/servicelist"
+      let params = {
+        serviceType: 'community_org'
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.countList.volunteerTeamNum.value = data.length || 0
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async getStructTree() {
+      const url = "/pli/power/data/axis/structTree"
+      let params = {
+        agencyId: this.agencyId
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.list = data
+        if (data.length > 0) {
+          this.axisStructId = this.list[0].id
+          this.getList()
+        }
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    getMapData() {
+      const params1 = {
+        axisStructId: this.axisStructId,
+        limit: 99
+      }
+      // 党群服务站
+      this.$http.post(`/pli/power/data/serviceStation/listPosition`, params1).then(res => {
+        res.data.data.forEach((item, index) => {
+          let ob = {
+            index: index,
+            id: item.stationId,
+            name: item.address,
+            latitude: item.latitude,
+            longitude: item.longitude
+          }
+          this.dangqunList.push(ob)
+        })
+        this.$nextTick(() => {
+          this.$refs.orgMap.addMarker(this.dangqunList, dhIcon)
+        })
+      }).catch(err => {
+        this.$message.error(err)
+      })
+      // 动力主轴节点
+      const params2 = {
+        agencyId: this.agencyId
+      }
+      const structLevel = '2'
+      this.$http.post(`/pli/power/data/axis/${structLevel}/listPosition`, params2).then(res => {
+        res.data.data.forEach((item, index) => {
+          let ob = {
+            index: index,
+            id: item.axisStructId,
+            name: item.axisStructName,
+            latitude: item.latitude,
+            longitude: item.longitude
+          }
+          this.xiaozuList.push(ob)
+        })
+        this.$nextTick(() => {
+          this.$refs.orgMap.addMarker(this.xiaozuList, lyxzIcon)
+        })
+      }).catch(err => {
+        this.$message.error(err)
+      })
+      // 党员中心户
+      this.$http.post(`/pli/power/data/kernelHousehold/listPosition`, params1).then(res => {
+        res.data.data.forEach((item, index) => {
+          let ob = {
+            index: index,
+            id: item.houseId,
+            name: item.address,
+            latitude: item.latitude,
+            longitude: item.longitude
+          }
+          this.zhongxinhuList.push(ob)
+        })
+        this.$nextTick(() => {
+          this.$refs.orgMap.addMarker(this.zhongxinhuList, dyzxhIcon)
+        })
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    // handleClickRow(val) {
+    //   console.log('click-row----', val)
+    //   this.$router.push({
+    //     path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
+    //   })
+    // },
+    //获取组织数据
+    async getAgencylist () {
+            const url = '/data/aggregator/org/agencytree'
+
+            let params = {
+                agencyId: this.agencyId,
+                client:'gov'
+            }
+            const { data, code, msg } = await requestPost(url,params)
+            if (code === 0) {
+                let _data
+                if (data) {
+                    _data = this.removeByOrgType(data, 'agency')
+                    if (_data) {
+                        this.agencytree = this.removeEmptySubOrgList(_data)
+                        this.agencyId = this.agencytree ? this.agencytree[0].orgId : ''
+                    }
+                }
+            } else {
+                this.$message.error(msg)
+            }
+
+    },
+        removeByOrgType (orgArray, orgType) {
+            if (orgArray && orgArray.length > 0) {
+                for (let p = orgArray.length - 1; p >= 0; p--) {
+                    let orgInfo = orgArray[p]
+                    if (orgInfo) {
+                        if (orgInfo.orgType !== orgType) {
+                            orgArray.splice(p, 1)
+                        } else {
+                            this.removeByOrgType(orgInfo.subOrgList, orgType)
+                        }
+                    }
+                }
+            }
+            return orgArray
+        },
+        removeEmptySubOrgList (orgArray) {
+            orgArray.forEach((orgInfo) => {
+                if (orgInfo && orgInfo.subOrgList) {
+                    if (orgInfo.subOrgList.length === 0) {
+                        orgInfo.subOrgList = undefined
+                    } else {
+                        this.removeEmptySubOrgList(orgInfo.subOrgList)
+                    }
+                }
+            })
+            return orgArray;
+        },
+    async handleChangeAgency (value) {
+      let selAgency = this.$refs["myCascader"].getCheckedNodes()[0].data
+      // this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+      this.agencyName = selAgency.name
+      this.agencyId = selAgency.agencyId
+      this.level = selAgency.level === 'grid' ? 'grid' : 'agency'
+    },
+  },
+}
+</script>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/typeAnalyze.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/personCategory.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.second-select {
+    margin: 0 10px 0 40px !important;
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.card-panel {
+  display: flex;
+  margin-top: 10px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    &-top {
+      width: 100%;
+      height: 550px;
+      display: flex;
+    }
+    &-bottom {
+      width: 100%;
+      height: calc(100% - 550px);
+      box-sizing: border-box;
+      margin: 0;
+      margin-top: 30px;
+      .pagination {
+        box-sizing: border-box;
+        margin-top: 20px;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+
+        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+          background: #0266d1;
+          color: #000d3f;
+        }
+
+        /deep/ .el-pagination .el-pager li {
+          background: #002e74;
+        }
+
+        /deep/ .el-pagination .btn-prev {
+          background: #002e74;
+        }
+
+        /deep/ .el-pagination .btn-next {
+          background: #002e74;
+        }
+      }
+      /deep/ .warning-table .table {
+        min-height: 300px;
+      }
+    }
+  }
+  .card-right {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    &-top {
+      width: 100%;
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+    &-bottom {
+      height: 700px;
+      width: 100%;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      padding-left: 30px;
+      .legend {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 10px;
+        &-item {
+          width: 150px;
+          display: flex;
+          align-items: center;
+          &-text {
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+.card-item-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-item-title::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-top: -6px;
+  background: #2865FA;
+  border-radius: 50%;
+}
+</style>