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

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: '',