|
|
@@ -50,73 +50,100 @@
|
|
|
<div class="gis-content">
|
|
|
<RouterViewCom/>
|
|
|
</div>
|
|
|
- <div ref="ref_qyDom" class="qy-info" :class="`qy--info-${qyParams.qyInfo.tab}`">
|
|
|
- <div class="qy-bg-icon qy-bg-icon-1"/>
|
|
|
- <div class="qy-bg-icon qy-bg-icon-2"/>
|
|
|
- <div class="qy-bg-icon qy-bg-icon-3"/>
|
|
|
- <div class="qy-bg-icon qy-bg-icon-4"/>
|
|
|
- <div class="qy-main">
|
|
|
- <div class="qy-main-head">
|
|
|
- <div class="qy-main-head-tips">【企业】</div>
|
|
|
- <div class="qy-main-head-name">{{ qyParams.qyInfo.name }}</div>
|
|
|
- <SvgIcon class="__hover" name="tips" size="14" color="#8FFFFF" @click="onCloseQy"/>
|
|
|
- </div>
|
|
|
- <div class="qy-main-tab">
|
|
|
- <template v-for="item in [
|
|
|
+ <VideoPlayKedaCom v-if="showVideo" v-model:layout="videoLayout" :form="qyParams.sbInfo" @close="showVideo = false"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div ref="ref_qyDom" class="qy-info" :class="`qy--info-${qyParams.qyInfo.tab}`">
|
|
|
+ <div class="qy-bg-icon qy-bg-icon-1"/>
|
|
|
+ <div class="qy-bg-icon qy-bg-icon-2"/>
|
|
|
+ <div class="qy-bg-icon qy-bg-icon-3"/>
|
|
|
+ <div class="qy-bg-icon qy-bg-icon-4"/>
|
|
|
+ <div class="qy-main">
|
|
|
+ <div class="qy-main-head">
|
|
|
+ <div class="qy-main-head-tips">【企业】</div>
|
|
|
+ <div class="qy-main-head-name">{{ qyParams.qyInfo.name }}</div>
|
|
|
+ <SvgIcon class="__hover" name="close_4" size="14" color="#8FFFFF" @click="onCloseQy"/>
|
|
|
+ </div>
|
|
|
+ <div class="qy-main-tab">
|
|
|
+ <template v-for="item in [
|
|
|
{label: '基本信息', value: '1', disabled: false},
|
|
|
{label: '税收信息', value: '2', disabled: true},
|
|
|
{label: '运输车辆', value: '3', disabled: true},
|
|
|
{label: '能耗消息', value: '4', disabled: true},
|
|
|
{label: '周边设备', value: '5', disabled: false},
|
|
|
]">
|
|
|
- <div class="qy-main-tab-item __hover" :class="{active: item.value === qyParams.qyInfo.tab, disabled: item.disabled}" @click="item.disabled ? undefined : qyParams.qyInfo.tab = item.value">{{item.label}}</div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div v-if="qyParams.qyInfo.tab === '1'" class="qy-main-content-1">
|
|
|
- <div>企业名称:{{qyParams.qyInfo[qyParams.qyInfo.tab].name}}</div>
|
|
|
- <div>企业法人:{{qyParams.qyInfo[qyParams.qyInfo.tab].people}}</div>
|
|
|
- <div>统一社会信用代码:{{qyParams.qyInfo[qyParams.qyInfo.tab].number}}</div>
|
|
|
- <div>经营地址:{{qyParams.qyInfo[qyParams.qyInfo.tab].address}}</div>
|
|
|
+ <div class="qy-main-tab-item __hover" :class="{active: item.value === qyParams.qyInfo.tab, disabled: item.disabled}" @click="item.disabled ? undefined : qyParams.qyInfo.tab = item.value">{{item.label}}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div v-if="qyParams.qyInfo.tab === '1'" class="qy-main-content-1">
|
|
|
+ <div>企业名称:{{qyParams.qyInfo[qyParams.qyInfo.tab].name}}</div>
|
|
|
+ <div>企业法人:{{qyParams.qyInfo[qyParams.qyInfo.tab].people}}</div>
|
|
|
+ <div>统一社会信用代码:{{qyParams.qyInfo[qyParams.qyInfo.tab].number}}</div>
|
|
|
+ <div>经营地址:{{qyParams.qyInfo[qyParams.qyInfo.tab].address}}</div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="qyParams.qyInfo.tab === '5'" class="qy-main-content-5">
|
|
|
+ <div class="qy-main-content-5-radius">
|
|
|
+ 周边范围：
|
|
|
+ <div class="radius-min __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius > 1 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius--) : undefined">-</div>
|
|
|
+ <CusFormColumn
|
|
|
+ link="number"
|
|
|
+ label=""
|
|
|
+ :min="1"
|
|
|
+ :max="30"
|
|
|
+ :clearable="false"
|
|
|
+ v-model:param="qyParams.qyInfo[qyParams.qyInfo.tab].radius"
|
|
|
+ @blur="handleRangeBlur"/>
|
|
|
+ <div class="radius-max __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius < 30 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius++) : undefined">+</div>
|
|
|
+ km
|
|
|
+ <div class="submit __hover" @click="onRadiusSubmit">确定</div>
|
|
|
+ <div class="reset __hover" @click="onRadiusReset">重置</div>
|
|
|
</div>
|
|
|
- <div v-else-if="qyParams.qyInfo.tab === '5'" class="qy-main-content-5">
|
|
|
- <div class="qy-main-content-5-radius">
|
|
|
- 周边范围：
|
|
|
- <div class="radius-min __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius > 1 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius--) : undefined">-</div>
|
|
|
- <CusFormColumn
|
|
|
- link="number"
|
|
|
- label=""
|
|
|
- :min="1"
|
|
|
- :max="30"
|
|
|
- :clearable="false"
|
|
|
- v-model:param="qyParams.qyInfo[qyParams.qyInfo.tab].radius"
|
|
|
- @blur="handleRangeBlur"/>
|
|
|
- <div class="radius-max __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius < 30 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius++) : undefined">+</div>
|
|
|
- km
|
|
|
- <div class="submit __hover" @click="onRadiusSubmit">确定</div>
|
|
|
- <div class="reset __hover">重置</div>
|
|
|
- </div>
|
|
|
- <div class="qy-main-content-5-table" :style="`height: ${25 + (qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length > 5 ? 5 * 25 : qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length * 25)}px;`">
|
|
|
- <el-auto-resizer>
|
|
|
- <template #default="{ height, width }">
|
|
|
- <el-table-v2
|
|
|
- class="__gis-overlay_table-v2"
|
|
|
- :columns="qyParams.qyInfo[qyParams.qyInfo.tab].tableHead"
|
|
|
- :data="qyParams.qyInfo[qyParams.qyInfo.tab].tableData"
|
|
|
- :width="width"
|
|
|
- :height="height"
|
|
|
- fixed
|
|
|
- :row-height="25"
|
|
|
- :header-height="25"
|
|
|
- >
|
|
|
- <template #empty></template>
|
|
|
- </el-table-v2>
|
|
|
- </template>
|
|
|
- </el-auto-resizer>
|
|
|
- </div>
|
|
|
+ <div class="qy-main-content-5-table" :style="`height: ${25 + (qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length > 5 ? 5 * 25 : qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length * 25)}px;`" v-loading="qyParams.qyInfo[qyParams.qyInfo.tab].loading" element-loading-background="rgba(0, 0, 0, 0.3)">
|
|
|
+ <el-auto-resizer>
|
|
|
+ <template #default="{ height, width }">
|
|
|
+ <V2Table
|
|
|
+ :width="width"
|
|
|
+ :height="height"
|
|
|
+ :data="qyParams.qyInfo[qyParams.qyInfo.tab].tableData"
|
|
|
+ :center="qyParams.qyInfo['5'].center"
|
|
|
+ />
|
|
|
+ <!-- <el-table-v2-->
|
|
|
+ <!-- class="__gis-overlay_table-v2"-->
|
|
|
+ <!-- :columns="qyParams.qyInfo[qyParams.qyInfo.tab].tableHead"-->
|
|
|
+ <!-- :data="qyParams.qyInfo[qyParams.qyInfo.tab].tableData"-->
|
|
|
+ <!-- :width="width"-->
|
|
|
+ <!-- :height="height"-->
|
|
|
+ <!-- fixed-->
|
|
|
+ <!-- :row-height="25"-->
|
|
|
+ <!-- :header-height="25"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <template #empty></template>-->
|
|
|
+ <!-- </el-table-v2>-->
|
|
|
+ </template>
|
|
|
+ </el-auto-resizer>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div ref="ref_sbDom" class="sb-info">
|
|
|
+ <div class="sb-info-head">
|
|
|
+ <SvgIcon class="__hover" name="tips" size="14" color="#8FFFFF"/>设备
|
|
|
+ </div>
|
|
|
+ <div class="sb-info-close __hover" @click="onCloseSb">
|
|
|
+ <img src="@/components/easyMap/images/close.png" alt=""/>
|
|
|
+ </div>
|
|
|
+ <div class="sb-main">
|
|
|
+ <div class="sb-item">
|
|
|
+ <div class="sb-item-label">名称：</div>
|
|
|
+ <div class="sb-item-value">{{qyParams.sbInfo?.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="sb-item">
|
|
|
+ <div class="sb-item-label">状态：</div>
|
|
|
+ <div class="sb-item-value">{{qyParams.sbInfo?.online === '0' ? '在线' : '离线'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="play-button __hover" @click="showVideo = true">视频调阅</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -156,7 +183,9 @@ import { v4 } from "uuid";
|
|
|
import * as proj from "ol/proj";
|
|
|
import * as turf from '@turf/turf'
|
|
|
import * as geom from 'ol/geom';
|
|
|
-
|
|
|
+import VideoPlayKedaCom from "@/views/gis/business/common/VideoPlayKeda.vue";
|
|
|
+import V2Table from "./v2-table.vue";
|
|
|
+import {deviceQuery, enterpriseQuery} from "@/api/modules/enterprise";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: '',
|
|
|
@@ -169,6 +198,8 @@ export default defineComponent({
|
|
|
PositionCom,
|
|
|
BaseCom,
|
|
|
ExampleCom,
|
|
|
+ VideoPlayKedaCom,
|
|
|
+ V2Table
|
|
|
},
|
|
|
props: {},
|
|
|
setup(props, {emit}) {
|
|
|
@@ -194,8 +225,21 @@ export default defineComponent({
|
|
|
qyInfo: <any>{},
|
|
|
analysisLayer: <any>null,
|
|
|
analysisSource: <any>null,
|
|
|
- analysisCircle: <any>null
|
|
|
- }
|
|
|
+ analysisCircle: <any>null,
|
|
|
+ tempSbFeature: <any>null,
|
|
|
+ sbOverlay: <any>null,
|
|
|
+ sbInfo: <any>{
|
|
|
+ name: '505县道新安村路口1-枪机-0110580',
|
|
|
+ code: '46044123124125125',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ videoLayout: {
|
|
|
+ width: 640,
|
|
|
+ height: 366,
|
|
|
+ left: 1200,
|
|
|
+ top: 460
|
|
|
+ },
|
|
|
+ showVideo: false
|
|
|
})
|
|
|
const ToolsMapper = [
|
|
|
{label: '图层', value: 'element', com: ElementCom},
|
|
|
@@ -214,22 +258,41 @@ export default defineComponent({
|
|
|
state.map.on('singleclick', e => {
|
|
|
let flag = false
|
|
|
map.forEachFeatureAtPixel(e.pixel, (f) => {
|
|
|
- if (!flag) {
|
|
|
+ if (!flag && f.get('featureType')) {
|
|
|
flag = true
|
|
|
- // 恢复上一个要素的样式
|
|
|
- if (state.qyParams.tempFeature) {
|
|
|
- state.qyParams.tempFeature.get('resetStyle')()
|
|
|
- }
|
|
|
- // 新的要素
|
|
|
- if (f.get('isAnalysis')) {
|
|
|
- f.setStyle(f.get('analysisActiveStyle'))
|
|
|
- } else {
|
|
|
- f.setStyle(f.get('activeStyle'))
|
|
|
+ if (f.get('featureType') === 'qy') { // 企业
|
|
|
+ // 恢复上一个要素的样式
|
|
|
+ if (f.getId() !== state.qyParams.tempFeature?.getId()) {
|
|
|
+ state.qyParams.tempFeature?.get('resetStyle')?.()
|
|
|
+ state.qyParams.analysisSource?.clear()
|
|
|
+ // 新的要素
|
|
|
+ if (f.get('isAnalysis')) {
|
|
|
+ f.setStyle(f.get('analysisActiveStyle'))
|
|
|
+ } else {
|
|
|
+ f.setStyle(f.get('activeStyle'))
|
|
|
+ }
|
|
|
+ state.qyParams.qyInfo = f.get('info')
|
|
|
+ // 备份新的要素
|
|
|
+ state.qyParams.tempFeature = f
|
|
|
+ }
|
|
|
+ state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
|
|
|
+ } else if (f.get('featureType') === 'sb') { // 设备
|
|
|
+ // 恢复上一个要素的样式
|
|
|
+ if (f.getId() !== state.qyParams.tempSbFeature?.getId()) {
|
|
|
+ state.qyParams.tempSbFeature?.get('resetStyle')?.()
|
|
|
+ // 新的要素
|
|
|
+ if (f.get('isAnalysis')) {
|
|
|
+ f.setStyle(f.get('analysisActiveStyle'))
|
|
|
+ } else {
|
|
|
+ f.setStyle(f.get('activeStyle'))
|
|
|
+ }
|
|
|
+ state.qyParams.sbInfo = f.get('info')
|
|
|
+ state.qyParams.sbOverlay.setPosition(f.getGeometry().getCoordinates())
|
|
|
+ // 备份新的要素
|
|
|
+ state.qyParams.tempSbFeature = f
|
|
|
+ }
|
|
|
+ state.qyParams.overlay.setPosition(undefined)
|
|
|
}
|
|
|
- state.qyParams.qyInfo = f.get('info')
|
|
|
- state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
|
|
|
- // 备份新的要素
|
|
|
- state.qyParams.tempFeature = f
|
|
|
}
|
|
|
}, {
|
|
|
hitTolerance: 0,
|
|
|
@@ -277,98 +340,130 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
const ref_qyDom = ref()
|
|
|
+ const ref_sbDom = ref()
|
|
|
const initQYLayer = () => {
|
|
|
- const arr: any = []
|
|
|
- for (let i = 0; i < 105; i++) {
|
|
|
- const obj = {
|
|
|
- name: '企业企业企业企业企业_' + i,
|
|
|
- wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`,
|
|
|
- }
|
|
|
- if (i % 2 === 0) {
|
|
|
- obj.type = 'lgszyjkscsb'
|
|
|
- } else if (i % 2 === 1) {
|
|
|
- obj.type = 'jgzzmgs'
|
|
|
- } else if (i % 2 === 2) {
|
|
|
- obj.type = 'lgsjkyfl'
|
|
|
- }
|
|
|
- arr.push(obj)
|
|
|
- }
|
|
|
- const features = arr.map(v => {
|
|
|
- const feat: any = new format.WKT().readFeature(v.wkt)
|
|
|
- feat.set('defaultStyle', QyStyle.qyStyle(v.type))
|
|
|
- feat.set('activeStyle', [...CommonStyle.activeStyle(), ...QyStyle.qyStyle(v.type)])
|
|
|
- feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
|
|
|
- feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
|
|
|
- feat.set('isAnalysis', false)
|
|
|
- feat.set('resetStyle', () => {
|
|
|
- if (feat.get('isAnalysis')) {
|
|
|
- feat.setStyle(feat.get('analysisStyle'))
|
|
|
- } else {
|
|
|
- feat.setStyle(feat.get('defaultStyle'))
|
|
|
- }
|
|
|
- })
|
|
|
- const obj = {
|
|
|
- coordinates: feat.getGeometry().getCoordinates(),
|
|
|
- tab: '1',
|
|
|
- name: v.name,
|
|
|
- 1: {
|
|
|
- name: v.name,
|
|
|
- people: '张三',
|
|
|
- number: '4812346556asfas',
|
|
|
- address: '海南省海口市海口区海口镇哈哈哈'
|
|
|
- },
|
|
|
- 2: {},
|
|
|
- 3: {},
|
|
|
- 4: {},
|
|
|
- 5: {
|
|
|
- radius: 10,
|
|
|
- tableHead: [
|
|
|
- {width: 1, title: '序号', align: 'center', cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`},
|
|
|
- {width: 1, title: '名称', dataKey: 'name'},
|
|
|
- {width: 1, title: '状态', align: 'center', cellRenderer: ({rowData}) => rowData.status === '0' ? '在线' : '离线'},
|
|
|
- {width: 1, title: '类型', align: 'center', dataKey: 'typeName'},
|
|
|
- {width: 1, title: '距离', align: 'right', cellRenderer: ({rowData}) => {
|
|
|
- const start = feat.getGeometry().getCoordinates()
|
|
|
- const end = that.$easyMap.formatPosition.wptTcpt(rowData.wkt)
|
|
|
- return turf.distance(start, end, {units: 'kilometers'}).toFixed(1) + 'km';
|
|
|
+ enterpriseQuery({
|
|
|
+ "pageNumber":1,
|
|
|
+ "pageSize":200,
|
|
|
+ // "entName":null,
|
|
|
+ // "entType":"加工增值"
|
|
|
+ }).then((res: any) => {
|
|
|
+ if (res.resp_code === 0 && res.datas?.length > 0) {
|
|
|
+ // for (let i = 0; i < 105; i++) {
|
|
|
+ // const obj = {
|
|
|
+ // name: '企业企业企业企业企业_' + i,
|
|
|
+ // wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`,
|
|
|
+ // }
|
|
|
+ // if (i % 2 === 0) {
|
|
|
+ // obj.type = 'lgszyjkscsb'
|
|
|
+ // } else if (i % 2 === 1) {
|
|
|
+ // obj.type = 'jgzzmgs'
|
|
|
+ // } else if (i % 2 === 2) {
|
|
|
+ // obj.type = 'lgsjkyfl'
|
|
|
+ // }
|
|
|
+ // arr.push(obj)
|
|
|
+ // }
|
|
|
+ const features: any = []
|
|
|
+ res.datas.forEach(v => {
|
|
|
+ try {
|
|
|
+ const feat: any = new format.WKT().readFeature(`POINT(${v.longitude} ${v.latitude})`)
|
|
|
+ let type = ''
|
|
|
+ if (v.qykx = '零关税自用进口生产设备') {
|
|
|
+ type = 'lgszyjkscsb'
|
|
|
+ } else if (v.qykx = '加工增值免关税') {
|
|
|
+ type = 'jgzzmgs'
|
|
|
+ } else if (v.qykx = '零关税进口原辅料') {
|
|
|
+ type = 'lgsjkyfl'
|
|
|
+ }
|
|
|
+ feat.set('defaultStyle', QyStyle.qyStyle(type))
|
|
|
+ feat.set('activeStyle', [...CommonStyle.activeStyle(), ...QyStyle.qyStyle(type)])
|
|
|
+ feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(type)])
|
|
|
+ feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(type)])
|
|
|
+ feat.set('isAnalysis', false)
|
|
|
+ feat.set('resetStyle', () => {
|
|
|
+ if (feat.get('isAnalysis')) {
|
|
|
+ feat.setStyle(feat.get('analysisStyle'))
|
|
|
+ } else {
|
|
|
+ feat.setStyle(feat.get('defaultStyle'))
|
|
|
}
|
|
|
- },
|
|
|
- ],
|
|
|
- tableData: []
|
|
|
- },
|
|
|
- }
|
|
|
- feat.set('info', obj)
|
|
|
- feat.setStyle(feat.get('defaultStyle'))
|
|
|
- return feat
|
|
|
- })
|
|
|
- state.qyParams.source = new source.Vector({
|
|
|
- features: features,
|
|
|
- wrapX: false
|
|
|
- })
|
|
|
- state.qyParams.layer = new layer.VectorImage({
|
|
|
- source: state.qyParams.source,
|
|
|
- zIndex: 10
|
|
|
- })
|
|
|
- state.map.addLayer(state.qyParams.layer)
|
|
|
- // 详情
|
|
|
- state.qyParams.overlay = new ol.Overlay({
|
|
|
- id: v4(),
|
|
|
- element: ref_qyDom.value,
|
|
|
- autoPan: false,
|
|
|
- offset: [0, -60],
|
|
|
- positioning: 'bottom-center',
|
|
|
- stopEvent: true,
|
|
|
- autoPanAnimation: {
|
|
|
- duration: 250
|
|
|
+ })
|
|
|
+ const obj = {
|
|
|
+ coordinates: feat.getGeometry().getCoordinates(),
|
|
|
+ tab: '1',
|
|
|
+ name: v.qymc,
|
|
|
+ 1: {
|
|
|
+ name: v.qymc,
|
|
|
+ people: v.lerep,
|
|
|
+ number: v.uniscid,
|
|
|
+ address: v.dom
|
|
|
+ },
|
|
|
+ 2: {},
|
|
|
+ 3: {},
|
|
|
+ 4: {},
|
|
|
+ 5: {
|
|
|
+ radius: 1,
|
|
|
+ center: feat.getGeometry().getCoordinates(),
|
|
|
+ tableData: [],
|
|
|
+ loading: false
|
|
|
+ },
|
|
|
+ }
|
|
|
+ feat.set('info', obj)
|
|
|
+ feat.set('featureType', 'qy')
|
|
|
+ feat.setStyle(feat.get('defaultStyle'))
|
|
|
+ feat.setId(v.id)
|
|
|
+ features.push(feat)
|
|
|
+ } catch (e) {
|
|
|
+ console.error('异常企业：', v)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.qyParams.source = new source.Vector({
|
|
|
+ features: features,
|
|
|
+ wrapX: false
|
|
|
+ })
|
|
|
+ state.qyParams.layer = new layer.VectorImage({
|
|
|
+ source: state.qyParams.source,
|
|
|
+ zIndex: 10
|
|
|
+ })
|
|
|
+ state.map.addLayer(state.qyParams.layer)
|
|
|
+ // 详情
|
|
|
+ state.qyParams.overlay = new ol.Overlay({
|
|
|
+ id: v4(),
|
|
|
+ element: ref_qyDom.value,
|
|
|
+ autoPan: false,
|
|
|
+ offset: [0, -60],
|
|
|
+ positioning: 'bottom-center',
|
|
|
+ stopEvent: true,
|
|
|
+ autoPanAnimation: {
|
|
|
+ duration: 250
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.map.addOverlay(state.qyParams.overlay)
|
|
|
+ // 详情
|
|
|
+ state.qyParams.sbOverlay = new ol.Overlay({
|
|
|
+ id: v4(),
|
|
|
+ element: ref_sbDom.value,
|
|
|
+ autoPan: false,
|
|
|
+ offset: [0, -60],
|
|
|
+ positioning: 'bottom-center',
|
|
|
+ stopEvent: true,
|
|
|
+ autoPanAnimation: {
|
|
|
+ duration: 250
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.map.addOverlay(state.qyParams.sbOverlay)
|
|
|
}
|
|
|
})
|
|
|
- state.map.addOverlay(state.qyParams.overlay)
|
|
|
}
|
|
|
const onCloseQy = () => {
|
|
|
state.qyParams.overlay.setPosition(undefined)
|
|
|
state.qyParams.tempFeature.get('resetStyle')()
|
|
|
state.qyParams.tempFeature = null
|
|
|
}
|
|
|
+ const onCloseSb = () => {
|
|
|
+ state.qyParams.sbOverlay.setPosition(undefined)
|
|
|
+ state.qyParams.tempSbFeature.get('resetStyle')()
|
|
|
+ state.qyParams.tempSbFeature = null
|
|
|
+ }
|
|
|
const handleRangeBlur = () => {
|
|
|
if (!state.qyParams.qyInfo['5'].radius) {
|
|
|
state.qyParams.qyInfo['5'].radius = 10
|
|
|
@@ -419,35 +514,73 @@ export default defineComponent({
|
|
|
setCircle()
|
|
|
state.map.addLayer(state.qyParams.analysisLayer)
|
|
|
}
|
|
|
- state.qyParams.qyInfo['5'].tableData = []
|
|
|
- for (let i = 0; i < 5000; i++) {
|
|
|
- state.qyParams.qyInfo['5'].tableData.push({
|
|
|
- name: '505县道新安村路口1-枪机-0110580_' + i,
|
|
|
- status: i % 3 === 0 ? '1' : '0',
|
|
|
- typeName: '公安类',
|
|
|
- type: i % 3 === 0 ? 'galsb' : (i % 3 === 1 ? 'shlsb' : 'mylsb'),
|
|
|
- wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`
|
|
|
- })
|
|
|
- }
|
|
|
+
|
|
|
state.qyParams.analysisSource.clear()
|
|
|
state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
|
|
|
- state.qyParams.analysisSource.addFeatures(state.qyParams.qyInfo['5'].tableData.map(v => {
|
|
|
- const feat: any = new format.WKT().readFeature(v.wkt)
|
|
|
- feat.set('defaultStyle', SbStyle.sbStyle(v.type))
|
|
|
- feat.set('activeStyle', [...CommonStyle.activeStyle(), ...SbStyle.sbStyle(v.type)])
|
|
|
- feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(v.type)])
|
|
|
- feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(v.type)])
|
|
|
- feat.set('isAnalysis', true)
|
|
|
- feat.set('resetStyle', () => {
|
|
|
- if (feat.get('isAnalysis')) {
|
|
|
- feat.setStyle(feat.get('analysisStyle'))
|
|
|
- } else {
|
|
|
- feat.setStyle(feat.get('defaultStyle'))
|
|
|
- }
|
|
|
- })
|
|
|
- feat.setStyle(feat.get('analysisStyle'))
|
|
|
- return feat
|
|
|
- }))
|
|
|
+ state.qyParams.qyInfo['5'].tableData = []
|
|
|
+ state.qyParams.qyInfo['5'].loading = true
|
|
|
+ that.$api.deviceQuery({
|
|
|
+ lon: state.qyParams.qyInfo.coordinates[0],
|
|
|
+ lat: state.qyParams.qyInfo.coordinates[1],
|
|
|
+ radius: 0.5
|
|
|
+ }).then((res: any) => {
|
|
|
+ // console.log(res)
|
|
|
+ // for (let i = 0; i < 500; i++) {
|
|
|
+ // state.qyParams.qyInfo['5'].tableData.push({
|
|
|
+ // name: '505县道新安村路口1-枪机-0110580_' + i,
|
|
|
+ // code: '46044123124125125',
|
|
|
+ // status: i % 3 === 0 ? '1' : '0',
|
|
|
+ // typeName: '公安类',
|
|
|
+ // type: i % 3 === 0 ? 'galsb' : (i % 3 === 1 ? 'shlsb' : 'mylsb'),
|
|
|
+ // wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ if (res.resp_code === 0 && res.datas?.length > 0) {
|
|
|
+ console.log(res.datas?.length)
|
|
|
+ const features: any = []
|
|
|
+ res.datas?.forEach(v => {
|
|
|
+ try {
|
|
|
+ const feat: any = new format.WKT().readFeature(`POINT(${v.longitude} ${v.latitude})`)
|
|
|
+ let type = ''
|
|
|
+ if (v.type = '公安类') {
|
|
|
+ type = 'galsb'
|
|
|
+ } else if (v.type = '社会类') {
|
|
|
+ type = 'shlsb'
|
|
|
+ } else if (v.type = '民用类') {
|
|
|
+ type = 'mylsb'
|
|
|
+ }
|
|
|
+ feat.set('defaultStyle', SbStyle.sbStyle(type))
|
|
|
+ feat.set('activeStyle', [...CommonStyle.activeStyle(), ...SbStyle.sbStyle(type)])
|
|
|
+ feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
|
|
|
+ feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
|
|
|
+ feat.set('isAnalysis', true)
|
|
|
+ feat.set('resetStyle', () => {
|
|
|
+ if (feat.get('isAnalysis')) {
|
|
|
+ feat.setStyle(feat.get('analysisStyle'))
|
|
|
+ } else {
|
|
|
+ feat.setStyle(feat.get('defaultStyle'))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ feat.setStyle(feat.get('analysisStyle'))
|
|
|
+ feat.set('featureType', 'sb')
|
|
|
+ feat.set('info', v)
|
|
|
+ feat.setId(v.deviceid)
|
|
|
+ features.push(feat)
|
|
|
+ state.qyParams.qyInfo['5'].tableData.push(v)
|
|
|
+ } catch (e) {
|
|
|
+ console.error('异常设备', v)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.qyParams.analysisSource.addFeatures(features)
|
|
|
+ }
|
|
|
+ state.qyParams.qyInfo['5'].loading = false
|
|
|
+ }).catch(() => {
|
|
|
+ state.qyParams.qyInfo['5'].loading = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const onRadiusReset = () => {
|
|
|
+ state.qyParams.qyInfo['5'].radius = 10
|
|
|
+ onRadiusSubmit()
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
})
|
|
|
@@ -462,9 +595,12 @@ export default defineComponent({
|
|
|
toolsHandleClick,
|
|
|
ref_qyDom,
|
|
|
onCloseQy,
|
|
|
+ onCloseSb,
|
|
|
handleRangeBlur,
|
|
|
setCircle,
|
|
|
- onRadiusSubmit
|
|
|
+ onRadiusSubmit,
|
|
|
+ onRadiusReset,
|
|
|
+ ref_sbDom
|
|
|
}
|
|
|
},
|
|
|
})
|
|
|
@@ -872,5 +1008,97 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .sb-info {
|
|
|
+ $footH: 10px;
|
|
|
+ width: 220px;
|
|
|
+ background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
|
|
|
+ border-radius: 0px 4px 4px 4px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: -$footH;
|
|
|
+ border-top: $footH solid #0043C4;
|
|
|
+ border-left: $footH solid transparent;
|
|
|
+ border-right: $footH solid transparent;
|
|
|
+ }
|
|
|
+ .sb-info-head {
|
|
|
+ min-width: 68px;
|
|
|
+ height: 18px;
|
|
|
+ position: absolute;
|
|
|
+ top: -18px;
|
|
|
+ left: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 8px;
|
|
|
+ &:before {
|
|
|
+ z-index: -1;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
|
|
|
+ border-radius: 2px 2px 0 0;/* 设置圆角 */
|
|
|
+ transform: perspective(20px)rotateX(4deg);
|
|
|
+ /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
|
|
|
+ transform-origin: bottom left;
|
|
|
+ /* bottom left = left bottom = 0 100% 中心点偏移量*/
|
|
|
+ }
|
|
|
+ .svg-icon {
|
|
|
+ margin: 0 4px 0 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sb-info-close {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -16px;
|
|
|
+ }
|
|
|
+ .sb-main {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 10px;
|
|
|
+ .sb-item {
|
|
|
+ display: flex;
|
|
|
+ .sb-item-label {
|
|
|
+ width: 42px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #08FFFF;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .sb-item-value {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .play-button {
|
|
|
+ width: 76px;
|
|
|
+ height: 24px;
|
|
|
+ background: #1280F1;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #4BA0FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: calc((100% - 76px) / 2);
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
CzRger
