You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
10 KiB
Vue
309 lines
10 KiB
Vue
<template>
|
|
<div style="height: 100%">
|
|
<el-row style="height: 100%">
|
|
<el-col :span="12" style="height: 100%;overflow: auto;padding-bottom: 12px;" class="leftCol">
|
|
<div style="width: 96%;margin:0 auto">
|
|
<el-collapse v-model="configSwitch" accordion>
|
|
<el-collapse-item title="图表配置" name="1">
|
|
<div style="height: 100%">
|
|
<el-form ref="form" :model="defaultData.configForm" label-width="80px">
|
|
<el-form-item label="字体颜色">
|
|
<el-cascader
|
|
v-model="defaultData.configForm['textColor']" placeholder="请选择字体颜色"
|
|
:options="getCascaderOption('color')"
|
|
@change="textColorChange">
|
|
<template slot-scope="{ node, data }">
|
|
<span
|
|
:style="`color:${$testColor(data.color)?data.color: '#000'}`">{{
|
|
data.label
|
|
}}</span>
|
|
</template>
|
|
</el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="X坐标数据">
|
|
<el-select v-model="defaultData.configForm['Xdata']" placeholder="请选择数据" @change="XdataChange"
|
|
clearable>
|
|
<el-option :label="i" :value="i"
|
|
v-for="i in Object.keys(networkData)"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-divider></el-divider>
|
|
<div v-for=" (item,k) in defaultData.configForm['datas']">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="item.name" @change="nameChange(k)"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="数据">
|
|
<el-select v-model="item['data']" placeholder="请选择数据" @change="dataChange(k)"
|
|
clearable>
|
|
<el-option :label="i" :value="i"
|
|
v-for="i in Object.keys(networkData)"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="线颜色">
|
|
<el-cascader
|
|
v-model="item['lineColor']" placeholder="请选择线颜色"
|
|
:options="getCascaderOption('color')"
|
|
@change="lineColorChange(k)"></el-cascader>
|
|
</el-form-item>
|
|
<div class="add" @click="addDatas()" v-if="k === defaultData.configForm['datas'].length -1">
|
|
<img :src="addIcon" alt="" style="width: 100%">
|
|
</div>
|
|
<div class="subtract" @click="subtractDatas(k)">
|
|
<img :src="subtractIcon" alt="" style="width: 100%">
|
|
</div>
|
|
</div>
|
|
<div class="add" @click="addDatas()" v-if=" defaultData.configForm['datas'].length ===0">
|
|
<img :src="addIcon" alt="" style="width: 100%">
|
|
</div>
|
|
</el-form>
|
|
|
|
</div>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="数据配置" name="2">
|
|
<div>
|
|
<NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
<div style="text-align: center;height: 60px;line-height: 60px">
|
|
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
|
<el-button>重置</el-button>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" style="height: 100%">
|
|
<div class="chart">
|
|
<ComplexChart :defaultData="chartData" :colors="(styleData||{}).colors1"></ComplexChart>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ComplexChart from '@/components/complex/chart'
|
|
import {queryGlobalCfg} from "@/api/configuration/globalCfg";
|
|
import NetworkRequest from "@/components/networkRequest/NetworkRequest";
|
|
|
|
import addIcon from '@/assets/add.png'
|
|
import subtractIcon from "@/assets/subtract.png";
|
|
|
|
export default {
|
|
components: {
|
|
ComplexChart,
|
|
NetworkRequest
|
|
},
|
|
props: ['defaultData', 'isDialog', 'styleData'],
|
|
watch: {
|
|
'defaultData.requests': {
|
|
async handler() {
|
|
setTimeout(async () => {
|
|
await this.getData()
|
|
this.textColorChange()
|
|
this.defaultData.configForm['datas'].forEach((i, k) => {
|
|
this.dataChange(k)
|
|
this.lineColorChange(k)
|
|
})
|
|
this.XdataChange()
|
|
}, 200)
|
|
},
|
|
deep: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
addIcon,
|
|
subtractIcon,
|
|
globalList: [],
|
|
configSwitch: false,
|
|
chartData: {},
|
|
networkData: {},
|
|
}
|
|
},
|
|
created() {
|
|
this.$detectingNullValues(this.defaultData, ['configForm', 'textColor'])
|
|
this.$detectingNullValues(this.defaultData, ['configForm', 'datas', 0])
|
|
console.log('12312342344324323423', this.defaultData)
|
|
},
|
|
async mounted() {
|
|
this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData))
|
|
this.chartData.series.forEach((i, k) => {
|
|
if (!this.defaultData.configForm['datas'][k]) {
|
|
console.log('add,add')
|
|
this.$set(this.defaultData.configForm['datas'], k, {
|
|
data: '',
|
|
lineColor: '',
|
|
name: ''
|
|
})
|
|
}
|
|
})
|
|
// 获取全局配置
|
|
await queryGlobalCfg().then(e => {
|
|
this.globalList = e
|
|
})
|
|
// 轮询
|
|
await this.getData()
|
|
this.getChartData()
|
|
},
|
|
methods: {
|
|
addDatas() {
|
|
let series = JSON.parse(JSON.stringify(this.chartData.series[0] || '{}'))
|
|
this.$set(this.chartData.series, this.defaultData.configForm['datas'].length, series)
|
|
this.$set(this.defaultData.chartData.series, this.defaultData.configForm['datas'].length, series)
|
|
this.$set(this.defaultData.configForm['datas'], this.defaultData.configForm['datas'].length, {
|
|
data: '',
|
|
lineColor: '',
|
|
name: ''
|
|
})
|
|
},
|
|
subtractDatas(k) {
|
|
this.$delete(this.chartData.series, k)
|
|
this.$delete(this.defaultData.chartData.series, k)
|
|
this.$delete(this.defaultData.configForm['datas'], k)
|
|
},
|
|
// 筛选配置项
|
|
getCascaderOption(el) {
|
|
if (el === 'color') {
|
|
let styleData = JSON.parse(JSON.stringify(this.styleData?.colors || []))
|
|
return [
|
|
{
|
|
value: 'system',
|
|
label: '全局变量',
|
|
children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
|
|
return {
|
|
value: v.globalCfgId,
|
|
label: v.globalCfgName,
|
|
color: v.globalCfgDate
|
|
}
|
|
})
|
|
},
|
|
{
|
|
value: 'styleData',
|
|
label: '界面风格',
|
|
children: styleData?.map((v, k) => {
|
|
return {
|
|
value: k,
|
|
label: v,
|
|
color: v
|
|
}
|
|
}) || []
|
|
}
|
|
]
|
|
} else {
|
|
|
|
return [
|
|
{
|
|
value: 'system',
|
|
label: '全局变量',
|
|
children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
|
|
return {
|
|
value: v.globalCfgId,
|
|
label: v.globalCfgName,
|
|
color: v.globalCfgDate
|
|
}
|
|
})
|
|
}
|
|
]
|
|
}
|
|
},
|
|
async getData(e) {
|
|
let data = await this.$getFinalData(this.defaultData.requests)
|
|
this.$set(this, 'networkData', data)
|
|
},
|
|
async onSubmit() {
|
|
if (this.isDialog) {
|
|
this.$emit('close')
|
|
}
|
|
},
|
|
getChartData() {
|
|
this.textColorChange()
|
|
this.XdataChange()
|
|
this.defaultData.configForm['datas'].forEach((i, k) => {
|
|
this.dataChange(k)
|
|
this.lineColorChange(k)
|
|
this.nameChange(k)
|
|
})
|
|
},
|
|
lineColorChange(k) {
|
|
this.$detectingNullValues(this.chartData, ['series', k, 'lineStyle', 'color'])
|
|
if (this.defaultData.configForm['datas'][k]['lineColor'][0] === 'system') {
|
|
this.$set(this.chartData.series[k].lineStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm['datas'][k].lineColor?.[1])?.globalCfgDate || '')
|
|
}
|
|
if (this.defaultData.configForm['datas'][k]['lineColor'][0] === 'styleData') {
|
|
this.$set(this.chartData.series[k].lineStyle, 'color', this.styleData.colors[this.defaultData.configForm['datas'][k]['lineColor'][1]])
|
|
}
|
|
},
|
|
textColorChange() {
|
|
this.$detectingNullValues(this.chartData, ['textStyle', 'color'])
|
|
if (this.defaultData.configForm['textColor'][0] === 'system') {
|
|
this.$set(this.chartData.textStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm.textColor?.[1])?.globalCfgDate || '')
|
|
}
|
|
if (this.defaultData.configForm['textColor'][0] === 'styleData') {
|
|
this.$set(this.chartData.textStyle, 'color', this.styleData.colors[this.defaultData.configForm['textColor'][1]])
|
|
}
|
|
},
|
|
dataChange(k) {
|
|
this.$detectingNullValues(this.chartData, ['series', k, 'data'])
|
|
this.$set(this.chartData.series[k], 'data', this.networkData[this.defaultData.configForm['datas'][k].data])
|
|
},
|
|
XdataChange(k) {
|
|
this.$detectingNullValues(this.chartData, ['xAxis', 'data'])
|
|
this.$set(this.chartData.xAxis, 'data', this.networkData[this.defaultData.configForm.Xdata])
|
|
},
|
|
nameChange(k) {
|
|
this.$detectingNullValues(this.chartData, ['series', k, 'name'])
|
|
this.$set(this.chartData.series[k], 'name', this.defaultData.configForm['datas'][k].name)
|
|
console.log(this.chartData)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.notScroll {
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.leftCol::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.add {
|
|
display: inline-block;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
padding: 0.5vw;
|
|
background-color: #409EFF;
|
|
border-radius: 50%;
|
|
margin: 0 1vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.subtract {
|
|
display: inline-block;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
padding: 0.5vw;
|
|
background-color: #909399;
|
|
border-radius: 50%;
|
|
margin: 0 1vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.textArea {
|
|
position: relative;
|
|
|
|
.textAreaIcon {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 8px;
|
|
}
|
|
}
|
|
</style>
|