地图组件改造
This commit is contained in:
aixianling
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user