chengdandan
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

l 3.23

This commit is contained in:
luoshiwen 2023-03-23 09:39:23 +08:00
parent 08f785f516
commit ce9ceef392
8 changed files with 245 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
node_modules/.cache/babel-loader/38a81765587b92b8951c5b0d5de100c5.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/b64202a54e54c7430718d949a298daf9.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/e945cb0760ea78a2bfad855462b52cb2.json generated vendored
View File

File diff suppressed because one or more lines are too long

11
src/components/chart/avgChart.vue
View File

@ -212,17 +212,10 @@ export default {
}
},
mounted() {
this.drawBar(this.typeValue);
// this.drawBar(this.typeValue);
},
watch: {
typeValue: {
handler(newVal) {
if (newVal) {
this.drawBar(newVal);
}
},
deep: true
}
}
};
</script>

470
src/components/target/typeChart.vue
View File

@ -1,233 +1,237 @@
<template>
<!-- 触发类型 -->
<div class="setion">
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
<!-- 触发数据数值渲染 -->
<div class="typeContent">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in newDataArr[0].type_data" :key="i"
style="width: 150px; margin-bottom: 20px; text-align: center">
<div>
<span style="font-size: 15px;">{{ n.name }}</span><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</el-card>
</div>
</div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }}
</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].speed }}</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].flow }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].headway }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ queue }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px;">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].n_stay }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px;">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].ave_delay }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
</el-card>
</div>
<div v-show="echartArr.includes('表格')">
<div class="tableTitle" v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
triggerType }}</span>
</div>
<div class="tableTime">
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="newDataArr" :triggerType="triggerType" />
</div>
<div v-if="pageType == '区域'">
<regionTable :msg="newDataArr" :triggerType="triggerType" />
</div>
</div>
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
</div>
<div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" />
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
<avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
:list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
</div>
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" />
</div>
<div class="border" v-if="echartArr.includes('矩阵图')">
<detailDialog />
<thermalChart :componentName="componentName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" />
</div>
</div>
</template>
<script>
import avgChart from '../chart/avgChart.vue';
import lineChart from '../chart/lineChart.vue';
import barChart from '../chart/barChart.vue';
import tableShow from '../chart/tableShow.vue';
import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue';
export default {
name: 'typeChart', //类型组件
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
components: {
lineChart,
barChart,
tableShow,
detailDialog,
regionTable,
pieChart,
avgChart,
thermalChart
},
data() {
return {
// 类型数值
total: 0,
// 速度数值
speed: 0,
// 流量数值
flow: 0,
isRefer: true,
valueShow: {},
//排队数
queue: '',
newDataArr: []
};
},
created() {
},
methods: {
// 计算类型数量的总和
getDataArr(val) {
this.newDataArr = val
this.getNewQueue(this.newDataArr)
},
getTotal(dataArr) {
if (this.title == '类型') {
return dataArr[0].type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
}, 0);
}
},
// 计算类型的数值
getNewQueue(val) {
if (val[0].n_queue) {
this.queue = val[0].n_queue;
} else if (val[0].ave_queue) {
this.queue = val[0].ave_queue;
} else if (val[0].headway) {
this.newDataArr[0].headway = val[0].headway;
} else if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway;
}else if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay;
} else if (val[0].ave_stay) {
this.newDataArr[0].n_stay = val[0].ave_stay;
}
},
},
computed: {
// 获取类型的总数量
},
mounted() { },
watch: {
// 监听触发数据
// dataArr: {
// handler(newVal) {
// // console.log('dataArr', newVal);
// if (newVal != undefined && newVal.length != 0) {
// this.getNewQueue(newVal);
// }
// },
// immediate: true
// }
// typeValue:{
// handler(newVal) {
// // console.log('dataArr', newVal);
// },
// immediate: true
// }
}
};
</script>
<style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
.typeContent {
box-sizing: border-box;
}
.border {
width: 100%;
margin-bottom: 20px;
position: relative;
}
</style>
<template>
<!-- 触发类型 -->
<div class="setion">
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
<!-- 触发数据数值渲染 -->
<div class="typeContent">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in newDataArr[0].type_data" :key="i"
style="width: 150px; margin-bottom: 20px; text-align: center">
<div>
<span style="font-size: 15px;">{{ n.name }}</span><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</el-card>
</div>
</div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }}
</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].speed }}</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].flow }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].headway }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ queue }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px;">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].n_stay }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px;">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].ave_delay }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
</el-card>
</div>
<div v-show="echartArr.includes('表格')">
<div class="tableTitle" v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
triggerType }}</span>
</div>
<div class="tableTime">
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="newDataArr" :triggerType="triggerType" />
</div>
<div v-if="pageType == '区域'">
<regionTable :msg="newDataArr" :triggerType="triggerType" />
</div>
</div>
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
</div>
<div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" />
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
<avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
:list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
</div>
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" />
</div>
<div class="border" v-if="echartArr.includes('矩阵图')">
<detailDialog />
<thermalChart :componentName="componentName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" />
</div>
</div>
</template>
<script>
import avgChart from '../chart/avgChart.vue';
import lineChart from '../chart/lineChart.vue';
import barChart from '../chart/barChart.vue';
import tableShow from '../chart/tableShow.vue';
import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue';
export default {
name: 'typeChart', //类型组件
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
components: {
lineChart,
barChart,
tableShow,
detailDialog,
regionTable,
pieChart,
avgChart,
thermalChart
},
data() {
return {
// 类型数值
total: 0,
// 速度数值
speed: 0,
// 流量数值
flow: 0,
isRefer: true,
valueShow: {},
//排队数
queue: '',
newDataArr: []
};
},
created() {
},
methods: {
// 计算类型数量的总和
getDataArr(val) {
this.newDataArr = val
this.getNewQueue(this.newDataArr)
},
getTotal(dataArr) {
if (this.title == '类型') {
return dataArr[0].type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
}, 0);
}
},
getNewQueue(val) {
if (val[0].n_queue) {
this.queue = val[0].n_queue;
}
if (val[0].ave_queue) {
this.queue = val[0].ave_queue;
}
if (val[0].headway) {
this.newDataArr[0].headway = val[0].headway;
}
if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway;
}
if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay;
}
if (val[0].ave_stay) {
this.newDataArr[0].n_stay = val[0].ave_stay;
}
},
},
computed: {
// 获取类型的总数量
},
mounted() { },
watch: {
// 监听触发数据
// dataArr: {
// handler(newVal) {
// // console.log('dataArr', newVal);
// if (newVal != undefined && newVal.length != 0) {
// this.getNewQueue(newVal);
// }
// },
// immediate: true
// }
// typeValue:{
// handler(newVal) {
// // console.log('dataArr', newVal);
// },
// immediate: true
// }
}
};
</script>
<style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
.typeContent {
box-sizing: border-box;
}
.border {
width: 100%;
margin-bottom: 20px;
position: relative;
}
</style>

1
src/views/bounced/dataBoard.vue
View File

@ -508,6 +508,7 @@ export default {
if (itemTypeChart.componentName.includes('OD') && itemTypeChart.$refs.ODChartRef != undefined && itemTypeChart.dataArr[0].ob_data.length != 0) {
itemTypeChart.$refs.ODChartRef.drawThermalChart(itemTypeChart.dataArr[0].ob_data, itemTypeChart.startEndData)
}
}
}