|
|
@@ -1,849 +0,0 @@
|
|
|
-<template>
|
|
|
- <div style="width:100%;height:calc(100vh - 110px);">
|
|
|
- <div v-loading="treeLoading" style="width:350px;height:100%;float:left;border-right:1px solid #409EFF;">
|
|
|
- <div style="width:100%;height:calc(100% - 150px);background:#fff;padding:8px;">
|
|
|
- <div style="width:100%;height:100%;border:1px solid rgb(232,232,232);background:rgb(248,248,248);border-radius:4px;padding:8px;">
|
|
|
- <el-tree
|
|
|
- ref="tree"
|
|
|
- :data="dmaData"
|
|
|
- node-key="id"
|
|
|
- highlight-current
|
|
|
- :props="{ children: 'partitionList', label: 'dmaName' }"
|
|
|
- :expand-on-click-node="false"
|
|
|
- :default-expanded-keys="[0]"
|
|
|
- style="font-weight: normal;height:100%;background:rgb(248,248,248); overflow-y: auto;"
|
|
|
- @node-click="nodeClick"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width:100%;height:150px;border-top:1px solid #409EFF; display: flex; justify-content: space-around; align-items: center;">
|
|
|
- <div
|
|
|
- v-for="(item, index) in splitSheetsList"
|
|
|
- :key="index"
|
|
|
- style=" width: 100px; height: 80px; font-size: 14px; display: flex; flex-direction: column; justify-content: space-around; align-self: center;"
|
|
|
- >
|
|
|
- <div style=" font-weight: 600; display: flex; justify-content: center; align-items: center;">
|
|
|
- <span style=" width: 10px; height: 10px; margin-right: 4px;" :style="{ background: item.background }" />
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style=" display: flex; justify-content: center; align-items: center; color: #ffffff; width: 100px; height: 30px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
|
|
|
- :style="{ background: item.background }"
|
|
|
- >{{ item.count }}个</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width:calc(100% - 350px);height:100%;float:left">
|
|
|
- <div style="width:100%;height:calc(100% - 250px);">
|
|
|
- <div ref="mainMap" v-loading="mapLoading" :style="'width:calc(100% - ' + controllwidth + 'px);height:100%;float:left;border-right: 1px solid #409eff;'" />
|
|
|
- <div v-show="isControllerLayer" :style="'width:' + controllwidth +'px;height:100%;float:left; padding-bottom:4px;'">
|
|
|
- <tf-legend class="legend_dept" label="基础图层" isopen="true" style="height:calc(100% - 160px);overflow:auto;">
|
|
|
- <el-tree
|
|
|
- ref="tree"
|
|
|
- :data="layerTable"
|
|
|
- node-key="label"
|
|
|
- :default-expand-all="true"
|
|
|
- :props="{ children: 'children', label: 'label' }"
|
|
|
- show-checkbox
|
|
|
- @check="subLayerChange"
|
|
|
- >
|
|
|
- <el-row slot-scope="{ node, data }" class="custom-tree-node" style="width: 100%">
|
|
|
- <el-tooltip placement="right" effect="light">
|
|
|
- <div slot="content" style="width: 130px">
|
|
|
- <div><span class="el-tree-node__label">透明度：{{ data.opacity }}</span></div>
|
|
|
- <el-slider
|
|
|
- v-model="data.opacity"
|
|
|
- input-size="mini"
|
|
|
- :disabled="!data.visible"
|
|
|
- @input="data.layer.opacity = 1.0 - data.opacity / 100"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <span class="el-tree-node__label">{{ node.label }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </el-row>
|
|
|
- </el-tree>
|
|
|
- </tf-legend>
|
|
|
- <tf-legend class="legend_dept" label="底图图层" isopen="true" style="height:160px;">
|
|
|
- <el-row>
|
|
|
- <el-col :span="8">
|
|
|
- <el-switch
|
|
|
- v-model="showLabel"
|
|
|
- style="display: block"
|
|
|
- active-color="#2d74e7"
|
|
|
- inactive-color="#ecf2ff"
|
|
|
- active-text=""
|
|
|
- inactive-text="标注图"
|
|
|
- :disabled="!showVectorBase && !showImageBase"
|
|
|
- @change="labelChange"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" style="transform: translateX(-5px);">
|
|
|
- <span class="el-tree-node__label" style="white-space: nowrap;">透明度：{{ baseMapsNum[0] }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="10">
|
|
|
- <el-slider v-model="baseMapsNum[0]" :disabled="!showLabel" @input="inputBaseLayer(0)" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row style="margin-top: 5px">
|
|
|
- <el-col :span="8">
|
|
|
- <el-switch
|
|
|
- v-model="showVectorBase"
|
|
|
- style="display: block"
|
|
|
- active-color="#2d74e7"
|
|
|
- inactive-color="#ecf2ff"
|
|
|
- active-text=""
|
|
|
- inactive-text="矢量图"
|
|
|
- @change="labelMapChange"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" style="transform: translateX(-5px);">
|
|
|
- <span class="el-tree-node__label" style="white-space: nowrap;">透明度：{{ baseMapsNum[1] }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="10"><el-slider v-model="baseMapsNum[1]" :disabled="!showVectorBase" @input="inputBaseLayer(1)" /></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row style="margin-top: 5px">
|
|
|
- <el-col :span="8">
|
|
|
- <el-switch
|
|
|
- v-model="showImageBase"
|
|
|
- style="display: block"
|
|
|
- active-color="#2d74e7"
|
|
|
- inactive-color="#ecf2ff"
|
|
|
- active-text=""
|
|
|
- inactive-text="影像图"
|
|
|
- @change="resMapChange"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" style="transform: translateX(-5px);">
|
|
|
- <span class="el-tree-node__label" style="white-space: nowrap;">透明度：{{ baseMapsNum[2] }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="10"><el-slider v-model="baseMapsNum[2]" :disabled="!showImageBase" @input="inputBaseLayer(2)" /></el-col>
|
|
|
- </el-row>
|
|
|
- </tf-legend>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div ref="setHeight" class="setHeight" style="bottom:250px;width: calc(100% - 350px);position: absolute;height: 3px;background: #409EFF;cursor: s-resize;" />
|
|
|
- <div ref="dataBox" v-loading="tableLoaing" style="width:100%;height:250px;padding:8px;">
|
|
|
- <el-row>
|
|
|
- <el-input v-model="queryDMAname" style="display: inline-block; margin-left: 5px; width:280px;" size="mini" placeholder="请输入分区编号\分区名称关键字查询" clearable />
|
|
|
- <el-button size="mini" type="primary" @click="queryDMA">查询</el-button>
|
|
|
- <el-button size="mini" type="primary" @click="addDMA">添加</el-button>
|
|
|
- <el-button size="mini" type="primary" :disabled="canDelete" @click="deleteDMA">删除</el-button>
|
|
|
- <el-checkbox v-model="isShowPort" :disabled="currId.id == 0">出入口</el-checkbox>
|
|
|
- <el-checkbox v-model="isControllerLayer">图层控制</el-checkbox>
|
|
|
- </el-row>
|
|
|
- <el-table
|
|
|
- id="dmaTable"
|
|
|
- ref="table"
|
|
|
- class="mapTable"
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- style="width: 100%;margin-top: 8px;"
|
|
|
- height="calc(100% - 73px)"
|
|
|
- :row-style="rowClass"
|
|
|
- @sort-change="rowChange"
|
|
|
- @select="tableSelect"
|
|
|
- @select-all="tableSelect"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- @row-click="handleclick"
|
|
|
- @row-dblclick="handledbClick"
|
|
|
- ><!-- @row-click="rowClick" row-class-name="selectRowC" stripe -->
|
|
|
- <el-table-column type="selection" />
|
|
|
- <el-table-column type="index" width="50" label="序号" />
|
|
|
- <el-table-column prop="dmaCode" label="分区编码" show-overflow-tooltip />
|
|
|
- <el-table-column prop="dmaName" label="分区名称" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">{{ scope.row.dmaName || '-' }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="pname" label="父级分区" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">{{ scope.row.pname || '-' }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="areas" label="分区面积(m²)" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">{{ scope.row.areas || '-' }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="产销差范围设定(%)" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">{{ scope.row.minDiff || '0' }} % - {{ scope.row.maxDiff || '0' }} %</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="pipeLen" label="分区总管长(m)" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">{{ scope.row.pipeLen || '-' }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="text" size="small" @click="editInfo(scope.row)">编辑</el-button>
|
|
|
- <el-button type="text" size="small" @click="showInfo(scope.row)">详情</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-row style="margin-top: 8px">
|
|
|
- <el-pagination
|
|
|
- ref="pagination"
|
|
|
- small
|
|
|
- background
|
|
|
- layout="total, sizes, prev, pager, next"
|
|
|
- :page-sizes="[5, 10, 50, 100]"
|
|
|
- :total="total"
|
|
|
- style="display: inline-block;"
|
|
|
- @current-change="nodeClick(false)"
|
|
|
- @size-change="nodeClick(false)"
|
|
|
- />
|
|
|
- <span ref="pageLength" style="font-size: 13px;" class="el-pagination__total">0/0 页</span>
|
|
|
- <div style="float:right;">
|
|
|
- <el-button size="small" type="primary" @click="setExport2Excel">导出</el-button>
|
|
|
- </div>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div><div style="clear:both" />
|
|
|
- <div ref="cctvMap" style="width:100%;height:450px;display:none;border:1px solid rgb(45,116,231)" />
|
|
|
- <dma-setting-dialog ref="dialog" :view="diaView" :view-div="$refs.cctvMap" :type="diaType" :tree-data="dmaData" :that="that" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { IP } from '@/utils/request'
|
|
|
-import request from '@/utils/request'
|
|
|
-import { esriConfig, appconfig } from 'staticPub/config'
|
|
|
-import { loadModules } from 'esri-loader'
|
|
|
-import { zoningTree, getTargetZoningList, getDifferentZoningNum, deleteSelections, createAndEditZoning, getMaterialList } from '@/api/DMA/zoningManage'
|
|
|
-import ExportBtn from '@/views/zhpt/wxreportforms/components/ExportBtn'
|
|
|
-import dmaSettingDialog from '../components/DMAsettingDialog'
|
|
|
-import tfLegend from '@/views/zhpt/common/Legend'
|
|
|
-export default {
|
|
|
- components: { ExportBtn, dmaSettingDialog, tfLegend },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- currId: { id: undefined, dmaName: undefined },
|
|
|
- mapLoading: true,
|
|
|
- treeLoading: true,
|
|
|
- tableLoaing: true,
|
|
|
- dmaData: [],
|
|
|
- splitSheetsList: [],
|
|
|
- diaView: undefined,
|
|
|
- diaType: 0,
|
|
|
- that: undefined,
|
|
|
-
|
|
|
- total: 0,
|
|
|
- tableData: [],
|
|
|
- queryDMAname: '',
|
|
|
- canDelete: true,
|
|
|
- isShowPort: false,
|
|
|
- isControllerLayer: false,
|
|
|
- selectRow: [],
|
|
|
- multipleSelection: [],
|
|
|
- GraphicsLayer: null,
|
|
|
- extentLayer: null,
|
|
|
-
|
|
|
- controllwidth: 0,
|
|
|
- basemap: null,
|
|
|
- defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'label'
|
|
|
- },
|
|
|
- showLabel: false,
|
|
|
- showVectorBase: true,
|
|
|
- showImageBase: true,
|
|
|
- baseMapsNum: [0, 0, 0],
|
|
|
- layerTable: []
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- isShowPort(e) { this.watchInfoLayer.visible = e },
|
|
|
- multipleSelection(data) { // 存储选中的row
|
|
|
- this.selectRow = []
|
|
|
- if (data.length > 0) {
|
|
|
- data.forEach((item, index) => {
|
|
|
- this.selectRow.push(item.id)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- isControllerLayer(e) {
|
|
|
- if (e) {
|
|
|
- this.controllwidth = 300
|
|
|
- } else {
|
|
|
- this.controllwidth = 0
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- showLabel(e) {
|
|
|
- const basemaps = this.baseMaps
|
|
|
- basemaps[1].visible = e && this.showVectorBase
|
|
|
- // basemaps[3].visible = e && this.showImageBase
|
|
|
- },
|
|
|
- showVectorBase(e) {
|
|
|
- this.baseMaps[0].visible = e
|
|
|
- },
|
|
|
- showImageBase(e) {
|
|
|
- this.baseMaps[2].visible = e
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.that = this
|
|
|
- this.init()
|
|
|
- this.order = ['', '']
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- // this.loadMapConfig()
|
|
|
- // this.$nextTick(this.initMap);
|
|
|
- this.initMap()
|
|
|
- this.loadSetHeightEvent()
|
|
|
- },
|
|
|
-
|
|
|
- initMap() {
|
|
|
- loadModules([
|
|
|
- 'esri/Map', 'esri/views/MapView',
|
|
|
- 'esri/layers/WebTileLayer', 'esri/Basemap',
|
|
|
- 'esri/layers/TileLayer', 'esri/layers/MapImageLayer',
|
|
|
- 'esri/layers/support/LOD', 'esri/config', 'esri/layers/GraphicsLayer',
|
|
|
- 'esri/Graphic', 'esri/views/draw/Draw', 'esri/geometry/geometryEngine', 'esri/geometry/Extent'
|
|
|
- ], { url: esriConfig.baseUrl }
|
|
|
- ).then(([Map, MapView, WebTileLayer, Basemap, TileLayer, MapImageLayer, Lod, mapConfig, GraphicsLayer, Graphic, Draw, GeometryEngine, Extent]) => {
|
|
|
- mapConfig.fontsUrl = esriConfig.font_url
|
|
|
- this.Graphic = Graphic
|
|
|
- this.GraphicsLayer = GraphicsLayer
|
|
|
- var layerType = { 'webTiled': WebTileLayer, 'dynamic': MapImageLayer, 'tiled': TileLayer }
|
|
|
- var layersConfig
|
|
|
- var key = appconfig.tianMapKey
|
|
|
- var baselayers
|
|
|
- // 判断在线/离线 设置天地图底图
|
|
|
- // var tileInfo = {
|
|
|
- // visible: true,
|
|
|
- // subDomains: '01234567'.split('').map(e => 't' + e),
|
|
|
- // tileInfo: {
|
|
|
- // rows: 256, cols: 256, origin: { x: -180, y: 90 }, spatialReference: { wkid: 4490 },
|
|
|
- // lods: Array.from({ length: 20 }, (e, i) => i).map((e, i) => { return { level: i + 2, levelValue: i + 2, resolution: 0.3515625 / Math.pow(2, i), scale: 147748796.52937502 / Math.pow(2, i) } })
|
|
|
- // }, spatialReference: 4490, fullExtent: { xmin: -180, ymin: -90, xmax: 180, ymax: 90, spatialReference: 4490 }
|
|
|
- // }
|
|
|
- // 判断在线/离线 设置天地图底图
|
|
|
- var tileInfo = appconfig.isonline ? (visible) => {
|
|
|
- return {
|
|
|
- visible: visible,
|
|
|
- subDomains: '01234567'.split('').map(e => 't' + e),
|
|
|
- tileInfo: {
|
|
|
- rows: 256, cols: 256, origin: { x: -180, y: 90 }, spatialReference: { wkid: 4490 },
|
|
|
- lods: Array.from({ length: 19 }, (e, i) => i).map((e, i) => {
|
|
|
- return { level: i + 2, levelValue: i + 2, resolution: 0.3515625 / Math.pow(2, i), scale: 147748796.52937502 / Math.pow(2, i) }
|
|
|
- })
|
|
|
- }, spatialReference: 4490, fullExtent: { xmin: -180, ymin: -90, xmax: 180, ymax: 90, spatialReference: 4490 }
|
|
|
- }
|
|
|
- } : (visible) => { return { visible: visible } }
|
|
|
- layersConfig = appconfig.isonline ? [
|
|
|
- [appconfig.gisResource.tian_online_vector.config[0].url, appconfig.gisResource.tian_online_vector.type],
|
|
|
- [appconfig.gisResource.tian_online_vector_label.config[0].url, appconfig.gisResource.tian_online_vector_label.type],
|
|
|
- [appconfig.gisResource.business_map.config[0].url, appconfig.gisResource.business_map.type]
|
|
|
- ] : [
|
|
|
- [appconfig.gisResource.tian_offline_vector.config[0].url, appconfig.gisResource.tian_offline_vector.type],
|
|
|
- [appconfig.gisResource.tian_offline_vector_label.config[0].url, appconfig.gisResource.tian_offline_vector_label.type],
|
|
|
- [appconfig.gisResource.business_map.config[0].url, appconfig.gisResource.business_map.type]
|
|
|
- ]
|
|
|
- baselayers = [
|
|
|
- new layerType[layersConfig[0][1]](layersConfig[0][0] + key, tileInfo(true)),
|
|
|
- new layerType[layersConfig[1][1]](layersConfig[1][0] + key, tileInfo(true)),
|
|
|
- new layerType[layersConfig[2][1]]({ url: layersConfig[2][0] })
|
|
|
- ]
|
|
|
- // 底图
|
|
|
- const basemap = new Basemap({
|
|
|
- baseLayers: baselayers,
|
|
|
- title: 'basemap',
|
|
|
- id: 'basemap'
|
|
|
- })
|
|
|
- // 地图视角设置缩放步进级别
|
|
|
- basemap.baseLayers.items[2].load().then((e) => {
|
|
|
- cctv.constraints.lods = mapview.constraints.lods =
|
|
|
- [125000, 64000, 32000, 16000, 8000, 4000, 2000, 1000].map((s, i) => { return new Lod({ level: i, scale: s }) })
|
|
|
- })
|
|
|
-
|
|
|
- const map = new Map({ basemap: basemap })
|
|
|
- // const map = new Map({ basemap: { baseLayers: baselayers }});
|
|
|
- const mapview = this.mapView = new MapView({
|
|
|
- container: this.$refs.mainMap,
|
|
|
- map: map,
|
|
|
- spatialReference: { wkid: 4490 }
|
|
|
- })
|
|
|
-
|
|
|
- mapview.ui.components = []
|
|
|
- map.add(this.dmaLayer = new GraphicsLayer({ title: 'dma' }))
|
|
|
- map.add(this.watchLayer = new GraphicsLayer({ title: 'watch' }))
|
|
|
- map.add(this.watchInfoLayer = new GraphicsLayer({ title: 'watchInfo', visible: false }))
|
|
|
-
|
|
|
- var cctv = this.diaView = new MapView({
|
|
|
- container: this.$refs.cctvMap,
|
|
|
- map: new Map({ basemap: basemap }),
|
|
|
- spatialReference: mapview.spatialReference
|
|
|
- })
|
|
|
- cctv.ui.components = []
|
|
|
- var polygonLayer = cctv.TF_graphicsLayer = new GraphicsLayer({ title: 'edit' })
|
|
|
- cctv.map.add(cctv.TF_DMAParent = new GraphicsLayer({ title: 'dmaParent' }))
|
|
|
- cctv.map.add(cctv.TF_DMABother = new GraphicsLayer({ title: 'dmaBother' }))
|
|
|
- cctv.map.add(polygonLayer)
|
|
|
- cctv.map.add(this.watchBoxLayer = new GraphicsLayer({ title: 'watch' }))
|
|
|
- cctv.map.add(this.cctvWatchInfoLayer = cctv.TF_WatchInfoLayer = new GraphicsLayer({ title: 'watchInfo' }))
|
|
|
- polygonLayer.add(cctv.TF_polygon = new Graphic({
|
|
|
- isDraw: false,
|
|
|
- initRings: [[[0, 0]]],
|
|
|
- geometry: { type: 'polygon', rings: [[[0, 0]]], spatialReference: cctv.spatialReference },
|
|
|
- symbol: { type: 'simple-fill', color: [255, 255, 255], outline: { color: '#409EFF', width: '2px' }}
|
|
|
- }))
|
|
|
- mapview.TF_Extent = cctv.TF_Extent = Extent
|
|
|
- cctv.TF_Graphic = Graphic
|
|
|
- cctv.TF_GeometryEngine = GeometryEngine
|
|
|
- var draw = cctv.TF_Draw = new Draw({ view: cctv })// new Draw({ view: mapView })
|
|
|
- cctv.TF_drawPolygon = (start, add, move, end) => {
|
|
|
- var action = draw.create('polyline', { mode: 'click' })
|
|
|
- start()
|
|
|
- action.on('vertex-add', (evt) => add(evt, action))
|
|
|
- action.on('cursor-update', (evt) => move(evt, action))
|
|
|
- action.on('draw-complete', (evt) => end(evt, action))
|
|
|
- return action
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- mapview.center = { x: appconfig.initCenter.x, y: appconfig.initCenter.y, spatialReference: mapview.spatialReference }
|
|
|
- mapview.zoom = appconfig.initZoom
|
|
|
- cctv.extent = mapview.extent
|
|
|
- this.loadLayerTree()
|
|
|
- this.getDMAData()
|
|
|
- this.loadWatch()
|
|
|
- })
|
|
|
- // // 图层加载完成设置
|
|
|
- // mapview.when(event => {
|
|
|
- // this.loadLayerTree()
|
|
|
- // })
|
|
|
- // 图层全部加载完成设置
|
|
|
- // mapview.on('layerview-create', (event) => {
|
|
|
- // this.loadLayerTree()
|
|
|
- // })
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 加载图层树
|
|
|
- */
|
|
|
- loadLayerTree() {
|
|
|
- let tree = []
|
|
|
- const mapView = this.mapView
|
|
|
- this.baseMaps = mapView.map.basemap.baseLayers.items
|
|
|
- const pipeLayer = this.baseMaps[2]
|
|
|
- if (!pipeLayer.sublayers) return
|
|
|
- for (let i = 0, il = pipeLayer.sublayers.items, ii = il.length; i < ii; i++) {
|
|
|
- let layer = il[i]
|
|
|
- tree.push({
|
|
|
- id: layer.id,
|
|
|
- label: layer.title,
|
|
|
- visible: layer.visible ? 1 : 0,
|
|
|
- opacity: 100 - layer.opacity * 100,
|
|
|
- layer: layer
|
|
|
- })
|
|
|
- if (!layer.sublayers) continue
|
|
|
- const lastNode = tree[tree.length - 1]
|
|
|
- const nodeChildren = lastNode.children = []
|
|
|
- let visible = 0
|
|
|
- for (var j = 0, jl = layer.sublayers.items, jj = jl.length; j < jj; j++) {
|
|
|
- layer = jl[j]
|
|
|
- if (layer.visible) visible += 1
|
|
|
- nodeChildren.push({
|
|
|
- id: layer.id, label: layer.title, visible: layer.visible ? 1 : 0,
|
|
|
- opacity: 100 - layer.opacity * 100, layer: layer, parent: lastNode
|
|
|
- })
|
|
|
- }
|
|
|
- if (visible == jj) visible = 1
|
|
|
- if (visible != 0 && visible != jj) visible = 0.5
|
|
|
- tree[tree.length - 1].visible = visible
|
|
|
- }
|
|
|
- tree = tree.reverse()
|
|
|
- for (let i = 0, ii = tree.length; i < ii; i++) {
|
|
|
- if (tree[i].children) {
|
|
|
- tree[i].children = tree[i].children.reverse()
|
|
|
- }
|
|
|
- }
|
|
|
- this.layerTable = tree
|
|
|
- var treeDiv = this.$refs.tree
|
|
|
- this.$nextTick(() => {
|
|
|
- for (let i = 0, il = tree, ii = il.length; i < ii; i++) {
|
|
|
- var di = il[i]
|
|
|
- treeDiv.setChecked(di.label, di.visible)
|
|
|
- if (!di.children) continue
|
|
|
- for (let j = 0, jl = di.children, jj = jl.length; j < jj; j++) { treeDiv.setChecked(jl[j].label, jl[j].visible) }
|
|
|
- }
|
|
|
- })
|
|
|
- const basemaps = this.baseMaps
|
|
|
- // this.showLabel = basemaps[1].visible || basemaps[3].visible
|
|
|
- this.showLabel = basemaps[1].visible
|
|
|
- this.showImageBase = !(this.showVectorBase = basemaps[0].visible)
|
|
|
- this.mapView.isLayersInfoNeedReload = true
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 控制图层改变
|
|
|
- */
|
|
|
- subLayerChange(node) {
|
|
|
- let dv
|
|
|
- switch (node.visible) {
|
|
|
- case 0:
|
|
|
- node.layer.visible = true
|
|
|
- dv = node.visible = 1
|
|
|
- break
|
|
|
- case 0.5:
|
|
|
- node.layer.visible = true
|
|
|
- dv = node.visible = 1
|
|
|
- break
|
|
|
- case 1:
|
|
|
- node.layer.visible = false
|
|
|
- dv = node.visible = 0
|
|
|
- break
|
|
|
- }
|
|
|
- if (node.children) {
|
|
|
- var ldv = dv != 0
|
|
|
- for (var i = 0, il = node.children, ii = il.length; i < ii; i++) {
|
|
|
- var di = il[i]
|
|
|
- di.layer.visible = ldv
|
|
|
- di.visible = dv
|
|
|
- }
|
|
|
- } else if (node.parent) {
|
|
|
- var p = node.parent
|
|
|
- for (var i = 0, il = p.children, ii = il.length, count = 0; i < ii; i++) {
|
|
|
- if (il[i].visible == 1) count += 1
|
|
|
- }
|
|
|
- if (node.parent.visible == 0 && dv == 1) {
|
|
|
- p.layer.visible = true
|
|
|
- p.visible = count == il.length ? 1 : 0.5
|
|
|
- } else if (node.parent.visible == 1 && dv == 0) {
|
|
|
- p.visible = p.children.length == 1 ? 0 : 0.5
|
|
|
- p.layer.visible = p.children.length != 1
|
|
|
- } else if (node.parent.visible == 0.5 && dv == 0) {
|
|
|
- p.visible = count == 0 ? 0 : 0.5
|
|
|
- p.layer.visible = count != 0
|
|
|
- } else if (node.parent.visible == 0.5 && dv == 1) {
|
|
|
- p.visible = count == il.length ? 1 : 0.5
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- labelMapChange(n) {
|
|
|
- const basemaps = this.baseMaps
|
|
|
- if (n) {
|
|
|
- this.showImageBase = false
|
|
|
- // if (this.showLabel) basemaps[3].visible = !(basemaps[1].visible = n)
|
|
|
- } else this.showLabel = false
|
|
|
- },
|
|
|
- resMapChange(n) {
|
|
|
- const basemaps = this.baseMaps
|
|
|
- if (n) {
|
|
|
- this.showVectorBase = false
|
|
|
- // if (this.showLabel) basemaps[1].visible = !(basemaps[3].visible = n)
|
|
|
- } else this.showLabel = false
|
|
|
- },
|
|
|
-
|
|
|
- inputBaseLayer(w) {
|
|
|
- if (this.baseMaps && this.baseMaps.length > 0) {
|
|
|
- if (w === 0) this.baseMaps[1].opacity = 1.0 - this.baseMapsNum[w] / 100
|
|
|
- else this.baseMaps[w > 1 ? w : w - 1].opacity = 1.0 - this.baseMapsNum[w] / 100
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- labelChange(e) {
|
|
|
- this.baseMaps[this.showImageBase ? 1 : 1].visible = e
|
|
|
- },
|
|
|
-
|
|
|
- loadMapConfig() {
|
|
|
- var nextDo = () => {
|
|
|
- this.loadText = '地图加载中'
|
|
|
- this.$nextTick(this.initMap)
|
|
|
- }
|
|
|
- if (appconfig.isloadServer) {
|
|
|
- this.loadText = '服务加载中'
|
|
|
- var index = appconfig.gisResource
|
|
|
- request({ url: '/base/sourcedic/getTreeService', method: 'get' }).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- res = res.result
|
|
|
- for (var i = 0, ii = res.length; i < ii; i++) {
|
|
|
- var dr = res[i]
|
|
|
- if (index.hasOwnProperty(dr.code)) {
|
|
|
- var odr = index[dr.code]
|
|
|
- odr.type = dr.type
|
|
|
- odr.groupname = dr.name
|
|
|
- if (dr.child) {
|
|
|
- odr.config = dr.child.map(e => {
|
|
|
- return { 'name': e.name, 'url': e.cval }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- nextDo()
|
|
|
- } else this.$message('服务加载失败 启用默认服务配置')
|
|
|
- })
|
|
|
- } else nextDo()
|
|
|
- },
|
|
|
-
|
|
|
- getDMAData(callback) {
|
|
|
- this.treeLoading = true
|
|
|
- var done = () => { if (++num == 2) this.treeLoading = false }; var num = 0
|
|
|
- zoningTree().then(res => {
|
|
|
- if (res.code !== -1) {
|
|
|
- var first = (this.dmaData = res.result)[0]
|
|
|
- if (callback) callback()
|
|
|
- else {
|
|
|
- this.nodeClick(first)
|
|
|
- this.currId = { id: first.id, dmaName: first.dmaName }
|
|
|
- this.$nextTick(_ => this.$refs.tree.setCurrentKey(first.id))
|
|
|
- }
|
|
|
- }
|
|
|
- done()
|
|
|
- })
|
|
|
- getDifferentZoningNum().then(res => {
|
|
|
- const colorArr = ['#4f81bd', '#c0504d', '#9bbb59']
|
|
|
- this.splitSheetsList = Object.keys(res.result).sort().map((item, index) => {
|
|
|
- return { title: item, count: res.result[item], background: colorArr[index] }
|
|
|
- })
|
|
|
- done()
|
|
|
- })
|
|
|
- },
|
|
|
- nodeClick(node) {
|
|
|
- this.clearExtentLayer()
|
|
|
- this.tableLoaing = true
|
|
|
- if (node) this.currId = { id: node.id, dmaName: node.dmaName, partitionLevel: node.partitionLevel || 0 }
|
|
|
- var pages = this.$refs.pagination
|
|
|
- var Graphic = this.Graphic
|
|
|
- var view = this.mapView
|
|
|
- var sp = view.spatialReference
|
|
|
- var layer = this.dmaLayer
|
|
|
- this.watchInfoLayer.removeAll()
|
|
|
- var index = this.watchIndex
|
|
|
- var showLevel = this.currId.partitionLevel + 1
|
|
|
- layer.removeAll()
|
|
|
- var callback = () => { if (++doneFun == 2) this.tableLoaing = false }; var doneFun = 0
|
|
|
- getTargetZoningList({
|
|
|
- id: this.currId.id,
|
|
|
- current: pages.internalCurrentPage,
|
|
|
- size: pages.internalPageSize,
|
|
|
- content: this.queryContent ? this.queryDMAname : '',
|
|
|
- 'orders[0].asc': this.order[0],
|
|
|
- 'orders[0].column': this.order[1]
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- res = res.result.region
|
|
|
- var rows = []
|
|
|
- var [xmin, xmax, ymin, ymax] = [Infinity, -Infinity, Infinity, -Infinity]
|
|
|
- var il = res.records; var ii = il.length
|
|
|
- if (ii == 1) showLevel -= 1
|
|
|
- for (var i = 0; i < ii; i++) {
|
|
|
- var di = il[i]
|
|
|
- if (di.geometry && di.partitionLevel == showLevel) {
|
|
|
- var geo = JSON.parse(di.geometry)
|
|
|
- var cache = di.TF_feature = new Graphic({
|
|
|
- geometry: { type: 'polygon', rings: [geo.rings], spatialReference: sp },
|
|
|
- symbol: { type: 'simple-fill', color: geo.symbol.color, outline: { color: geo.symbol.outline.color, width: geo.symbol.outline.width + 'px' }}
|
|
|
- })
|
|
|
- rows.push(cache)
|
|
|
- if (di.refStandard) {
|
|
|
- rows.push(new Graphic({
|
|
|
- geometry: cache.geometry.centroid,
|
|
|
- symbol: {
|
|
|
- type: 'text', color: '#FFFFFF', haloColor: '#2D74E7', haloSize: '2px',
|
|
|
- text: Array.from({ length: (di.refStandard + '' || '').length + 2 }, (e, i) => '█').join(''),
|
|
|
- verticalAlignment: 'bottom', yoffset: '-4px', font: { size: '18px', weight: 'bold' }
|
|
|
- }
|
|
|
- }), new Graphic({
|
|
|
- geometry: cache.geometry.centroid,
|
|
|
- symbol: {
|
|
|
- type: 'text', color: 'black',
|
|
|
- text: (di.refStandard || '') + 'm³/h', verticalAlignment: 'bottom', font: { size: '14px', weight: 'bold' }
|
|
|
- }
|
|
|
- }))
|
|
|
- }
|
|
|
- cache = cache.geometry.extent
|
|
|
- if (cache.xmin < xmin) xmin = cache.xmin
|
|
|
- if (cache.xmax > xmax) xmax = cache.xmax
|
|
|
- if (cache.ymin < ymin) ymin = cache.ymin
|
|
|
- if (cache.ymax > ymax) ymax = cache.ymax
|
|
|
- }
|
|
|
- }
|
|
|
- this.tableData = res.records
|
|
|
- layer.addMany(rows)
|
|
|
- if (xmin != Infinity) view.goTo(new view.TF_Extent({ xmin, xmax, ymin, ymax, spatialReference: sp }))
|
|
|
- this.total = res.total
|
|
|
- this.$refs.pageLength.innerHTML = pages.internalCurrentPage + '/' + Math.ceil(res.total / pages.internalPageSize) + '页'
|
|
|
- } else this.$message.error('获取分区信息列表失败：' + res.message)
|
|
|
- callback()
|
|
|
- })
|
|
|
- if (this.currId.id == 0) return callback()
|
|
|
- request({ url: '/gis/area/getBing?dmaId=' + this.currId.id + '&size=300', method: 'post' }).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- res = (res.result || { records: [] }).records
|
|
|
- var rows = []
|
|
|
- for (var i = 0, ii = res.length; i < ii; i++) {
|
|
|
- var dr = res[i]
|
|
|
- var dw = index[dr.tableId]
|
|
|
- rows.push(new Graphic({
|
|
|
- geometry: { type: 'point', x: dw.lgtd, y: dw.lttd, spatialReference: sp },
|
|
|
- symbol: {
|
|
|
- type: 'text', color: 'white', haloColor: 'black', haloSize: '1px',
|
|
|
- text: dr.isout == '0' ? '入口 ' : '出口', verticalAlignment: 'bottom', font: { size: '14px', weight: 'bold' }
|
|
|
- }
|
|
|
- }))
|
|
|
- }
|
|
|
- this.watchInfoLayer.addMany(rows)
|
|
|
- } else this.$message.error('获取观察表信息列表失败：' + res.message)
|
|
|
- callback()
|
|
|
- })
|
|
|
- },
|
|
|
- // rowClick(row) { if (row.TF_feature) this.mapView.goTo(row.TF_feature.geometry) },
|
|
|
- rowChange(column) {
|
|
|
- this.order = [{ 'ascending': 'true', 'descending': 'false', 'null': '' }[column.order], column.order == null ? '' : column.prop]
|
|
|
- this.nodeClick()
|
|
|
- },
|
|
|
- queryDMA() {
|
|
|
- this.clearExtentLayer()
|
|
|
- this.queryContent = this.queryDMAname
|
|
|
- this.nodeClick()
|
|
|
- delete this.queryContent
|
|
|
- },
|
|
|
- addDMA() {
|
|
|
- this.$refs.dialog.open(0)
|
|
|
- },
|
|
|
- tableSelect(e) { this.canDelete = e.length == 0 },
|
|
|
- deleteDMA() {
|
|
|
- var ids = this.$refs.table.selection.map(e => e.id)
|
|
|
- request({ url: '/gis/area/partition?ids=' + ids.join(','), method: 'delete' }).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- this.$message.success('删除成功')
|
|
|
- } else this.$message.error('删除失败：' + res.message)
|
|
|
- this.getDMAData(this.nodeClick)
|
|
|
- })
|
|
|
- },
|
|
|
- editInfo(row) {
|
|
|
- this.$refs.dialog.open(1, row)
|
|
|
- },
|
|
|
- showInfo(row) {
|
|
|
- this.$refs.dialog.open(2, row)
|
|
|
- },
|
|
|
- loadSetHeightEvent() {
|
|
|
- var mainMap = this.$refs.mainMap
|
|
|
- var setHeight = this.$refs.setHeight
|
|
|
- var dataBox = this.$refs.dataBox
|
|
|
- var parent = mainMap.parentElement
|
|
|
- var max = Math.max; var min = Math.min
|
|
|
- var [tab, y] = [false, 0] // dHeight
|
|
|
- // eslint-disable-next-line no-return-assign
|
|
|
- setHeight.onmousedown = (e) => [tab, y] = [true, e.clientY - 64 - setHeight.offsetTop]
|
|
|
- // eslint-disable-next-line no-return-assign
|
|
|
- setHeight.onmouseup = () => tab = false
|
|
|
- window.onmousemove = (e) => {
|
|
|
- if (tab == false) return
|
|
|
- var maxHeight = parent.offsetHeight
|
|
|
- var height = max(min(maxHeight - e.clientY - y + 112, maxHeight), 0)
|
|
|
- mainMap.style.height = 'calc(100% - ' + height + 'px)'
|
|
|
- dataBox.style.height = height + 'px'// max(min(e.clientY - y, mapBox.clientHeight - box.clientHeight), 0) + 'px'
|
|
|
- setHeight.style.bottom = height + 'px'
|
|
|
- }
|
|
|
- window.onmouseup = (e) => { if (tab == true && e.button == 0) tab = false }
|
|
|
- },
|
|
|
- loadWatch() {
|
|
|
- var view = this.mapView
|
|
|
- var sp = view.spatialReference
|
|
|
- var Graphic = this.Graphic
|
|
|
- var watchs = []
|
|
|
- var watchIndex = {}
|
|
|
- var boxFeas = []
|
|
|
- request({ url: '/gis/area/tableCoord?size=300', method: 'post' }).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- res = res.result.records
|
|
|
- var rows = []; var infoRows = []
|
|
|
- for (var i = 0, ii = res.length; i < ii; i++) {
|
|
|
- var dr = res[i]
|
|
|
- var df = {
|
|
|
- id: dr.id,
|
|
|
- schName: dr.schName,
|
|
|
- lgtd: dr.lgtd,
|
|
|
- lttd: dr.lttd
|
|
|
- }
|
|
|
- rows.push(df.TF_fea = new Graphic({
|
|
|
- geometry: { type: 'point', x: dr.lgtd, y: dr.lttd, spatialReference: sp },
|
|
|
- symbol: { type: 'simple-marker', color: '#FFFFFF', size: 8, outline: { color: '#409EFF', width: 2 }}
|
|
|
- }))
|
|
|
- rows.push(df.TF_feaText = new Graphic({
|
|
|
- geometry: df.TF_fea.geometry,
|
|
|
- symbol: {
|
|
|
- type: 'text', color: 'white', haloColor: 'black', haloSize: '1px',
|
|
|
- text: dr.schName || '', yoffset: '-19px', verticalAlignment: 'bottom', font: { size: '14px', weight: 'bold' }
|
|
|
- }
|
|
|
- }))
|
|
|
- infoRows.push(df.TF_outText = new Graphic({
|
|
|
- geometry: df.TF_fea.geometry,
|
|
|
- symbol: {
|
|
|
- type: 'text', color: 'white', haloColor: 'black', haloSize: '1px',
|
|
|
- text: '', verticalAlignment: 'bottom', font: { size: '14px', weight: 'bold' }
|
|
|
- }
|
|
|
- }))
|
|
|
- boxFeas.push(df.TF_fea.clone(), df.TF_feaText.clone())
|
|
|
- watchs.push(watchIndex[dr.id] = df)
|
|
|
- }
|
|
|
- this.watchs = watchs
|
|
|
- this.watchIndex = watchIndex
|
|
|
- this.watchLayer.addMany(boxFeas)
|
|
|
- this.watchBoxLayer.addMany(rows)
|
|
|
- this.cctvWatchInfoLayer.addMany(infoRows)
|
|
|
- this.$refs.dialog.TF_options = {
|
|
|
- watchs: watchs,
|
|
|
- watchIndex: watchIndex
|
|
|
- }
|
|
|
- } else this.$message.error('观察表加载失败：' + res.message)
|
|
|
- this.mapLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
- setExport2Excel() {
|
|
|
- window.open(IP + '/gis/area/partitionById?access_token=' + this.$store.state.user.token + '&templateFlag=1&id=' + this.currId.id)
|
|
|
- },
|
|
|
- rowClass({ row, rowIndex }) {
|
|
|
- if (this.selectRow.includes(row.id)) {
|
|
|
- return { 'background-color': 'rgba(185, 221, 249, 0.75)' }
|
|
|
- }
|
|
|
- },
|
|
|
- handleSelectionChange(val) {
|
|
|
- this.multipleSelection = val
|
|
|
- console.log(val, '多选')
|
|
|
- },
|
|
|
- /**
|
|
|
- * descript 单击table行事件 2021-11-25 add by tmx
|
|
|
- */
|
|
|
- handleclick(row, column, event) {
|
|
|
- if (!row.hasOwnProperty('TF_feature')) {
|
|
|
- this.$message.warning('给选区没有分配区域!')
|
|
|
- return
|
|
|
- }
|
|
|
- if (!row.TF_feature.geometry) return
|
|
|
- const GraphicsLayer = this.GraphicsLayer
|
|
|
- var Graphic = this.Graphic
|
|
|
- const geometry = row.TF_feature.geometry
|
|
|
- const view = this.mapView
|
|
|
- const sp = view.spatialReference
|
|
|
- this.clearExtentLayer()
|
|
|
- this.extentLayer = new GraphicsLayer()
|
|
|
- view.map.add(this.extentLayer)
|
|
|
- const graphic = new Graphic({
|
|
|
- geometry: { type: 'polyline', paths: geometry.rings, spatialReference: sp },
|
|
|
- symbol: { type: 'simple-fill', color: [0, 0, 0, 0.3], outline: { color: [140, 220, 245, 1], width: '4px' }}
|
|
|
- })
|
|
|
- this.extentLayer.addMany([graphic])
|
|
|
- const extent = geometry.extent
|
|
|
- if (extent) view.goTo(extent)
|
|
|
- },
|
|
|
- /**
|
|
|
- * descript 双击table行事件 2021-11-25 add by tmx
|
|
|
- */
|
|
|
- handledbClick(row, column, event) {
|
|
|
- this.showInfo(row)
|
|
|
- },
|
|
|
-
|
|
|
- clearExtentLayer() {
|
|
|
- const view = this.mapView
|
|
|
- if (this.extentLayer) view.map.remove(this.extentLayer)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
-.el-table >>> .el-table__header-wrapper table th{
|
|
|
- height: 20px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.el-table >>> .el-table__body-wrapper table td{
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-</style>
|
tengmingxue