Merge remote-tracking branch 'origin/master'

master
xs 5 months ago
commit 342274b2be

@ -1,10 +1,10 @@
<template>
<div style="display: inline-block;width: 100%;height: 100% ">
<div style="background-color: #094170">
<div class="scrollTable" style="font-weight: bold;" :style="`width:calc(${100/defaultData.th.length}%)`" v-for="i in defaultData.th">
{{i}}
</div>
<div style="background-color: #094170">
<div class="scrollTable" style="font-weight: bold;" :style="`width:calc(${100/defaultData.th.length}%)`" v-for="i in defaultData.th">
{{i}}
</div>
</div>
<vue-seamless-scroll
:class-option="chartTableOption"
:data="tableData"
@ -57,11 +57,17 @@ export default {
this.getOption()
},
deep: true
},
defaultTableData:{
handler(a, b) {
this.getOption()
},
deep: true
}
},
async mounted() {
this.getOption()
await this.getData()
this.getOption()
setInterval(async () => {
await this.getData()
}, 1000*10)

@ -28,7 +28,6 @@ export default {
}
},
async mounted() {
console.log('123123', this.defaultData)
await this.getData()
},
methods: {

@ -2,66 +2,69 @@
<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="text-align: center">
<el-switch
v-model="configSwitch"
active-text="数据配置"
inactive-text="图表配置">
</el-switch>
</div>
<div v-show="!configSwitch" 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"></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>
<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['barColor']" placeholder="请选择线颜色"
:options="getCascaderOption('color')"
@change="barColorChange(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 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"></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['barColor']" placeholder="请选择线颜色"
:options="getCascaderOption('color')"
@change="barColorChange(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 style="text-align: center;height: 60px;line-height: 60px">
<el-button type="primary" @click="onSubmit"></el-button>
<el-button>重置</el-button>
</div>
</div>
<div v-show="configSwitch">
<NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
<div class="add" @click="addDatas()" v-if=" defaultData.configForm['datas'].length ===0">
<img :src="addIcon" alt="" style="width: 100%">
</div>
</el-form>
<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-collapse-item>
<el-collapse-item title="数据配置" name="2">
<div>
<NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="12" style="height: 100%">

@ -2,71 +2,73 @@
<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="text-align: center">
<el-switch
v-model="configSwitch"
active-text="数据配置"
inactive-text="图表配置">
</el-switch>
</div>
<div v-show="!configSwitch" 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 }">
<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'}`">{{
: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>
<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>
</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 style="text-align: center;height: 60px;line-height: 60px">
<el-button type="primary" @click="onSubmit"></el-button>
<el-button>重置</el-button>
</div>
</div>
<div v-show="configSwitch">
<NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
<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-collapse-item>
<el-collapse-item title="数据配置" name="2">
<div>
<NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
@ -93,26 +95,17 @@ export default {
},
props: ['defaultData', 'isDialog', 'styleData'],
watch: {
networkData: {
handler() {
this.textColorChange()
this.defaultData.configForm['datas'].forEach((i, k) => {
this.dataChange(k)
this.lineColorChange(k)
})
this.XdataChange()
},
deep: true
},
'defaultData.requests': {
async handler() {
await this.getData()
this.textColorChange()
this.defaultData.configForm['datas'].forEach((i, k) => {
this.dataChange(k)
this.lineColorChange(k)
})
this.XdataChange()
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
},
@ -130,9 +123,20 @@ export default {
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
@ -143,7 +147,7 @@ export default {
},
methods: {
addDatas() {
let series = JSON.parse(JSON.stringify(this.chartData.series[0]))
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, {
@ -272,8 +276,8 @@ export default {
.add {
display: inline-block;
width: 1vw;
height: 1vw;
width: 2vw;
height: 2vw;
padding: 0.5vw;
background-color: #409EFF;
border-radius: 50%;
@ -283,8 +287,8 @@ export default {
.subtract {
display: inline-block;
width: 1vw;
height: 1vw;
width: 2vw;
height: 2vw;
padding: 0.5vw;
background-color: #909399;
border-radius: 50%;

@ -2,50 +2,51 @@
<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="text-align: center">
<el-switch
v-model="configSwitch"
active-text="数据配置"
inactive-text="图表配置">
</el-switch>
</div>
<div v-show="!configSwitch" style="height: 100%">
<el-form ref="form" :model="defaultData.configForm" label-width="80px">
<el-form-item label="数据">
<el-select v-model="defaultData.configForm['data']" placeholder="请选择数据"
@change="dataChange" 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-select v-model="defaultData.configForm['pieName']" placeholder="请选择数据"
@change="pieDataChange" clearable>
<el-option :label="i.label" :value="i.value"
v-for="i in option"></el-option>
</el-select>
</el-form-item>
<el-form-item label="扇面数据">
<el-select v-model="defaultData.configForm['pieData']" placeholder="请选择数据"
@change="pieDataChange" clearable>
<el-option :label="i.label" :value="i.value"
v-for="i in option"></el-option>
</el-select>
</el-form-item>
</el-form>
<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-select v-model="defaultData.configForm['data']" placeholder="请选择数据"
@change="dataChange" 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-select v-model="defaultData.configForm['pieName']" placeholder="请选择数据"
@change="pieDataChange" clearable>
<el-option :label="i.label" :value="i.value"
v-for="i in option"></el-option>
</el-select>
</el-form-item>
<el-form-item label="扇面数据">
<el-select v-model="defaultData.configForm['pieData']" placeholder="请选择数据"
@change="pieDataChange" clearable>
<el-option :label="i.label" :value="i.value"
v-for="i in option"></el-option>
</el-select>
</el-form-item>
</el-form>
<div style="text-align: center;height: 60px;line-height: 60px">
<el-button type="primary" @click="onSubmit"></el-button>
<el-button>重置</el-button>
</div>
</div>
<div v-show="configSwitch">
<NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
<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-collapse-item>
<el-collapse-item title="数据配置" name="2">
<div>
<NetworkRequest :requests="defaultData.requests" @GetFinalData="getData" :limit="{isDataSet:false}"/>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<div class="chart">
<ComplexChart :defaultData="chartData"></ComplexChart>
<ComplexChart :defaultData="chartData" :colors="(styleData||{}).colors1"></ComplexChart>
</div>
</el-col>
</el-row>
@ -62,19 +63,15 @@ export default {
ComplexChart,
NetworkRequest
},
props: ['defaultData', 'isDialog'],
props: ['defaultData', 'isDialog', 'styleData'],
watch: {
networkData: {
handler() {
this.dataChange()
},
deep: true
},
'defaultData.requests': {
async handler() {
console.log('defaultData.requests')
await this.getData()
this.dataChange()
setTimeout(async () => {
await this.getData()
this.dataChange()
}, 200)
},
deep: true
},
@ -173,7 +170,7 @@ export default {
},
dataChange() {
this.pieData = this.networkData[this.defaultData.configForm.data]
console.log('this.pieData',this.pieData)
console.log('this.pieData', this.pieData)
this.option = Object.keys(this.pieData?.[0]).map(e => {
return {
value: e,
@ -183,15 +180,14 @@ export default {
},
pieDataChange() {
if (this.defaultData.configForm['pieName'] && this.defaultData.configForm['pieData']) {
let data1 = this.pieData.map(e=>{
return [e[this.defaultData.configForm['pieName']],e[this.defaultData.configForm['pieData']]]
let data1 = this.pieData.map(e => {
return [e[this.defaultData.configForm['pieName']], e[this.defaultData.configForm['pieData']]]
})
this.$detectingNullValues(this.chartData, ['dataset', 'source', 0])
let data =[this.chartData.dataset.source[0],...data1]
let data = [this.chartData.dataset.source[0], ...data1]
this.$set(this.chartData.dataset,'source' , data)
this.$set(this.chartData.dataset, 'source', data)
console.log('this.chartData.dataset.source',this.chartData)
}
}
},
@ -200,7 +196,8 @@ export default {
<style scoped lang="less">
.chart {
width: 100%;
height: 100%;
height: 50%;
transform: translateY(50%);
}
.notScroll {

@ -2,69 +2,70 @@
<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="text-align: center">
<el-switch
v-model="configSwitch"
active-text="数据配置"
inactive-text="图表配置">
</el-switch>
</div>
<div v-show="!configSwitch" style="height: 100%">
<el-form ref="form" :model="defaultData" label-width="80px">
<el-form-item label="表头数据">
<el-select
v-model="defaultData.th"
multiple
filterable
allow-create
default-first-option
@change="thListChange"
placeholder="请选择表头">
<el-option
v-for="item in defaultData.th"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="列数据">
<el-select
v-model="defaultData.td"
multiple
filterable
allow-create
default-first-option
@change="thListChange"
placeholder="请选择列数据">
<el-option
v-for="item in defaultData.td"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据集">
<el-select v-model="defaultData.tableDataKey" placeholder="请选择数据" @change="dataChange" clearable>
<el-option :label="i" :value="i"
v-for="i in Object.keys(networkData)"></el-option>
</el-select>
</el-form-item>
</el-form>
<div style="text-align: center;height: 60px;line-height: 60px">
<el-button type="primary" @click="onSubmit"></el-button>
<el-button>重置</el-button>
</div>
</div>
<div v-show="configSwitch">
<NetworkRequest ref="NetworkRequest" :requests="defaultData.requests" @GetFinalData="getData"/>
<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" label-width="80px">
<el-form-item label="表头数据">
<el-select
v-model="defaultData.th"
multiple
filterable
allow-create
default-first-option
placeholder="请选择表头">
<el-option
v-for="item in defaultData.th"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="列数据">
<el-select
v-model="defaultData.td"
multiple
filterable
allow-create
default-first-option
placeholder="请选择列数据">
<el-option
v-for="item in tdkeys"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据集">
<el-select v-model="defaultData.tableDataKey" placeholder="请选择数据" @change="dataChange" clearable>
<el-option :label="i" :value="i"
v-for="i in Object.keys(networkData)"></el-option>
</el-select>
</el-form-item>
</el-form>
<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-collapse-item>
<el-collapse-item title="数据配置" name="2">
<div>
<NetworkRequest ref="NetworkRequest" :requests="defaultData.requests" @GetFinalData="getData"/>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<div class="chart">
<ComplexScrollTable ref="ComplexScrollTable" :defaultData="defaultData" :default-table-data="tableData"></ComplexScrollTable>
<ComplexScrollTable ref="ComplexScrollTable" :defaultData="defaultData"
:default-table-data="tableData"></ComplexScrollTable>
</div>
</el-col>
</el-row>
@ -95,19 +96,20 @@ export default {
},
data() {
return {
tableData:[],
tableData: [],
configSwitch: false,
networkData: {},
tdkeys: [],
}
},
created() {
},
async mounted() {
this.dataChange()
await this.getData()
this.dataChange()
setInterval(async () => {
await this.getData()
}, 1000*10)
}, 1000 * 10)
},
methods: {
async getData(e) {
@ -121,9 +123,9 @@ export default {
}
},
dataChange() {
console.log('dataChange')
this.tableData = this.networkData[this.defaultData.tableDataKey]
console.log('this.tableData11',this.tableData)
let keys = Object.keys(this.tableData?.[0] || {})
this.tdkeys = keys
}
},
}

@ -10,13 +10,18 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="deviceModeId" v-show="true">
<el-input
v-model="form.deviceModeId">
</el-input>
<el-form-item label="deviceModeId" v-show="false">
<el-input
v-model="form.deviceModeId">
</el-input>
</el-form-item>
<el-form-item label="name" v-show="false">
<el-input
v-model="form.deviceName">
</el-input>
</el-form-item>
<el-form-item label="设备属性">
<el-select v-model="form.functionIdentifier" placeholder="请选择">
<el-select v-model="form.functionIdentifier" placeholder="请选择" @change="functionIdentifierChange">
<el-option
v-for="item in deviceFunList"
:key="item.functionIdentifier"
@ -25,25 +30,10 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据间隔">
<el-select v-model="form.interval" placeholder="请选择" @change="changeInterval">
<el-option
v-for="item in intervalOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间周期">
<el-date-picker
@change="timeChange"
v-model="time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-form-item label="functionIdentifierName" v-show="false">
<el-input
v-model="form.functionIdentifierName">
</el-input>
</el-form-item>
</div>
</template>
@ -59,74 +49,39 @@ export default {
time: [],
deviceList: [],
deviceFunList: [],
intervalOption: [
{
label: '时',
value: '1',
default: 1
},
{
label: '日',
value: '2',
default: 24
},
{
label: '周',
value: '3',
default: 7
},
{
label: '月',
value: '4',
default: 30
},
{
label: '年',
value: '5',
default: 12
},
],
}
},
mounted() {
getDeviceList().then(e => {
async mounted() {
await getDeviceList().then(e => {
this.deviceList = e.rows
})
console.log('this.form.deviceId', this.form)
if (this.form.deviceId) {
let modelId = this.deviceList.find(v => v.deviceId === this.form.deviceId).deviceModeId
getDeviceFunctions(modelId).then(v => {
this.deviceFunList = v.data
})
}
},
methods: {
setDeviceId(e) {
let modelId = this.deviceList.find(v => v.deviceId === e).deviceModeId
this.$set(this.form, 'deviceModeId', modelId)
console.log(modelId)
this.$set(this, 'form', {
...this.form,
deviceName: this.deviceList.find(v => v.deviceId === e).deviceName,
functionIdentifier: '',
interval: '',
})
this.$set(this, 'time', [])
getDeviceFunctions(modelId).then(v => {
this.deviceFunList = v.data
})
},
timeChange() {
this.$set(this.form, 'startTime', new Date(this.time[0]).getTime())
this.$set(this.form, 'endTime', new Date(this.time[1]).getTime())
functionIdentifierChange(e) {
this.$set(this.form, 'functionIdentifierName', this.deviceFunList.find(v => v.functionIdentifier === e).functionName || '')
console.log('functionIdentifierNamefunctionIdentifierNamefunctionIdentifierName,', this.form)
},
changeInterval(e) {
let data = this.intervalOption.find(v => v.value === e)
this.$set(this.form,'intervalType',data.default)
if (e === '1') {
this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
}
if (e === '2') {
this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
}
if (e === '3') {
this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 7)), this.$parseTime(new Date())]
}
if (e === '4') {
this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 30)), this.$parseTime(new Date())]
}
if (e === '5') {
this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 365)), this.$parseTime(new Date())]
}
this.$set(this.form, 'startTime', new Date(this.time[0]).getTime())
this.$set(this.form, 'endTime', new Date(this.time[1]).getTime())
}
}
}
</script>

@ -3,6 +3,8 @@
<div style="width: 90%;margin: 0 auto ">
<div style="margin: 8px 0">
<el-button type="primary" @click="addRequest()"></el-button>
<el-button type="primary" @click="setInterval()"></el-button>
</div>
<div v-for="(i,k) in requests" style="display: inline-block;margin: 0 8px 8px 0">
@ -12,9 +14,9 @@
<div style="width: 100%;height: 50px">
<div style="width: 50px;height: 100%;display: inline-block">
<el-image
style="width: 100%; height: 100%;"
:src="customizationRequestImg"
fit="fill"></el-image>
style="width: 100%; height: 100%;"
:src="customizationRequestImg"
fit="fill"></el-image>
</div>
<div style="width: calc(100% - 50px - 150px);height: 100%;display: inline-block;vertical-align: top">
<div style="width: 100%;height: 50%;padding-left: 12px;line-height: 25px;font-weight: 700">
@ -23,7 +25,7 @@
</span>
</div>
<div
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 175%;height: 50%;padding-left: 12px;line-height: 25px;font-size: 12px;color: #0009">
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 175%;height: 50%;padding-left: 12px;line-height: 25px;font-size: 12px;color: #0009">
<span>
{{ i.url || ' http:10.11.111.111:1111' }}
</span>
@ -60,9 +62,9 @@
<div style="width: 100%;height: 50px">
是否启用
<el-switch
v-model="i.isOpen"
active-color="#13ce66"
inactive-color="#ff4949">
v-model="i.isOpen"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</div>
</div>
@ -74,20 +76,20 @@
<div style="width: 100%;height: 50px">
<div style="width: 50px;height: 100%;display: inline-block">
<el-image
style="width: 100%; height: 100%;"
:src="customizationRequestImg"
fit="fill"></el-image>
style="width: 100%; height: 100%;"
:src="customizationRequestImg"
fit="fill"></el-image>
</div>
<div style="width: calc(100% - 50px - 150px);height: 100%;display: inline-block;vertical-align: top">
<div style="width: 100%;height: 50%;padding-left: 12px;line-height: 25px;font-weight: 700">
<span>
{{ i.deviceId || '设备' }}
{{ i.deviceName || i.deviceId || '设备' }}
</span>
</div>
<div
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 175%;height: 50%;padding-left: 12px;line-height: 25px;font-size: 12px;color: #0009">
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 175%;height: 50%;padding-left: 12px;line-height: 25px;font-size: 12px;color: #0009">
<span>
{{ i.functionIdentifier || '属性' }}
{{ i.functionIdentifierName || i.functionIdentifier || '属性' }}
</span>
</div>
</div>
@ -123,9 +125,9 @@
<div style="width: 100%;height: 50px">
是否启用
<el-switch
v-model="i.isOpen"
active-color="#13ce66"
inactive-color="#ff4949">
v-model="i.isOpen"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</div>
</div>
@ -135,19 +137,19 @@
</div>
<el-dialog
title="添加请求"
append-to-body
:visible.sync="addRequestDialogVisible"
width="30%">
title="添加请求"
append-to-body
:visible.sync="addRequestDialogVisible"
width="30%">
<el-row :gutter="12">
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0'}">
<div @click="addNetworkRequest" style="padding:20px">
<div style="text-align: center">
<el-image
style="width: 100px; height: 100px;"
:src="networkImg"
fit="fill"></el-image>
style="width: 100px; height: 100px;"
:src="networkImg"
fit="fill"></el-image>
</div>
<div style="text-align: center">网络请求</div>
</div>
@ -158,9 +160,9 @@
<div @click="addEquipment" style="padding:20px">
<div style="text-align: center">
<el-image
style="width: 100px; height: 100px;"
:src="customizationRequestImg"
fit="fill"></el-image>
style="width: 100px; height: 100px;"
:src="customizationRequestImg"
fit="fill"></el-image>
</div>
<div style="text-align: center">设备信息</div>
</div>
@ -171,9 +173,9 @@
<div @click="addNetworkRequest" style="padding:20px">
<div style="text-align: center">
<el-image
style="width: 100px; height: 100px;"
:src="customizationRequestImg"
fit="fill"></el-image>
style="width: 100px; height: 100px;"
:src="customizationRequestImg"
fit="fill"></el-image>
</div>
<div style="text-align: center">自定义请求</div>
</div>
@ -186,10 +188,46 @@
</el-dialog>
<el-dialog
title="网络请求"
append-to-body
:visible.sync="addRequestFormDialogVisible"
width="30%">
title="设置设备获取数据间隔"
append-to-body
:visible.sync="setIntervalDialogVisible"
width="30%">
<el-form :model="equipmentIntervalForm" label-width="120px">
<el-form-item label="数据间隔" v-if="false">
<el-input v-model="equipmentIntervalForm.intervalType"></el-input>
</el-form-item>
<el-form-item label="数据间隔">
<el-select v-model="equipmentIntervalForm.interval" placeholder="请选择" @change="changeInterval">
<el-option
v-for="item in intervalOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间周期">
<el-date-picker
@change="timeChange"
v-model="equipmentIntervalForm.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="setIntervalDialogVisible = false"> </el-button>
<el-button type="primary" @click="setIntervalOk"> </el-button>
</span>
</el-dialog>
<el-dialog
title="网络请求"
append-to-body
:visible.sync="addRequestFormDialogVisible"
width="30%">
<el-form :model="addRequestForm">
<InterfaceRequest :form="addRequestForm"/>
</el-form>
@ -200,12 +238,12 @@
</el-dialog>
<el-dialog
title="添加设备"
append-to-body
:visible.sync="addEquipmentFormDialogVisible"
width="30%">
title="添加设备"
append-to-body
:visible.sync="addEquipmentFormDialogVisible"
width="30%">
<el-form :model="addEquipmentForm" label-width="120px">
<EquipmentRequest :form="addEquipmentForm"/>
<EquipmentRequest :form="addEquipmentForm" v-if="addEquipmentFormDialogVisible"/>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addEquipmentFormDialogVisible = false"> </el-button>
@ -225,10 +263,10 @@
</el-form-item>
<el-form-item label="映射字段" label-width="120px">
<el-cascader
v-model="i.region"
:options="options" @change="mappingChange(i,k)"></el-cascader>
v-model="i.region"
:options="options" @change="mappingChange(i,k)"></el-cascader>
</el-form-item>
<el-form-item label="将数据某一项集合" v-if="i.isArray">
<el-form-item label="将数据某一项集合" v-if="(!((limit||{}).isDataSet===false))&& i.isArray">
<el-select v-model="i.mapData" clearable placeholder="非必选">
<el-option :label="i.label" :value="i.value" v-for="i in enumOption"></el-option>
</el-select>
@ -262,7 +300,7 @@ export default {
InterfaceRequest,
EquipmentRequest
},
props: ['requests'],
props: ['requests', 'limit'],
data() {
return {
value: false,
@ -271,11 +309,13 @@ export default {
networkImg,
customizationRequestImg,
addRequestDialogVisible: false,
setIntervalDialogVisible: false,
addRequestFormDialogVisible: false,
addEquipmentFormDialogVisible: false,
mappingDialogVisible: false,
addRequestForm: {},
addEquipmentForm: {},
equipmentIntervalForm: {},
mappingForm: {},
option: [],
enumOption: [],
@ -283,17 +323,88 @@ export default {
updateIndex: 0,
updateDeviceFlag: false,
updateDeviceIndex: 0,
intervalOption: [
{
label: '时',
value: '1',
default: 1
},
{
label: '日',
value: '2',
default: 24
},
{
label: '周',
value: '3',
default: 7
},
{
label: '月',
value: '4',
default: 30
},
{
label: '年',
value: '5',
default: 12
},
],
}
},
mounted() {
if (!this.requests || !Array.isArray(this.requests)) {
this.requests = []
}
let firstDevice = this.requests.find(e => e.type === 2)
this.$set(this, 'equipmentIntervalForm', {
intervalType: firstDevice.intervalType,
interval: firstDevice.interval,
time: [this.$parseTime(firstDevice?.startTime), this.$parseTime(firstDevice?.endTime)]
})
},
methods: {
addRequest() {
this.addRequestDialogVisible = true
},
setInterval() {
this.setIntervalDialogVisible = true
},
changeInterval(e) {
let data = this.intervalOption.find(v => v.value === e)
this.$set(this.equipmentIntervalForm, 'intervalType', data.default)
if (e === '1') {
this.equipmentIntervalForm.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
}
if (e === '2') {
this.equipmentIntervalForm.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
}
if (e === '3') {
this.equipmentIntervalForm.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 7)), this.$parseTime(new Date())]
}
if (e === '4') {
this.equipmentIntervalForm.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 30)), this.$parseTime(new Date())]
}
if (e === '5') {
this.equipmentIntervalForm.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 365)), this.$parseTime(new Date())]
}
this.$set(this.equipmentIntervalForm, 'startTime', new Date(this.equipmentIntervalForm.time[0]).getTime())
this.$set(this.equipmentIntervalForm, 'endTime', new Date(this.equipmentIntervalForm.time[1]).getTime())
},
timeChange() {
this.$set(this.form, 'startTime', new Date(this.time[0]).getTime())
this.$set(this.form, 'endTime', new Date(this.time[1]).getTime())
},
setIntervalOk() {
this.requests.forEach((e,k) => {
if (e.type === 2) {
this.$set(this.requests[k], 'interval', this.equipmentIntervalForm.interval)
this.$set(this.requests[k], 'intervalType', this.equipmentIntervalForm.intervalType)
this.$set(this.requests[k], 'startTime', new Date(this.equipmentIntervalForm.time[0]).getTime())
this.$set(this.requests[k], 'endTime', new Date(this.equipmentIntervalForm.time[1]).getTime())
}
})
},
subtractRequest(key) {
if (this.requests?.length > 1) {
this.$delete(this.requests, key)
@ -327,9 +438,15 @@ export default {
this.addRequestForm = {}
},
addEquipmentConfirm() {
console.log('123123,345345,12313',this.addEquipmentForm)
console.log('123123,345345,12313',this.requests)
if (this.updateDeviceFlag) {
this.$set(this.requests, this.updateDeviceIndex, Vue.observable({
...this.addEquipmentForm,
interval: this.equipmentIntervalForm.interval,
intervalType: this.equipmentIntervalForm.intervalType,
startTime: new Date(this.equipmentIntervalForm.time[0]).getTime(),
endTime: new Date(this.equipmentIntervalForm.time[1]).getTime(),
type: 2,
connectionStatus: -1,
isOpen: true
@ -337,6 +454,10 @@ export default {
} else {
this.requests.push(Vue.observable({
...this.addEquipmentForm,
interval: this.equipmentIntervalForm.interval,
intervalType: this.equipmentIntervalForm.intervalType,
startTime: new Date(this.equipmentIntervalForm.time[0]).getTime(),
endTime: new Date(this.equipmentIntervalForm.time[1]).getTime(),
type: 2,
connectionStatus: -1,
isOpen: true
@ -358,7 +479,7 @@ export default {
this.$set(this.requests[k], 'connectionStatus', 0)
getHistoryData({
deviceModeId: i.deviceModeId,
functionIdentifier: i.functionIdentifier + '1',
functionIdentifier: i.functionIdentifier,
interval: i.interval,
"sceneId": 144,
"deviceId": i.deviceId,
@ -472,9 +593,9 @@ export default {
},
async setDeviceMapping(i, k) {
if (!this.requests?.[k]?.request) {
getHistoryData({
await getHistoryData({
deviceModeId: i.deviceModeId,
functionIdentifier: i.functionIdentifier + '1',
functionIdentifier: i.functionIdentifier,
interval: i.interval,
"sceneId": 144,
"deviceId": i.deviceId,
@ -550,12 +671,12 @@ export default {
},
addMappingArr() {
this.mappingForm.mappingArr.push(
{
name: '',
region: '',
isArray: false,
mapData: '',
}
{
name: '',
region: '',
isArray: false,
mapData: '',
}
)
},
}

@ -296,7 +296,7 @@ export default {
this.dialogVisible = false
},
SelectComponentsCB(e) {
this.$set(this.tree, this.type, e)
this.$set(this.tree, this.type, JSON.parse(JSON.stringify(e)))
this.componentsDialogVisible = false
},
clearCom() {

@ -294,7 +294,7 @@ export default {
this.dialogVisible = false
},
SelectComponentsCB(e) {
this.$set(this.tree, this.type, e)
this.$set(this.tree, this.type, JSON.parse(JSON.stringify(e)))
this.componentsDialogVisible = false
},
clearCom() {

@ -35,7 +35,7 @@ export default {
if (Object.keys(data).length > 0) {
this.getChartData(data)
}
this.chartData.color = this.styleData?.colors?.length > 0 ? this.styleData.colors : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
this.chartData.color = this.styleData?.colors1?.length > 0 ? this.styleData.colors1 : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
this.$refs.chart?.setData(this.$clearNull(this.chartData, this.requestData) || {})
},

@ -8,7 +8,7 @@ import Chart from '@/components/chart'
import Vue from "vue";
export default {
props: ['defaultData'],
props: ['defaultData', 'styleData'],
components: {
Chart
},
@ -28,13 +28,14 @@ export default {
await this.getData()
setInterval(async () => {
await this.getData()
}, 10000)
}, 60000)
},
methods: {
async getData() {
this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData))
this.chartData.color = this.styleData?.colors1?.length > 0 ? this.styleData.colors1 : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
let data = await this.$getFinalData(this.defaultData.requests)
console.log('chart-data',data)
console.log('chart-data',this.styleData?.colors)
console.log('chart-data==--==',this.defaultData)
if (Object.keys(data).length > 0) {
this.pieData = data[this.defaultData.configForm.data]

@ -49,7 +49,7 @@ service.interceptors.request.use(config => {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
const interval = 100; // 间隔时间(ms),小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理,请勿重复提交';
console.warn(`[${s_url}]: ` + message)

@ -3,276 +3,290 @@ import {getHistoryData} from "@/api/configuration/equipment";
import Vue from 'vue'
const mappingFunction = async (data, method) => {
if (data.type === 1) {
let res2 = await interfaceRequest(data)
let returnRes = {}
method?.mappingArr?.forEach(v => {
let res = res2.data
for (let i of (v?.region || [])) {
if (res[i]) {
res = res[i]
} else {
res = null
return
}
}
if (v?.isArray && v?.mapData && Array.isArray(res)) {
res = res.map(e => e[v.mapData])
}
returnRes = {
...returnRes,
[v?.name]: res
}
})
return returnRes
}
if (data.type === 1) {
let res2 = await interfaceRequest(data)
let returnRes = {}
method?.mappingArr?.forEach(v => {
let res = res2.data
for (let i of (v?.region || [])) {
if (res[i]) {
res = res[i]
} else {
res = null
return
}
}
if (v?.isArray && v?.mapData && Array.isArray(res)) {
res = res.map(e => e[v.mapData])
}
returnRes = {
...returnRes,
[v?.name]: res
}
})
return returnRes
}
if (data.type === 2) {
let res2 = await getHistoryData({
deviceModeId: data.deviceModeId,
functionIdentifier: data.functionIdentifier + '1',
interval: data.interval,
"sceneId": 144,
"deviceId": data.deviceId,
startTime: data.startTime,
endTime: data.endTime,
intervalType: 1 || data.intervalType,
})
let returnRes = {}
method?.mappingArr?.forEach(v => {
let res = res2.data
for (let i of (v?.region || [])) {
if (res[i]) {
res = res[i]
} else {
res = null
return
}
}
if (v?.isArray && v?.mapData && Array.isArray(res)) {
res = res.map(e => e[v.mapData])
}
returnRes = {
...returnRes,
[v?.name]: res
}
})
return returnRes
if (data.type === 2) {
let res2 = await getHistoryData({
deviceModeId: data.deviceModeId,
functionIdentifier: data.functionIdentifier,
interval: data.interval,
"sceneId": 144,
"deviceId": data.deviceId,
startTime: data.startTime,
endTime: data.endTime,
intervalType: 1 || data.intervalType,
})
console.log('datadata', data.interval)
if (data.interval === '5') {
res2.data.groupDeviceData.dataList = res2.data.groupDeviceData.dataList.map(e => {
return {...e, time: parseTime(e.time, '{y}-{m}')}
})
} else if (data.interval === '4' || data.interval === '3') {
res2.data.groupDeviceData.dataList = res2.data.groupDeviceData.dataList.map(e => {
return {...e, time: parseTime(e.time, '{y}-{m}-{d}')}
})
}else{
res2.data.groupDeviceData.dataList = res2.data.groupDeviceData.dataList.map(e => {
return {...e, time: parseTime(e.time, '{y}-{m}-{d} {h}:{i}:{s}')}
})
}
let returnRes = {}
method?.mappingArr?.forEach(v => {
let res = res2.data
for (let i of (v?.region || [])) {
if (res[i]) {
res = res[i]
} else {
res = null
return
}
}
if (v?.isArray && v?.mapData && Array.isArray(res)) {
res = res.map(e => e[v.mapData])
}
returnRes = {
...returnRes,
[v?.name]: res
}
})
return returnRes
}
}
const detectingNullValues = (obj, keys) => {
let data = obj
if (keys.length > 1) {
if (!data[keys[0]]) {
if (typeof keys[1] === 'string') {
Vue.set(data, keys[0], {})
detectingNullValues(data[keys[0]], keys.slice(1))
}
if (typeof keys[1] === 'number') {
Vue.set(data, keys[0], [])
detectingNullValues(data[keys[0]], keys.slice(1))
}
} else {
detectingNullValues(data[keys[0]], keys.slice(1))
}
let data = obj
if (keys.length > 1) {
if (!data[keys[0]]) {
if (typeof keys[1] === 'string') {
Vue.set(data, keys[0], {})
detectingNullValues(data[keys[0]], keys.slice(1))
}
if (typeof keys[1] === 'number') {
Vue.set(data, keys[0], [])
detectingNullValues(data[keys[0]], keys.slice(1))
}
} else {
detectingNullValues(data[keys[0]], keys.slice(1))
}
return data
}
return data
}
const GetFinalData = async (requests) => {
let requestArr = []
requests.forEach(e => {
if (e.type === 'network') {
requestArr.push(mappingFunction(e, e.mappingForm))
}
})
return Promise.all(requestArr).then(e => {
let data = {}
e.forEach(v => {
data = {
...data,
...v
}
})
return data
let requestArr = []
requests.forEach(e => {
if (e.type === 'network') {
requestArr.push(mappingFunction(e, e.mappingForm))
}
})
return Promise.all(requestArr).then(e => {
let data = {}
e.forEach(v => {
data = {
...data,
...v
}
})
return data
})
}
const limitSolve = (type, e) => {
switch (type) {
case 0:
if (e.data2) {
return e.data3
} else if (e.data1 >= 100) {
return 100
} else if (e.data1 <= 0) {
return 0
} else {
return e.data1
}
case 1:
if (e.data1 >= 100) {
return 100
} else if (e.data1 <= 0) {
return 0
} else {
return e.data1
}
}
switch (type) {
case 0:
if (e.data2) {
return e.data3
} else if (e.data1 >= 100) {
return 100
} else if (e.data1 <= 0) {
return 0
} else {
return e.data1
}
case 1:
if (e.data1 >= 100) {
return 100
} else if (e.data1 <= 0) {
return 0
} else {
return e.data1
}
}
}
const parseData = (str, data) => {
let data1 = str.substring(2, str.length - 2)
let keys = data1.split('.')
let dataRow = data
keys.forEach(e => {
if (dataRow && dataRow !== void 0) {
dataRow = dataRow[e]
}
})
return dataRow
let data1 = str.substring(2, str.length - 2)
let keys = data1.split('.')
let dataRow = data
keys.forEach(e => {
if (dataRow && dataRow !== void 0) {
dataRow = dataRow[e]
}
})
return dataRow
}
const clearObjNull = (e, data1) => {
let obj = {}
for (const key in e) {
if (e.hasOwnProperty(key)) {
if (e[key] === null || (e[key] === void 0) || e[key] === '') {
} else if (e[key]?.constructor === Object) {
let data = clearObjNull(e[key], data1)
if (data) {
obj[key] = data
}
} else if (Array.isArray(e[key])) {
let data = clearArrNull(e[key], data1)
if (data) {
obj[key] = data
}
} else {
let v = e[key]
if (typeof v === 'string' && v.startsWith('{{') && v.endsWith('}}')) {
obj[key] = parseData(v, data1)
} else {
obj[key] = v
}
}
let obj = {}
for (const key in e) {
if (e.hasOwnProperty(key)) {
if (e[key] === null || (e[key] === void 0) || e[key] === '') {
} else if (e[key]?.constructor === Object) {
let data = clearObjNull(e[key], data1)
if (data) {
obj[key] = data
}
} else if (Array.isArray(e[key])) {
let data = clearArrNull(e[key], data1)
if (data) {
obj[key] = data
}
} else {
let v = e[key]
if (typeof v === 'string' && v.startsWith('{{') && v.endsWith('}}')) {
obj[key] = parseData(v, data1)
} else {
obj[key] = v
}
}
}
return Object.keys(obj).length === 0 ? null : obj
}
return Object.keys(obj).length === 0 ? null : obj
}
const clearArrNull = (e, data1) => {
if (!Array.isArray(e)) {
return null
if (!Array.isArray(e)) {
return null
}
let arr = []
e.forEach(v => {
if (v === null || (v === void 0) || v === '') {
} else if (v?.constructor === Object) {
let data = clearObjNull(v, data1)
if (data) {
arr.push(data)
}
} else if (Array.isArray(v)) {
let data = clearArrNull(v, data1)
if (data) {
arr.push(data)
}
} else {
if (typeof v === 'string' && v.startsWith('{{') && v.endsWith('}}')) {
arr.push(parseData(v, data1))
} else {
arr.push(v)
}
}
let arr = []
e.forEach(v => {
if (v === null || (v === void 0) || v === '') {
} else if (v?.constructor === Object) {
let data = clearObjNull(v, data1)
if (data) {
arr.push(data)
}
} else if (Array.isArray(v)) {
let data = clearArrNull(v, data1)
if (data) {
arr.push(data)
}
} else {
if (typeof v === 'string' && v.startsWith('{{') && v.endsWith('}}')) {
arr.push(parseData(v, data1))
} else {
arr.push(v)
}
}
})
return arr.length === 0 ? null : arr
})
return arr.length === 0 ? null : arr
}
const clearNull = (e, data) => {
if (typeof e === 'string' && e.startsWith('{{') && e.endsWith('}}')) {
return parseData(e, data)
}
if (e?.constructor === Object) {
return clearObjNull(e, data)
} else if (Array.isArray(e)) {
return clearArrNull(e, data)
} else {
return e
}
if (typeof e === 'string' && e.startsWith('{{') && e.endsWith('}}')) {
return parseData(e, data)
}
if (e?.constructor === Object) {
return clearObjNull(e, data)
} else if (Array.isArray(e)) {
return clearArrNull(e, data)
} else {
return e
}
}
const parseTime = (time, pattern) => {
if (arguments.length === 0 || !time) {
return null
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
const getFinalData = async (e) => {
let requestArr = []
e.forEach((i, k) => {
requestArr.push(mappingFunction(i, i.mappingForm))
})
return Promise.all(requestArr).then(i => {
let data = {}
i.forEach(v => {
data = {
...data,
...v
}
})
return data
let requestArr = []
e.forEach((i, k) => {
requestArr.push(mappingFunction(i, i.mappingForm))
})
return Promise.all(requestArr).then(i => {
let data = {}
i.forEach(v => {
data = {
...data,
...v
}
})
return data
})
}
const testColor = (color) => {
const regexHex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
const regexRgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
const regexRgba = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*([0-9]*\.?[0-9]+)\)$/;
const regexHex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
const regexRgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
const regexRgba = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*([0-9]*\.?[0-9]+)\)$/;
return regexHex.test(color) || regexRgb.test(color) || regexRgba.test(color);
return regexHex.test(color) || regexRgb.test(color) || regexRgba.test(color);
}
export {
limitSolve,
parseData,
clearObjNull,
clearArrNull,
clearNull,
detectingNullValues,
getFinalData,
parseTime,
testColor
limitSolve,
parseData,
clearObjNull,
clearArrNull,
clearNull,
detectingNullValues,
getFinalData,
parseTime,
testColor
}

@ -2,7 +2,7 @@
<div style="width: 100vw;height: 100vh;overflow:auto;" class="container">
<div class="bindComponents" ref="container">
<div ref="scene" class="scene"
:style="`width:${pageData.width?( pageData.width -1 +'px'):'100%'};height:${pageData.height?( pageData.height - 1+'px'):'100%'};background-image:url(${pageCfg.bg})`">
:style="`width:${pageData.width?( pageData.width -1 +'px'):'100%'};height:${pageData.height?( pageData.height - 1+'px'):'100%'};${pageCfg.isBgImg? `background-image:url(${pageCfg.bg})`:`background-color:${pageCfg.bg}`}`">
<component :is="sceneData.center" :viewFlag="true" :styleData="pageCfg.styleData"
:tree="sceneData.centerChildren"></component>
</div>

@ -153,7 +153,7 @@
</div>
<div class="bindComponents" ref="container">
<div ref="scene" class="scene"
:style="`width:${pageData.width?( pageData.width+'px'):'100%'};height:${pageData.height?( pageData.height+'px'):'100%'};background-image:url(${pageCfg.bg})`">
:style="`width:${pageData.width?( pageData.width+'px'):'100%'};height:${pageData.height?( pageData.height+'px'):'100%'};${pageCfg.isBgImg? `background-image:url(${pageCfg.bg})`:`background-color:${pageCfg.bg}`}`">
<component :is="bindComponentsData.sceneData.center "
:styleData="pageCfg.styleData"
:tree="bindComponentsData.sceneData.centerChildren"></component>
@ -185,9 +185,19 @@
</el-col>
</el-form-item>
<el-form-item label="画布背景" label-width="120px">
<el-switch
v-model="pageCfg.isBgImg"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="图片"
inactive-text="纯色">
</el-switch>
<br>
<el-color-picker v-if="!pageCfg.isBgImg" v-model="pageCfg.bg"></el-color-picker>
<el-upload
v-if="pageCfg.isBgImg"
class="avatar-uploader"
action="dev-api/basic/hwTemplateAchieve/saveImage"
:action="(process.env.NODE_ENV === 'development'?'dev-api':'prod-api')+'/basic/hwTemplateAchieve/saveImage'"
:headers="{
authorization:'Bearer ' + getToken()
}"
@ -271,6 +281,7 @@ export default {
},
data() {
return {
process,
inputVisible: false,
inputValue: '',
inputVisible1: false,

@ -81,7 +81,7 @@
<el-form-item label="背景" label-width="80px">
<el-upload
class="avatar-uploader"
action="dev-api/basic/hwTemplateAchieve/saveImage"
:action="(process.env.NODE_ENV === 'development'?'dev-api':'prod-api')+'/basic/hwTemplateAchieve/saveImage'"
:headers="{
authorization:'Bearer ' + getToken()
}"
@ -127,6 +127,7 @@ export default {
},
data() {
return {
process,
load: false,
dialogTitle1: '',
addModelDialog: false,
@ -151,6 +152,9 @@ export default {
tableData: []
}
},
created() {
this.process = process
},
mounted() {
this.queryModels()
},

Loading…
Cancel
Save