Skip to content

H
holo-web
Commit 5b912e2f authored by ninglx's avatar ninglx
Browse files
Options

wj-smartcity 引入vue-echarts使用resize特性完成图表自适应并减少option代码量，部分字体大小自适应

parent ef8ce42a
Show whitespace changes
Inline Side-by-side
Showing with 633 additions and 682 deletions
wj-smartcity/package.json
View file @ 5b912e2f
......@@ -49,6 +49,7 @@
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-draggable-resizable": "^2.3.0",
"vue-echarts": "^6.7.2",
"vue-router": "^3.4.6",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.5.1"
......
wj-smartcity/src/main.js
View file @ 5b912e2f
......@@ -18,6 +18,9 @@ Vue.component('vue-draggable-resizable', VueDraggableResizable)
// script引入element use
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "echarts";
import Chart from 'vue-echarts';
Vue.component('v-chart', Chart)
Vue.use(ElementUI, {
size: 'small',
})
......
wj-smartcity/src/views/signal/index.vue
View file @ 5b912e2f
......@@ -5,6 +5,7 @@
@showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
<!--切换图层 收起放开侧边栏-->
<layers-switch
ref="switch"
:show="boxesShow"
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/queueLength.vue
View file @ 5b912e2f
......@@ -12,7 +12,7 @@
</el-option>
</el-select>
</div>
<div class="d-chart" id="d-queueLength"></div>
<v-chart class="d-chart" autoresize :option="option"/>
</div>
</template>
......@@ -25,6 +25,7 @@ export default {
props:['crossData'],
data() {
return {
option:{},
turnMap: {'r':'右转','s':'直行','l':'左转'},
options: [],
selectVal: '',
......@@ -240,12 +241,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-queueLength")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
// 渲染转向级别排队图表
renderTurn() {
......@@ -383,12 +379,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-queueLength")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
},
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficFlow.vue
View file @ 5b912e2f
......@@ -14,7 +14,8 @@
</el-option>
</el-select>
</div>
<div class="d-chart" id="d-trafficFlow"></div>
<!-- <div class="d-chart" id="d-trafficFlow"></div>-->
<v-chart class="d-chart" autoresize :option="option"/>
</div>
</template>
......@@ -27,6 +28,7 @@ export default {
name: 'trafficFlow',
data() {
return {
option:{},
colors :[
"rgba(24, 144, 255, 1)",
"rgba(0, 189, 208, 1)",
......@@ -299,16 +301,10 @@ export default {
data: yDatas[key],
})
}
console.log("series", series);
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
// 渲染转向级别流量图表
renderTurn() {
......@@ -471,12 +467,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
// 渲染车道级流量图表
renderLane(){
......@@ -637,12 +628,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
}
},
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficStatus.vue
View file @ 5b912e2f
<template>
<div class="full-w-h d-trafficStatus">
<div class="d-trafficStatus-pie" id="d-trafficStatus-pie"></div>
<v-chart class="d-trafficStatus-pie" autoresize :option="option"/>
<div class="legends">
<div class="legend-item" v-for="(item, index) of pieData" :key="index">
<div :style="`background-color:${colorMap[item.name]}`" class="color"></div>
......@@ -34,37 +34,16 @@ export default {
'spilloverTimeRate':'#ffd145',
'unbalanceTimeRate':'#afafaf',
'unblockedTimeRate':'#00933a'
}
},
}
},
mounted() {
this.renderCharts()
},
methods:{
renderCharts(){
getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{
console.log('交通状态',res)
let result = []
for(let key in res.content){
if(key!=='crossId'){
result.push({
value:res.content[key],
// name:this.fieldMap[key],
name:key,
// nameVal: key
itemStyle:{
color:this.colorMap[key]
}
})
}
}
this.pieData = result
let chartDom = document.getElementById('d-trafficStatus-pie');
if(!this.chart){
this.chart = echarts.init(chartDom);
}
console.log('result',result)
let option = {
computed:{
option(){
return {
tooltip: {
show:false,
trigger: 'item'
......@@ -93,11 +72,31 @@ export default {
labelLine: {
show: false
},
data: result
data: this.pieData
}
]
};
option && this.chart.setOption(option);
}
}
},
methods:{
renderCharts(){
getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{
console.log('交通状态',res)
let result = []
for(let key in res.content){
if(key!=='crossId'){
result.push({
value:res.content[key],
// name:this.fieldMap[key],
name:key,
// nameVal: key
itemStyle:{
color:this.colorMap[key]
}
})
}
}
this.pieData = result
})
}
......
wj-smartcity/src/views/signal/msgs/right/keyCross.vue
View file @ 5b912e2f
......@@ -2,8 +2,7 @@
<msg-card class="item-keyCross" title="重点路口监测">
<div class="full-w-h" style="position: relative">
<div class="keyCrossTitle">排队长度(m)</div>
<div id="keyCross" class="full-w-h chart">
</div>
<v-chart autoresize :option="option"/>
</div>
</msg-card>
</template>
......@@ -18,66 +17,23 @@ let timer = null;
export default {
name: "keyCross",
components: {
msgCard,
msgCard
},
data() {
return {
tabsLoading: true,
charts: {},
xData:[],
chartResult:{},
};
},
methods: {
getData(){
getKeyCross({crossId:''}).then(res=>{
console.log('key cross...',res)
if(res.content){
let xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
}
}
return a
},[])
let results = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[item.dir] = [item.queueLength]
}
}
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
}else{
a[key] = [0]
}
}
}
return a
},{})
console.log('results',results)
this.renderCharts(xData, results)
}
})
},
renderCharts(xData, lists){
let option = {
computed:{
option(){
return {
dataZoom: {
type: "inside",
startValue: Object.keys(lists).length - 6,
endValue: Object.keys(lists).length - 1,
startValue: Object.keys(this.chartResult).length - 6,
endValue: Object.keys(this.chartResult).length - 1,
},
color: [
"rgba(24, 144, 255, 1)",
......@@ -124,7 +80,7 @@ export default {
},
xAxis: {
type: "category",
data: xData,
data: this.xData,
axisLabel: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
......@@ -152,7 +108,9 @@ export default {
},
series: (() => {
let series = [];
for(let key in lists){
console.log('this.chartResult',this.chartResult)
for(let key in this.chartResult){
console.log('push')
let nameReal = this.$store.state.dicts.Direction.find((item) => {
return item.code == key;
}).name
......@@ -166,18 +124,57 @@ export default {
emphasis: {
focus: "series",
},
data: lists[key],
data: this.chartResult[key],
})
}
console.log("series", series);
return series;
})(),
};
this.charts.cross = echarts.init(
document.getElementById("keyCross")
);
this.charts.cross && this.charts.cross.setOption(option);
}
}
},
methods: {
getData(){
getKeyCross({crossId:''}).then(res=>{
console.log('key cross...',res)
if(res.content){
this.xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
}
}
return a
},[])
this.chartResult = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[item.dir] = [item.queueLength]
}
}
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
}else{
a[key] = [0]
}
}
}
return a
},{})
}
})
},
},
mounted() {
let queue = [];
......
wj-smartcity/src/views/signal/msgs/trafficFlow.vue
View file @ 5b912e2f
......@@ -16,7 +16,7 @@ import msgCard from "../../../components/Standard/msg-card.vue";
import {getFlows, getSingalFlow} from "@/dao/optApi";
let timer = null;
let watchChartWc = null
export default {
name: "trafficFlow",
components: {
......@@ -370,6 +370,7 @@ export default {
this.charts.cross && this.charts.cross.setOption(option);
}
},
mounted() {
// let queue = [];
// let needDicts = [
......
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/evaluationIndicators.vue
View file @ 5b912e2f
<template>
<div class="full-w-h" style="background-color:#061b33;color: rgba(255,255,255,0.8);display: flex; flex-direction: row">
<div class="full-w-h"
style="background-color:#061b33;color: rgba(255,255,255,0.8);display: flex; flex-direction: row">
<div class="left-container">
<div class="radio-container">
<el-radio-group class="groups" @input="dimensionChange" v-model="radio">
......@@ -10,7 +11,7 @@
</el-radio-group>
</div>
<div class="options">
<div class="option">时间粒度：
<div class="option"><label class="custom-form-label">时间粒度：</label>
<el-select @change="timeGranularityChange" class="form1" v-model="timeGranularity" placeholder="请选择">
<el-option
v-for="item in timeGranularityOptions"
......@@ -50,14 +51,14 @@
</el-option>
</el-select>
</div>
<div class="option">当前时段：
<div class="option"><label class="custom-form-label">当前时段：</label>
<el-date-picker class="form3" :clearable="false"
v-model="currentTimes" @change="currentChange"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange">
</el-date-picker>
</div>
<div class="option">对比时段：
<div class="option"><label class="custom-form-label">对比时段：</label>
<el-radio-group @input="compareTimeTypeChange" v-model="compareTimeType">
<el-radio :label="1">同比</el-radio>
<el-radio :label="2">环比</el-radio>
......@@ -76,29 +77,29 @@
<div class="leftPies">
<div class="pie">
<div class="pieTitle">溢出时长</div>
<div class="chart" id="overflowPie"></div>
<v-chart class="chart" autoresize :option="overflowPieOption"/>
</div>
<div class="pie">
<div class="pieTitle">空放时长</div>
<div class="chart" id="emptyPie"></div>
<v-chart class="chart" autoresize :option="emptyPieOption"/>
</div>
</div>
<div class="centerLines">
<div class="line">
<div>交通流量</div>
<div class="chart" id="trafficFlow"></div>
<v-chart class="chart" autoresize :option="trafficFlowOption"/>
</div>
<div class="line">
<div>排队长度</div>
<div class="chart" id="queueLength"></div>
<v-chart class="chart" autoresize :option="queueLengthOption"/>
</div>
<div class="line">
<div>平均速度</div>
<div class="chart" id="averageSpeed"></div>
<v-chart class="chart" autoresize :option="averageSpeedOption"/>
</div>
<div class="line">
<div>停车次数</div>
<div class="chart" id="stopNumber"></div>
<v-chart class="chart" autoresize :option="stopNumberOption"/>
</div>
</div>
</div>
......@@ -150,6 +151,16 @@ export default {
props: ['cross'],
data() {
return {
overflowData: [],
emptyData: [],
trafficFlowCur:[],
trafficFlowCom:[],
queueLengthCur:[],
queueLengthCom:[],
averageSpeedCur:[],
averageSpeedCom:[],
stopNumberCur:[],
stopNumberCom:[],
// 路口级 0 进口道级 1 转向级 2 车道级 3
radio: 0,
timeGranularityOptions: [
......@@ -171,197 +182,109 @@ export default {
laneLevelOptions: [],
planActive: {},
charts: {},
colors:['#00bdd0','#1f93ff'],
colors: ['#00bdd0', '#1f93ff'],
}
},
computed: {
currentTimeStart() {
return this.currentTimes[0]
},
currentTimeEnd() {
return this.currentTimes[1]
},
compareTimeStart() {
if (this.compareTimeType === 3) {
return this.compareTimes[0]
}
// 同比
if (this.compareTimeType === 1) {
return new Date(new Date(this.currentTimes[0]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
}
// 环比
if (this.compareTimeType === 2) {
let range = new Date(this.currentTimes[1]).getTime() - new Date(this.currentTimes[0]).getTime()
return new Date(new Date(this.currentTimes[0]).getTime() - range).toLocaleString().replaceAll('/', '-')
}
overflowPieOption() {
return {
color: this.colors,
tooltip: {
trigger: 'item'
},
compareTimeEnd() {
if (this.compareTimeType === 3) {
return this.compareTimes[1]
}
// 同比
if (this.compareTimeType === 1) {
return new Date(new Date(this.currentTimes[1]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
}
// 环比
if (this.compareTimeType === 2) {
return this.currentTimes[0]
legend: {
icon: 'circle',
bottom: '3%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
mounted() {
let cur1 = new Date().toLocaleString().replaceAll('/', '-')
let cur0 = new Date(new Date(cur1).getTime() - 1000 * 60 * 60).toLocaleString().replaceAll('/', '-')
this.$set(this, 'currentTimes', [cur0, cur1])
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
watch: {
cross: {
handler(newVal) {
this.$nextTick(() => {
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
})
itemStyle: {
borderRadius: '5%',
},
deep: true
}
labelLine: {
show: false
},
methods: {
// 选择维度变化
dimensionChange() {
if ([1, 2, 3].includes(this.radio)) {
bottomMenu({
crossId: this.cross.crossId,
scope: this.radio
}).then(res => {
if (this.radio === 1) {
this.crossInLevelOptions = res.data.content
this.crossInLevel = res.data.content[0]
data: this.overflowData
}
if (this.radio === 2) {
this.turnLevelOptions = res.data.content
this.turnLevel = res.data.content[0]
}
if (this.radio === 3) {
this.laneLevelOptions = res.data.content
this.laneLevel = res.data.content[0]
}
this.$nextTick(() => {
this.getLines()
})
})
} else {
this.getLines()
]
}
},
// 当前时间变化
currentChange(e) {
let start = `${new Date(this.currentTimes[0]).getFullYear()}${new Date(this.currentTimes[0]).getMonth()+1}${new Date(this.currentTimes[0]).getDate()}`
let end = `${new Date(this.currentTimes[1]).getFullYear()}${new Date(this.currentTimes[1]).getMonth()+1}${new Date(this.currentTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
}
emptyPieOption() {
return {
color: this.colors,
tooltip: {
trigger: 'item'
},
// 对比时段变化
compareTimeChange() {
let start = `${new Date(this.compareTimes[0]).getFullYear()}${new Date(this.compareTimes[0]).getMonth()+1}${new Date(this.compareTimes[0]).getDate()}`
let end = `${new Date(this.compareTimes[1]).getFullYear()}${new Date(this.compareTimes[1]).getMonth()+1}${new Date(this.compareTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
legend: {
icon: 'circle',
bottom: '3%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
// 时间粒度变化
timeGranularityChange() {
this.getLines()
series: [
{
itemStyle: {
borderRadius: '5%'
},
// 车道/进口等变化
scopeChange() {
this.getLines()
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
// 对比时段类型变化
compareTimeTypeChange() {
if ([1, 2].includes(this.compareTimeType)) {
this.getLines()
this.getOverflowEmpty()
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
// 获取当前&对比时段四个折线图信息
async getLines() {
let currentParam = {
startTime: this.currentTimeStart,
endTime: this.currentTimeEnd,
crossId: this.cross.crossId,
minutes: this.timeGranularity,
scope: this.radio,
scopeList: [],
}
let compareParam = {
startTime: this.compareTimeStart,
endTime: this.compareTimeEnd,
crossId: this.cross.crossId,
minutes: this.timeGranularity,
scope: this.radio,
scopeList: [],
}
// 进口道级/转向级/车道级 参数
if ([1, 2, 3].includes(this.radio)) {
let scopeList
if (this.radio === 1) {
scopeList = [this.crossInLevel]
}
if (this.radio === 2) {
scopeList = [this.turnLevel]
}
if (this.radio === 3) {
scopeList = [this.laneLevel]
labelLine: {
show: false
},
data: this.emptyData
}
currentParam = Object.assign({}, currentParam, {scopeList: scopeList})
compareParam = Object.assign({}, compareParam, {scopeList: scopeList})
]
}
Promise.all([
bottomCurve(Object.assign({}, currentParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '停车次数'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '停车次数'})),
]).then(([res1, res2, res3, res4, res5, res6, res7, res8]) => {
this.refreshTrafficFlow(res1.data.content, res2.data.content)
this.refreshQueueLength(res3.data.content, res4.data.content)
this.refreshAverageSpeed(res5.data.content, res6.data.content)
this.refreshStopNumber(res7.data.content, res8.data.content)
})
},
refreshTrafficFlow(cur, com) {
let chartDom = document.getElementById('trafficFlow');
if (!this.charts['line1']) {
this.charts['line1'] = echarts.init(chartDom);
}
trafficFlowOption() {
let series = []
let curS = cur.map(item => {
let curS = this.trafficFlowCur.map(item => {
return item.value
})
let comS = com.map(item => {
let comS = this.trafficFlowCom.map(item => {
return item.value
})
let xData = cur.map(item => {
let xData = this.trafficFlowCur.map(item => {
return item.metricTime
})
let xData1 = com.map(item => {
let xData1 = this.trafficFlowCom.map(item => {
return item.metricTime
})
let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
......@@ -396,7 +319,7 @@ export default {
boundaryGap: false,
data: xData,
}
let option = {
return {
color: this.colors,
tooltip: {
trigger: 'axis'
......@@ -416,7 +339,7 @@ export default {
bottom: '3%',
containLabel: true
},
xAxis:xAxis,
xAxis: xAxis,
yAxis: {
type: 'value',
splitLine: {
......@@ -426,25 +349,20 @@ export default {
}
},
series: series
};
this.charts['line1'].setOption(option, {notMerge: true});
},
refreshQueueLength(cur, com) {
let chartDom = document.getElementById('queueLength');
if (!this.charts['line2']) {
this.charts['line2'] = echarts.init(chartDom);
}
},
queueLengthOption(){
let series = []
let curS = cur.map(item => {
let curS = this.queueLengthCur.map(item => {
return item.value
})
let comS = com.map(item => {
let comS = this.queueLengthCom.map(item => {
return item.value
})
let xData = cur.map(item => {
let xData = this.queueLengthCur.map(item => {
return item.metricTime
})
let xData1 = com.map(item => {
let xData1 = this.queueLengthCom.map(item => {
return item.metricTime
})
let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
......@@ -479,7 +397,7 @@ export default {
boundaryGap: false,
data: xData,
}
let option = {
return {
color: this.colors,
tooltip: {
trigger: 'axis'
......@@ -510,24 +428,19 @@ export default {
},
series: series
};
this.charts['line2'].setOption(option, {notMerge: true});
},
refreshAverageSpeed(cur, com) {
let chartDom = document.getElementById('averageSpeed');
if (!this.charts['line3']) {
this.charts['line3'] = echarts.init(chartDom);
}
averageSpeedOption(){
let series = []
let curS = cur.map(item => {
let curS = this.averageSpeedCur.map(item => {
return item.value
})
let comS = com.map(item => {
let comS = this.averageSpeedCom.map(item => {
return item.value
})
let xData = cur.map(item => {
let xData = this.averageSpeedCur.map(item => {
return item.metricTime
})
let xData1 = com.map(item => {
let xData1 = this.averageSpeedCom.map(item => {
return item.metricTime
})
let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
......@@ -562,7 +475,7 @@ export default {
boundaryGap: false,
data: xData,
}
let option = {
return {
color: this.colors,
tooltip: {
trigger: 'axis'
......@@ -593,24 +506,19 @@ export default {
},
series: series
};
this.charts['line3'].setOption(option, {notMerge: true});
},
refreshStopNumber(cur, com) {
let chartDom = document.getElementById('stopNumber');
if (!this.charts['line4']) {
this.charts['line4'] = echarts.init(chartDom);
}
stopNumberOption(){
let series = []
let curS = cur.map(item => {
let curS = this.stopNumberCur.map(item => {
return item.value
})
let comS = com.map(item => {
let comS = this.stopNumberCom.map(item => {
return item.value
})
let xData = cur.map(item => {
let xData = this.stopNumberCur.map(item => {
return item.metricTime
})
let xData1 = com.map(item => {
let xData1 = this.stopNumberCom.map(item => {
return item.metricTime
})
let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
......@@ -645,7 +553,7 @@ export default {
boundaryGap: false,
data: xData,
}
let option = {
return {
color: this.colors,
tooltip: {
......@@ -676,8 +584,179 @@ export default {
}
},
series: series
};
this.charts['line4'].setOption(option, {notMerge: true});
}
},
currentTimeStart() {
return this.currentTimes[0]
},
currentTimeEnd() {
return this.currentTimes[1]
},
compareTimeStart() {
if (this.compareTimeType === 3) {
return this.compareTimes[0]
}
// 同比
if (this.compareTimeType === 1) {
return new Date(new Date(this.currentTimes[0]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
}
// 环比
if (this.compareTimeType === 2) {
let range = new Date(this.currentTimes[1]).getTime() - new Date(this.currentTimes[0]).getTime()
return new Date(new Date(this.currentTimes[0]).getTime() - range).toLocaleString().replaceAll('/', '-')
}
},
compareTimeEnd() {
if (this.compareTimeType === 3) {
return this.compareTimes[1]
}
// 同比
if (this.compareTimeType === 1) {
return new Date(new Date(this.currentTimes[1]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
}
// 环比
if (this.compareTimeType === 2) {
return this.currentTimes[0]
}
},
},
mounted() {
let cur1 = new Date().toLocaleString().replaceAll('/', '-')
let cur0 = new Date(new Date(cur1).getTime() - 1000 * 60 * 60).toLocaleString().replaceAll('/', '-')
this.$set(this, 'currentTimes', [cur0, cur1])
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
},
watch: {
cross: {
handler(newVal) {
this.$nextTick(() => {
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
})
},
deep: true
}
},
methods: {
// 选择维度变化
dimensionChange() {
if ([1, 2, 3].includes(this.radio)) {
bottomMenu({
crossId: this.cross.crossId,
scope: this.radio
}).then(res => {
if (this.radio === 1) {
this.crossInLevelOptions = res.data.content
this.crossInLevel = res.data.content[0]
}
if (this.radio === 2) {
this.turnLevelOptions = res.data.content
this.turnLevel = res.data.content[0]
}
if (this.radio === 3) {
this.laneLevelOptions = res.data.content
this.laneLevel = res.data.content[0]
}
this.$nextTick(() => {
this.getLines()
})
})
} else {
this.getLines()
}
},
// 当前时间变化
currentChange(e) {
let start = `${new Date(this.currentTimes[0]).getFullYear()}${new Date(this.currentTimes[0]).getMonth() + 1}${new Date(this.currentTimes[0]).getDate()}`
let end = `${new Date(this.currentTimes[1]).getFullYear()}${new Date(this.currentTimes[1]).getMonth() + 1}${new Date(this.currentTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
}
},
// 对比时段变化
compareTimeChange() {
let start = `${new Date(this.compareTimes[0]).getFullYear()}${new Date(this.compareTimes[0]).getMonth() + 1}${new Date(this.compareTimes[0]).getDate()}`
let end = `${new Date(this.compareTimes[1]).getFullYear()}${new Date(this.compareTimes[1]).getMonth() + 1}${new Date(this.compareTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
}
},
// 时间粒度变化
timeGranularityChange() {
this.getLines()
},
// 车道/进口等变化
scopeChange() {
this.getLines()
},
// 对比时段类型变化
compareTimeTypeChange() {
if ([1, 2].includes(this.compareTimeType)) {
this.getLines()
this.getOverflowEmpty()
}
},
// 获取当前&对比时段四个折线图信息
async getLines() {
let currentParam = {
startTime: this.currentTimeStart,
endTime: this.currentTimeEnd,
crossId: this.cross.crossId,
minutes: this.timeGranularity,
scope: this.radio,
scopeList: [],
}
let compareParam = {
startTime: this.compareTimeStart,
endTime: this.compareTimeEnd,
crossId: this.cross.crossId,
minutes: this.timeGranularity,
scope: this.radio,
scopeList: [],
}
// 进口道级/转向级/车道级 参数
if ([1, 2, 3].includes(this.radio)) {
let scopeList
if (this.radio === 1) {
scopeList = [this.crossInLevel]
}
if (this.radio === 2) {
scopeList = [this.turnLevel]
}
if (this.radio === 3) {
scopeList = [this.laneLevel]
}
currentParam = Object.assign({}, currentParam, {scopeList: scopeList})
compareParam = Object.assign({}, compareParam, {scopeList: scopeList})
}
Promise.all([
bottomCurve(Object.assign({}, currentParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '停车次数'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '停车次数'})),
]).then(([res1, res2, res3, res4, res5, res6, res7, res8]) => {
[this.trafficFlowCur, this.trafficFlowCom] = [res1.data.content, res2.data.content];
[this.queueLengthCur, this.queueLengthCom] = [res3.data.content, res4.data.content];
[this.averageSpeedCur, this.averageSpeedCom] = [res5.data.content, res6.data.content];
[this.stopNumberCur, this.stopNumberCom] = [res7.data.content, res8.data.content];
})
},
// 获取当前&对比时段两饼图信息
getOverflowEmpty() {
......@@ -691,113 +770,19 @@ export default {
endDate: this.compareTimeEnd,
crossId: this.cross.crossId
}
Promise.all([crossEvaluate(currentParam), crossEvaluate(compareParam)]).then(([res1, res2]) => {
this.refreshPies(res1.data.content, res2.data.content)
})
},
refreshPies(cur, com) {
let chartDom = document.getElementById('overflowPie');
if (!this.charts['pie1']) {
this.charts['pie1'] = echarts.init(chartDom);
}
let overflowData = [
this.overflowData = [
{value: cur.spilloverSum, name: '当前时段'},
{value: com.spilloverSum, name: '对比时段'},
]
let option = {
color:this.colors,
tooltip: {
trigger: 'item'
},
legend: {
icon:'circle',
bottom: '3%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
itemStyle:{
borderRadius: '5%',
},
labelLine: {
show: false
},
data: overflowData
}
]
};
this.charts['pie1'].setOption(option, {notMerge: true});
let chartDom1 = document.getElementById('emptyPie');
if (!this.charts['pie2']) {
this.charts['pie2'] = echarts.init(chartDom1);
}
let emptyData = [
this.emptyData = [
{value: cur.emptyPhaseSum, name: '当前时段'},
{value: com.emptyPhaseSum, name: '对比时段'},
]
let option1 = {
color: this.colors,
tooltip: {
trigger: 'item'
},
legend: {
icon:'circle',
bottom: '3%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
itemStyle:{
borderRadius:'5%'
},
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: emptyData
}
]
};
this.charts['pie2'].setOption(option1, {notMerge: true});
},
// 获取右下角配时方案
async getSchemeData() {
......@@ -875,7 +860,8 @@ export default {
display: flex;
flex-direction: column;
margin-bottom: 10px;
.pieTitle{
.pieTitle {
height: 40px;
display: flex;
justify-content: center;
......@@ -883,17 +869,24 @@ export default {
color: white;
background-color: #042947;
}
.chart{
.chart {
background-color: #05203b;
}
}
}
.left-container{
width: 70%;height: calc(100% - 10px);display: flex; flex-direction: column;background-color: #061b33;
.left-container {
width: 70%;
height: calc(100% - 10px);
display: flex;
flex-direction: column;
background-color: #061b33;
margin-right: 10px;
margin-top: 10px;
}
.centerLines {
flex: 1;
height: 100%;
......@@ -909,10 +902,11 @@ export default {
flex-direction: column;
}
}
.right-container{
.right-container {
padding-top: 10px;
.cross-scheme-title{
.cross-scheme-title {
display: flex;
align-items: center;
height: 35px;
......@@ -922,12 +916,14 @@ export default {
}
}
.rightScheme {
//width: calc(100% - 1150px);
height: calc(100% - 35px);
background-color: #061b33;
width: 100%;
padding: 8px;
.schemeCross {
height: 60%;
display: flex;
......@@ -943,7 +939,8 @@ export default {
height: 50%;
display: flex;
flex-direction: column;
.schemeTitle{
.schemeTitle {
height: 32px;
background-image: linear-gradient(to right, #0a3563, transparent);
width: 100%;
......@@ -964,7 +961,8 @@ export default {
display: flex;
align-items: center;
height: 100%;
::v-deep label{
::v-deep label {
margin-bottom: 0;
}
}
......@@ -980,7 +978,8 @@ export default {
flex-grow: 1;
}
}
.radio-container{
.radio-container {
margin-bottom: 10px;
display: flex;
......@@ -990,6 +989,7 @@ export default {
padding-left: 15px;
background-image: linear-gradient(to right, #0a3563, transparent);
}
.options {
height: 40px;
display: flex;
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/index.vue
View file @ 5b912e2f
......@@ -2,7 +2,7 @@
<template>
<div class="area-line">
<div class="head-timeSelector">
<div>时段选择：</div>
<div class="custom-form-label">时段选择：</div>
<el-date-picker
@change="init"
v-model="dateModel"
......@@ -21,11 +21,7 @@
element-loading-background="rgba(0,0,0, 0.4)"
>
<div class="item-txt">干线运行分析</div>
<div id="pie1" class="chart">
<div class="liner-border">
<div class="border-inner"></div>
</div>
</div>
<v-chart class="chart" autoresize :option="leftPieOption"/>
<div class="leftPieChartLegend">
<div class="legendItem" v-for="item of pieData">
<div class="legendItemColor" :style="`background-color:${pieColorMap[item.nameVal]}`"></div>
......@@ -42,9 +38,9 @@
<div class="select-box1">
<div class="row_item">
<div class="row_col">
<div>当前时段：</div>
<div class="custom-form-label">当前时段：</div>
<el-select
style="width:150px"
class="custom-form-input"
v-model="schemeModel"
placeholder=""
filterable
......@@ -61,7 +57,7 @@
</el-select>
</div>
<div class="row_col">
<div class="button_left">场景：{{ sceneName || '--' }}</div>
<div class="custom-form-label button_left">场景：{{ sceneName || '--' }}</div>
<div>
<el-button
type="primary"
......@@ -74,9 +70,9 @@
</div>
<div class="row_item">
<div class="row_col">
<div>对比时段：</div>
<div class="custom-form-label">对比时段：</div>
<el-select
style="width:150px"
class="custom-form-input"
v-model="compareTimeType"
@change="compareTimeTypeChange"
>
......@@ -90,9 +86,9 @@
</el-select>
</div>
<div class="row_col">
<div>指标：</div>
<div class="custom-form-label">指标：</div>
<el-select
style="width:150px"
class="custom-form-input"
v-model="indexModelMiddle"
placeholder=""
filterable
......@@ -109,7 +105,7 @@
</div>
</div>
<div class="row_item" v-if="compareTimeType===3">
<div>自定义对比时段：</div>
<div class="custom-form-label">自定义对比时段：</div>
<el-date-picker :clearable="false" @change="getMiddleData" class="form3"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="compareTimes"
......@@ -144,8 +140,7 @@
type="areaLine"
@crossClick="crossClick"
></crossDistance>
<div class="chart" id="line1"></div>
<v-chart class="chart" autoresize :option="rightLineOption"/>
</div>
</div>
......@@ -180,6 +175,7 @@ export default {
name: 'lineEvaluation',
data() {
return {
rightClickCrossName:'',
pieColorMap:{
1:'#00933a',
2: '#ff8200',
......@@ -291,7 +287,7 @@ export default {
],
indexOption2: [],
leftRes: {},
rightRes: {},
rightRes: [],
rightTableModel: {},
legendMap: {
1: '畅通',
......@@ -316,6 +312,148 @@ export default {
},
props: ["areaObj"],
computed: {
rightLineOption(){
let targetCrossData = (this.rightRes||[]).find(item => {
return item.crossName === this.rightClickCrossName
})
let indexes = {
queueList: '非协调排队长度',
stopTimesList: '非协调停车次数',
twoStopRateList: '非协调二次停车率(%)'
}
let seriesData = []
let xData = []
if(targetCrossData){
console.log('t',targetCrossData)
for (let key in indexes) {
if(targetCrossData[key]){
xData = targetCrossData[key].map(item => {
return item.time
})
seriesData.push(
{
smooth: true,
symbol:'none',
name: indexes[key],
type: 'line',
data: targetCrossData[key].map(item => {
return item.value
}),
yAxisIndex: indexes[key].includes('率') ? 1 : 0
}
)
}
}
}
return {
tooltip: {
trigger: 'axis'
},
legend: {
type: "scroll",
show: true,
right: 0,
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
grid: {
top: 30,
left: 0,
right: 0,
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
},
yAxis: [{
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}, {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
}
}],
series: seriesData
};
},
leftPieOption(){
let currentTotal = 0
for (let item of this.pieData) {
currentTotal += item.value
}
let except = 24 * 60 * 60 - currentTotal
let colors = this.pieData.map(item => {
return item.color
})
colors.push('#00933a')
this.pieData.push({nameVal: 1, value: except, includes: [], name: this.legendMap[1]})
return {
color: colors,
tooltip: {
confine: true,
trigger: 'item',
enterable: true,
formatter: (params) => {
let back = "";
back = `${params.data.name}时段${params.data.includes.length ? '：' : ''}</br>`;
for (let item of params.data.includes) {
back += `${item}</br>`;
}
// '<div style="max-height:180px;overflow-y:auto">' +
return '<div>' + back + "</div>";
}
},
legend: {
show: false,
bottom: '5%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
itemStyle: {
borderRadius: 4,
borderColor: 'transparent',
borderWidth: 2
},
name: '',
type: 'pie',
center: ['50%', '50%'],
radius: ['45%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.pieData
}
]
};
},
// 当前场景 计算逻辑为： 若当前时段包含前面饼图中的溢出时段 则当前场景为溢出
// 若不包含溢出 则检测是否包含拥堵 若包含拥堵 则当前场景为拥堵
// 都不是 则当前场景为畅通
......@@ -560,7 +698,6 @@ export default {
return a
}, [])
this.pieData = pieData
this.refreshPie(pieData)
} else {
this.schemeOption = [{
timeSpan: '00:00-05:00',
......@@ -599,86 +736,10 @@ export default {
return a
}, [])
this.pieData = pieData
this.refreshPie(pieData)
// this.$message.warning('选中干线当前时间无绿波数据！')
}
}
});
},
refreshPie(pieData) {
let currentTotal = 0
for (let item of pieData) {
currentTotal += item.value
}
let except = 24 * 60 * 60 - currentTotal
let colors = pieData.map(item => {
return item.color
})
colors.push('#00933a')
pieData.push({nameVal: 1, value: except, includes: [], name: this.legendMap[1]})
let chartDom = document.getElementById('pie1');
if (!this.charts['pie1']) {
this.charts['pie1'] = echarts.init(chartDom);
}
let option = {
color: colors,
tooltip: {
confine: true,
trigger: 'item',
enterable: true,
formatter: (params) => {
let back = "";
back = `${params.data.name}时段${params.data.includes.length ? '：' : ''}</br>`;
for (let item of params.data.includes) {
back += `${item}</br>`;
}
// '<div style="max-height:180px;overflow-y:auto">' +
return '<div>' + back + "</div>";
}
},
legend: {
show: false,
bottom: '5%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
itemStyle: {
borderRadius: 4,
borderColor: 'transparent',
borderWidth: 2
},
name: '',
type: 'pie',
center: ['50%', '50%'],
radius: ['45%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: pieData
}
]
};
this.charts['pie1'].setOption(option, {notMerge: true});
},
// async getData() {
// },
async getMiddleData() {
this.schemeEvaluationLoading = true
let [res, resCompare] = await Promise.all([
......@@ -708,91 +769,14 @@ export default {
}
this.middleRes1 = res.data.content
this.middleRes2 = resCompare.data.content
this.$nextTick(() => {
this.$refs.lineChart.getChart()
})
this.crossDistanceKey += 1;
this.oneLineChartKey += 1;
this.detailShow = true;
},
// 根据选择路口 绘制对应路口三个指标的折线图 id line1
async crossClick(crossName) {
this.rightClickCrossName = crossName
await this.getRightData()
if (this.rightRes && this.rightRes.length) {
let chartDom = document.getElementById('line1');
if (!this.charts['line1']) {
this.charts['line1'] = echarts.init(chartDom);
}
let targetCrossData = this.rightRes.find(item => {
return item.crossName === crossName
})
let indexes = {
queueList: '非协调排队长度',
stopTimesList: '非协调停车次数',
twoStopRateList: '非协调二次停车率(%)'
}
let seriesData = []
let xData
for (let key in indexes) {
xData = targetCrossData[key].map(item => {
return item.time
})
seriesData.push(
{
smooth: true,
symbol:'none',
name: indexes[key],
type: 'line',
data: targetCrossData[key].map(item => {
return item.value
}),
yAxisIndex: indexes[key].includes('率') ? 1 : 0
}
)
}
let option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true,
right: 0,
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
grid: {
top: 30,
left: 0,
right: 0,
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
},
yAxis: [{
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}, {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
}
}],
series: seriesData
};
this.charts['line1'].setOption(option, {notMerge: true});
}
},
async getRightData() {
this.crossEvaluationLoading = true
......@@ -832,7 +816,16 @@ export default {
},
};
</script>
<style>
.custom-form-label{
font-size: 14px;
width: 70px;
text-align: right;
}
.custom-form-input{
width: 150px
}
</style>
<style lang="less" scoped>
::v-deep .el-range-separator{
color: white;
......@@ -900,6 +893,7 @@ export default {
align-items: center;
.legendItem{
height: 30px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
......@@ -939,23 +933,6 @@ export default {
flex: 1;
background-color: #0e2b4c;
position: relative;
//.liner-border{
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translateX(-50%) translateY(-50%);
// aspect-ratio: 1;
// height: 90%;
// padding: 1px;
// border-radius: 50%;
// background-image: linear-gradient(180deg, rgba(94, 187, 206, 0.20), rgba(151, 223, 233, 1), rgba(94, 187, 206, 0.20));
// .border-inner{
// width:100%;
// height:100%;
// border-radius:50%;
// background:#0a1d2e;
// }
//}
}
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue
View file @ 5b912e2f
......@@ -11,11 +11,11 @@
<div class="content-container" style="flex: 1;display: flex;flex-direction: column">
<div class="forms" style="display: flex;">
<div class="select-box">
<label>路口名称：</label>
<label class="custom-form-label">路口名称：</label>
<el-select
v-model="crossModel"
placeholder="请选择路口"
style="width: 200px;"
class="custom-form-input"
@change="initLineData"
>
<el-option
......@@ -26,9 +26,9 @@
>
</el-option>
</el-select>
<label style="margin-left: 10px;">范围：</label>
<label class="custom-form-label">范围：</label>
<el-select
style="width: 100px;"
class="custom-form-input"
v-model="scopeModel"
placeholder="请选择"
@change="scopeChange"
......@@ -59,7 +59,7 @@
</el-select>
</div>
<div class="select-box">
<label>时间粒度：</label>
<label class="custom-form-label">时间粒度：</label>
<el-select
v-model="timeModel"
placeholder="请选择"
......@@ -75,7 +75,7 @@
</el-select>
</div>
<div class="select-box">
<label>指标选择：</label>
<label class="custom-form-label">指标选择：</label>
<el-select
v-model="indexModel"
placeholder="请选择"
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/oneLineChart.vue
View file @ 5b912e2f
<template>
<div id="one-line-chart" ref="chartLine"></div>
<v-chart class="chart" autoresize :option="chartLineOption"/>
</template>
<script>
......@@ -15,15 +15,16 @@ export default {
};
},
mounted() {
// if (this.data1 && this.data2) {
// this.getChart();
// }
},
computed: {},
props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
methods: {
getChart() {
let [cur, com] = [this.data1, this.data2]
computed: {
chartLineOption(){
let [cur, com] = [[],[]]
if(this.data1?.length){
cur = this.data1
}
if(this.data2?.length){
com = this.data2
}
const xData = cur.map((item) => item.metricTime);
const xData1 = com.map((item) => item.metricTime);
let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
......@@ -67,15 +68,13 @@ export default {
boundaryGap: false,
data: xData,
}
let myChart = echarts.init(this.$refs.chartLine);
let option = {
return {
legend:{
show: true,
icon:'circle',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
backgroundColor: "transparent",
tooltip: {
......@@ -119,17 +118,13 @@ export default {
},
],
series: series,
};
myChart.setOption(option, true);
watchChartWc = new ResizeObserver(() => {
myChart.resize()
})
watchChartWc.observe(document.getElementById('one-line-chart'))
}
}
},
props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
methods: {
},
beforeDestroy() {
watchChartWc?.unobserve(document.getElementById('one-line-chart'))
}
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment