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() { mounted() {
this.drawBar(this.typeValue); // this.drawBar(this.typeValue);
}, },
watch: { watch: {
typeValue: {
handler(newVal) {
if (newVal) {
this.drawBar(newVal);
}
},
deep: true
}
} }
}; };
</script> </script>

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

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