kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

地图组件改造

Browse Source
This commit is contained in:
aixianling
2022-11-09 16:29:44 +08:00
parent 29dba7eab7
commit 13e503cc55
4 changed files with 242 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/AiDvRender.vue
View File

@@ -22,7 +22,7 @@
:theme="theme"
:data="values"
:ops="chartList[data.config]"/>
<ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
<ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
<ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
@@ -69,9 +69,20 @@ export default {
return []
}
return this.data.type === 'map' ? this.data[this.data.dataType].map(e => {
return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
return {lng: e['经度'], lat: e['纬度'], label: e['地区名称'], ...e}
}) : this.data[this.data.dataType]
},
currentType: v => v.data.type
},
watch: {
values: {
immediate: true,
deep: true, handler() {
if (this.currentType == 'map') {
this.renderMap()
}
}
}
},
methods: {
formatTable(data, isShowIndex, rowNum) {
@@ -109,7 +120,7 @@ export default {
align: ['center', 'center', 'center', 'center', 'center']
}
},
handleMapClick(count = 0) {
renderMap(count = 0) {
let {lib: AMap, map} = this
if (AMap) {
let infoWin = new AMap.InfoWindow({content: ""})
@@ -117,37 +128,35 @@ export default {
let markers = this.values.filter(e => e.lng).map(e => {
return new AMap.Marker({
map,
label: e.label,
icon: e.icon,
content: e.content || `<div class="marker">
<img src="${e.icon}"/>
<span>${e.label}</span>
</div>`,
position: [e.lng, e.lat]
}).on('click', ({target}) => {
map.clearInfoWindow()
markers?.map(m => m.getIcon() == e.selectedIcon && m.setIcon(e.icon))
target.setIcon(e.selectedIcon)
infoWin.setContent([
`<div class="infoWin">`,
`<b>${e.label}</b>`,
`<div>累计成交金额：${e['累计成交金额(万)']}万元</div>`,
`<div>金融产品：${e['金融产品(万)']}万元</div>`,
`<div>融资需求：${e['融资需求(万)']}万元</div>`,
'</div>'
].join(''))
infoWin.open(map, [e.lng, e.lat])
}).on('click', () => {
if (!!e.openWin || e.infoWindowHtml) {
map.clearInfoWindow()
infoWin.setContent(e.infoWindowHtml ||
[`<div class="infoWin">`,
`<b>${e.label}</b>`,
'</div>'
].join('')
)
infoWin.open(map, [e.lng, e.lat])
}
})
})
map.setFitView(markers)
} else if (count < 10) {
console.log("正在加载...%s", count)
setTimeout(() => this.handleMapClick(++count), 1000)
setTimeout(() => this.renderMap(++count), 1000)
}
}
},
mounted() {
if (this.data.type == 'map') {
this.handleMapClick()
}
else if(this.data.type == 'table'){
this.renderMap()
} else if (this.data.type == 'table') {
this.$injectLib("https://cdn.cunwuyun.cn/datav.map.vue.js")
}
}
@@ -197,41 +206,28 @@ export default {
}
}
::v-deep.amap-info-contentContainer {
.amap-info-content {
background: #0A3257;
border: 1px solid #7BE5FF;
padding: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
.infoWin {
& > b {
display: block;
font-size: 18px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: 13px;
}
::v-deep .marker {
position: relative;
& > div {
font-size: 16px;
font-weight: 400;
color: #7BE5FF;
& + div {
margin-top: 8px;
}
}
}
& > img {
width: 50px;
height: 50px;
}
.amap-info-sharp {
border-top-color: #0A3257;
& > span {
display: none;
}
&:after {
border-top-color: #7BE5FF;
filter: none;
}
&:hover > span {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 100%);
display: block;
color: #fff;
font-size: 14px;
white-space: nowrap;
}
}
}

191
packages/bigscreen/designer/components/Layout.vue
View File

@@ -17,7 +17,7 @@
<h2>全部资产</h2>
<div class="layout-left__wrapper">
<div class="layout-left__left">
<div @click="subIndex = 0, parentIndex = index" :class="parentIndex === index ? 'active' : ''"
<div @click="subIndex = 0, parentIndex = index" :class="{active: parentIndex === index}"
v-for="(item, index) in components" :key="index">
<i class="iconfont iconqiyeguanli"></i>
<span>{{ item.label }}</span>
@@ -99,154 +99,28 @@
</div>
</div>
<div class="layout-right" @click.stop>
<div class="layout-tab" v-if="activeIndex > -1">
<span @click="configIndex = 0" :class="[configIndex === 0 ? 'layout-tab__active' : '']">参数</span>
<span @click="configIndex = 1" :class="[configIndex === 1 ? 'layout-tab__active' : '']">数据</span>
</div>
<div class="layout-right__content" v-if="activeIndex > -1">
<div class="layout-right__content--wrapper" v-show="configIndex === 0">
<div class="layout-config__group">
<h2>基础设置</h2>
<div class="layout-config__item">
<label>图表尺寸</label>
<div class="layout-config__item--right">
<el-input-number size="mini" :min="0" v-model="currLayout.width"
controls-position="right"></el-input-number>
<el-input-number size="mini" :min="0" v-model="currLayout.height"
controls-position="right"></el-input-number>
</div>
</div>
<div class="layout-config__item">
<label>图表位置</label>
<div class="layout-config__item--right">
<el-input-number size="mini" :min="0" v-model="currLayout.left"
controls-position="right"></el-input-number>
<el-input-number size="mini" :min="0" v-model="currLayout.top"
controls-position="right"></el-input-number>
</div>
</div>
<!-- 选中组件面板-->
<template v-if="activeIndex > -1">
<div class="layout-tab">
<span @click="configIndex = 0" :class="[configIndex === 0 ? 'layout-tab__active' : '']">参数</span>
<span @click="configIndex = 1" :class="[configIndex === 1 ? 'layout-tab__active' : '']">数据</span>
</div>
<div class="layout-right__content">
<component-config v-show="configIndex === 0" :config="currLayout" v-bind="$props"/>
<div class="layout-right__content--wrapper" v-show="configIndex === 1"
v-if="currLayout.type !== 'title' && currLayout.type !== 'video'">
<data-config
ref="dataConfig"
:instance="instance"
:dict="dict"
:options="currLayout"
@change="onChange('barChart')">
</data-config>
</div>
</div>
<div class="layout-right__content--wrapper" v-show="configIndex === 0">
<div class="layout-config__group">
<h2>组件设置</h2>
<div class="layout-config__item layout-config__item--input">
<label>标题</label>
<div class="layout-config__item--right">
<el-input v-model="currLayout.title" size="mini"></el-input>
</div>
</div>
<div class="layout-config__item layout-config__item--input" v-if="currLayout.display === 'summary2'">
<label>标题</label>
<div class="layout-config__item--right">
<el-input v-model="currLayout.summaryTitle" size="mini"></el-input>
</div>
</div>
<div class="layout-config__item" v-if="currLayout.type !== 'display'">
<label>边框</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="currLayout.border" placeholder="请选择边框" clearable>
<el-option
v-for="(item, index) in borderList"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
<div class="layout-config__item layout-config__item--input" v-if="currLayout.type === 'video'">
<label>视频地址</label>
<div class="layout-config__item--right">
<el-input v-model="currLayout.src" size="mini"></el-input>
</div>
</div>
<div class="layout-config__item" v-if="currLayout.type === 'monitor'">
<label>视频类型</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="currLayout.monitorType" placeholder="请选择" clearable>
<el-option label="中国移动" value="cmcc"></el-option>
<el-option label="海康威视" value="hik"></el-option>
<el-option label="大华" value="dahua"></el-option>
<el-option label="视联网" value="slw"></el-option>
</el-select>
</div>
</div>
<div class="layout-config__item" v-if="currLayout.type === 'table'">
<label>显示排名</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="currLayout.isShowIndex" placeholder="请选择" clearable>
<el-option
v-for="(item, index) in tableStatus"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="layout-config__item" v-if="currLayout.type === 'table'">
<label>表格行数</label>
<div class="layout-config__item--right">
<el-input-number size="mini" style="width: 232px" :min="0" v-model="currLayout.rowNum" controls-position="right"></el-input-number>
</div>
</div>
<template v-if="currLayout.type === 'map'">
<div class="layout-config__item">
<label>遮罩层</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="currLayout.mask" placeholder="请选择" clearable>
<el-option label="是" value="1"></el-option>
<el-option label="否" value="2"></el-option>
</el-select>
</div>
</div>
<div class="layout-config__item">
<label>选择地区</label>
<div class="layout-config__item--right">
<AiAreaGet :instance="instance" :valueLevel="3" v-model="currLayout.areaId" placeholder="请选择地区"></AiAreaGet>
</div>
</div>
<div class="layout-config__item">
<label>展示光轨</label>
<div class="layout-config__item--right">
<ai-select v-model="currLayout.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
</div>
</div>
<div class="layout-config__item layout-config__item--input">
<label>地图样式</label>
<div class="layout-config__item--right">
<el-input size="mini" v-model="currLayout.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
</div>
</div>
</template>
<div class="layout-config__item" v-if="currLayout.type === 'summary'">
<label>数据汇总</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="currLayout.display" placeholder="请选择类型" clearable>
<el-option
v-for="(item, index) in summaryList"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
<div class="layout-right__content--wrapper" v-show="configIndex === 1"
v-if="currLayout.type !== 'title' && currLayout.type !== 'video'">
<data-config
ref="dataConfig"
:instance="instance"
:dict="dict"
:options="currLayout"
@change="onChange('barChart')">
</data-config>
</div>
</div>
<div class="layout-page__setting layout-right__content" v-if="activeIndex === -1">
</template>
<!--未选中组件,页面设置-->
<div class="layout-page__setting layout-right__content" v-else>
<h2>页面设置</h2>
<div class="layout-config__group">
<div class="layout-config__item">
@@ -351,6 +225,7 @@ import VueRulerTool from 'vue-ruler-tool'
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import DataConfig from './form/DataConfig.vue'
import ComponentConfig from "./form/componentConfig";
export default {
name: "designDashboard",
@@ -396,21 +271,12 @@ export default {
middleHeight: 0,
widthScale: 0,
heightScale: 0,
bigscreenScaleInWorkbench: 0,
tableStatus: [{
label: '是',
value: '1'
}, {
label: '否',
value: '0'
}],
images: [],
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
}
},
components: {
ComponentConfig,
DataConfig,
VueRulerTool,
VueDraggableResizable,
@@ -533,7 +399,7 @@ export default {
onChange(e) {
if (e.indexOf('Chart') > -1) {
this.$refs[`chart${this.activeIndex}`][0].refresh()
this.$refs[`chart${this.activeIndex}`]?.[0]?.refresh()
}
},
@@ -989,6 +855,7 @@ export default {
.layout-middle {
flex: 1;
min-width: 0;
background: #000;
.canvas-wrapper {
@@ -1078,7 +945,7 @@ export default {
border-left: 1px solid #000000;
background: #1D2127;
::v-deep .el-input-number {
::v-deep.el-input-number {
width: 106px;
margin-right: 20px;
@@ -1100,7 +967,7 @@ export default {
}
}
.layout-right__content {
::v-deep.layout-right__content {
height: calc(100% - 40px);
overflow-y: overlay;
overflow-x: hidden;
@@ -1127,7 +994,7 @@ export default {
margin-bottom: 0;
}
::v-deep .el-select, ::v-deep .el-cascader {
.el-select, .el-cascader {
color: #fff;
background: transparent;
@@ -1170,7 +1037,7 @@ export default {
}
}
&.layout-config__item--input ::v-deep input {
&.layout-config__item--input input {
width: 232px;
background: #262C33;
font-size: 12px;

163
packages/bigscreen/designer/components/form/componentConfig.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<section class="componentConfig">
<div class="layout-right__content--wrapper">
<div class="layout-config__group">
<h2>基础设置</h2>
<div class="layout-config__item">
<label>图表尺寸</label>
<div class="layout-config__item--right">
<el-input-number size="mini" :min="0" v-model="config.width" controls-position="right"/>
<el-input-number size="mini" :min="0" v-model="config.height" controls-position="right"/>
</div>
</div>
<div class="layout-config__item">
<label>图表位置</label>
<div class="layout-config__item--right">
<el-input-number size="mini" :min="0" v-model="config.left" controls-position="right"/>
<el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
</div>
</div>
</div>
</div>
<div class="layout-right__content--wrapper">
<div class="layout-config__group">
<h2>组件设置</h2>
<div class="layout-config__item layout-config__item--input">
<label>标题</label>
<div class="layout-config__item--right">
<el-input v-model="config.title" size="mini"></el-input>
</div>
</div>
<div class="layout-config__item layout-config__item--input" v-if="config.display === 'summary2'">
<label>标题</label>
<div class="layout-config__item--right">
<el-input v-model="config.summaryTitle" size="mini"></el-input>
</div>
</div>
<div class="layout-config__item" v-else-if="config.type !== 'display'">
<label>边框</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
<el-option
v-for="(item, index) in borderList"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
<div class="layout-config__item layout-config__item--input" v-else-if="config.type === 'video'">
<label>视频地址</label>
<div class="layout-config__item--right">
<el-input v-model="config.src" size="mini"></el-input>
</div>
</div>
<div class="layout-config__item" v-if="config.type === 'monitor'">
<label>视频类型</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.monitorType" placeholder="请选择" clearable>
<el-option label="中国移动" value="cmcc"></el-option>
<el-option label="海康威视" value="hik"></el-option>
<el-option label="大华" value="dahua"></el-option>
<el-option label="视联网" value="slw"></el-option>
</el-select>
</div>
</div>
<template v-else-if="config.type === 'table'">
<div class="layout-config__item">
<label>显示排名</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
<el-option
v-for="(item, index) in tableStatus"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="layout-config__item">
<label>表格行数</label>
<div class="layout-config__item--right">
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
</div>
</div>
</template>
<template v-else-if="config.type === 'map'">
<div class="layout-config__item">
<label>遮罩层</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
<el-option label="是" value="1"></el-option>
<el-option label="否" value="2"></el-option>
</el-select>
</div>
</div>
<div class="layout-config__item">
<label>选择地区</label>
<div class="layout-config__item--right">
<AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
</div>
</div>
<div class="layout-config__item">
<label>展示光轨</label>
<div class="layout-config__item--right">
<ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
</div>
</div>
<div class="layout-config__item layout-config__item--input">
<label>地图样式</label>
<div class="layout-config__item--right">
<el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
</div>
</div>
</template>
<div class="layout-config__item" v-if="config.type === 'summary'">
<label>数据汇总</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
<el-option
v-for="(item, index) in summaryList"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
name: "componentConfig",
props: {
config: {default: () => ({})},
instance: Function,
dict: Object,
},
data() {
return {
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5'],//边框待选项
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],//汇总待选项
//是否显示排名
tableStatus: [
{label: '是', value: '1'},
{label: '否', value: '0'}
],
}
},
methods: {},
created() {
}
}
</script>
<style lang="scss" scoped>
.componentConfig {
}
</style>

5
packages/bigscreen/designer/config.js
View File

@@ -524,7 +524,7 @@ const components = [
left: 0,
top: 0,
mask: '2',
pulseLines: 1,
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
@@ -536,9 +536,6 @@ const components = [
content: '中卫慧通',
lng: 117.1339399,
lat: 36.7190487,
地区: '中卫慧通',
经度: 117.1339399,
纬度: 36.7190487
}
],
api: '',