From b5d5f8c60de6875cd63d1a470bbbbafa26ec2b96 Mon Sep 17 00:00:00 2001
From: zhaoyongnian <541231643@qq.com>
Date: Fri, 22 Apr 2022 19:40:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=9A=E7=BE=A4=E6=9C=8D=E5=8A=A1=E7=AB=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/power/poweraxis-add-or-update.vue |   2 +
 .../modules/plugins/power/servicestation.vue  | 242 ++++++++++++++
 .../plugins/power/servicestationForm.vue      | 303 ++++++++++++++++++
 .../plugins/power/servicestationTable.vue     | 240 ++++++++++++++
 4 files changed, 787 insertions(+)
 create mode 100644 src/views/modules/plugins/power/servicestation.vue
 create mode 100644 src/views/modules/plugins/power/servicestationForm.vue
 create mode 100644 src/views/modules/plugins/power/servicestationTable.vue

diff --git a/src/views/modules/plugins/power/poweraxis-add-or-update.vue b/src/views/modules/plugins/power/poweraxis-add-or-update.vue
index e53c81e4..a6c9b498 100644
--- a/src/views/modules/plugins/power/poweraxis-add-or-update.vue
+++ b/src/views/modules/plugins/power/poweraxis-add-or-update.vue
@@ -81,12 +81,14 @@
             <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>
diff --git a/src/views/modules/plugins/power/servicestation.vue b/src/views/modules/plugins/power/servicestation.vue
new file mode 100644
index 00000000..eb68fc23
--- /dev/null
+++ b/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>
diff --git a/src/views/modules/plugins/power/servicestationForm.vue b/src/views/modules/plugins/power/servicestationForm.vue
new file mode 100644
index 00000000..0deec305
--- /dev/null
+++ b/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>
+
+
+
diff --git a/src/views/modules/plugins/power/servicestationTable.vue b/src/views/modules/plugins/power/servicestationTable.vue
new file mode 100644
index 00000000..e547f414
--- /dev/null
+++ b/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="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="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 } 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: {
+    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 = {
+        pageSize: this.pageSize,
+        pageNo: this.pageNo,
+        axisStructId: this.axisStructId,
+        ownerName: this.ownerName
+      }
+      const { data, code, msg, total } = await requestPost(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>
+