From 54e610af2e12bbc70a80d8c49e1fa6bbc7f11177 Mon Sep 17 00:00:00 2001
From: qiudan <1044775178@qq.com>
Date: Tue, 28 Nov 2023 18:27:00 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 3 +-
src/components/newchart/avgChart.vue | 254 +++++
src/components/newchart/barChart.vue | 162 +++
src/components/newchart/detailDialog.vue | 125 +++
src/components/newchart/lineChart.vue | 451 +++++++++
src/components/newchart/pieChart.vue | 178 ++++
src/components/newchart/regionTable.vue | 276 +++++
src/components/newchart/tableShow.vue | 312 ++++++
src/components/newchart/thermalChart.vue | 217 ++++
src/components/sensorFusion/echartsPie.vue | 4 +-
src/components/sensorFusion/meanValue.vue | 187 ++--
src/components/target/newtypeChart.vue | 404 ++++++++
src/views/bounced/dataBoard-old.vue | 1049 ++++++++++++++++++++
src/views/bounced/dataBoard.vue | 815 +++------------
src/views/sensorFusion/index.vue | 313 +-----
15 files changed, 3684 insertions(+), 1066 deletions(-)
create mode 100644 src/components/newchart/avgChart.vue
create mode 100644 src/components/newchart/barChart.vue
create mode 100644 src/components/newchart/detailDialog.vue
create mode 100644 src/components/newchart/lineChart.vue
create mode 100644 src/components/newchart/pieChart.vue
create mode 100644 src/components/newchart/regionTable.vue
create mode 100644 src/components/newchart/tableShow.vue
create mode 100644 src/components/newchart/thermalChart.vue
create mode 100644 src/components/target/newtypeChart.vue
create mode 100644 src/views/bounced/dataBoard-old.vue
diff --git a/package.json b/package.json
index 595b301..00323a6 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,8 @@
"vue-router": "^3.0.3",
"vue-schart": "^2.0.0",
"vuedraggable": "^2.17.0",
- "vuex": "^3.6.2"
+ "vuex": "^3.6.2",
+ "lodash": "^4.17.15"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.9.0",
diff --git a/src/components/newchart/avgChart.vue b/src/components/newchart/avgChart.vue
new file mode 100644
index 0000000..c2fb5d2
--- /dev/null
+++ b/src/components/newchart/avgChart.vue
@@ -0,0 +1,254 @@
+<template>
+ <!-- 均值图 -->
+ <div style="width: 100%; margin-top: 5px">
+ <div class="tableTitle">
+ <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">{{ componentName + '-' + chartName + '-' + '均值图' + '-' + status }}</span>
+ </div>
+ </div>
+ <div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'barChart', //均值图图组件
+ props: {
+ list: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ typeValue: {
+ type: Object
+ },
+ // 组件名称
+ componentName: {
+ type: String
+ },
+ chartName: {
+ type: String
+ },
+ status: {
+ type: String
+ }
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ drawBar(arr) {
+ // console.log("均值图",arr)
+ if (arr && Object.keys(arr).length > 0) {
+ arr.avg = arr.avg ? Math.abs(arr.avg) : 0;
+ arr.med = arr.med ? Math.abs(arr.med) : 0;
+ arr.max = arr.max ? Math.abs(arr.max) : 0;
+ arr.min = arr.min ? Math.abs(arr.min) : 0;
+ }
+ let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
+ if (myChart == null) {
+ myChart = this.$echarts.init(this.$refs.barChart);
+ }
+ let chartData = [{ stage: '', number: 40 }];
+ let option = {
+ tooltip: {},
+ color: ['#0EECE4'],
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '10%',
+ top: '15%',
+ z: 22
+ },
+ xAxis: [
+ {
+ type: 'category',
+ gridIndex: 0,
+ data: chartData.map((item) => item.stage),
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ }
+ ],
+ yAxis: {
+ type: 'value',
+
+ splitArea: { show: false },
+ gridIndex: 0,
+ min: 0,
+ splitNumber: 12,
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ max: 200
+ },
+ series: [
+ {
+ name: '外框',
+ type: 'bar',
+ barGap: '-120%', // 设置外框粗细
+ data: [300],
+ barWidth: 150,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,.1)', // 填充色
+ barBorderWidth: 1, // 边框宽度
+ label: {
+ // 标签显示位置
+ show: false
+ }
+ }
+ },
+ z: 1
+ },
+ {
+ name: '平均值',
+ type: 'bar',
+ stack: 'val',
+ barWidth: 150,
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ label: {
+ show: true,
+ position: 'right',
+ // offset: [10, 20],
+ distance: 15,
+ color: '#000',
+ fontSize: 17,
+ formatter: '{c}' + '[avg]'
+ },
+ itemStyle: {
+ color: '#89c6ff'
+ },
+ data: [arr.avg],
+ zlevel: 9
+ },
+ {
+ name: '中间值',
+ type: 'bar',
+ barWidth: 150,
+ stack: 'val',
+ label: {
+ show: true,
+ position: 'left',
+ distance: 15,
+ color: '#000',
+ fontSize: 17,
+ formatter: '{c}' + '[med]',
+ rich: {}
+ },
+ itemStyle: {
+ color: '#67b4fd'
+ },
+ data: [arr.med],
+ zlevel: 9
+ },
+
+ {
+ name: '最大值',
+ type: 'bar',
+ stack: 'val',
+ barWidth: 150,
+ barGap: '-100%',
+ data: [arr.max],
+ label: {
+ show: true,
+ position: 'right',
+ distance: 10,
+ color: '#000',
+ fontSize: 17,
+ offset: [0, -30],
+ formatter: '{c}' + '[max]'
+ },
+ itemStyle: {
+ color: '#319cff'
+ },
+ zlevel: 9
+ },
+ {
+ name: '最小值',
+ type: 'bar',
+ stack: 'val',
+ barWidth: 150,
+ barGap: '-100%',
+ data: [arr.min],
+ label: {
+ offset: [10, 20],
+ show: true,
+ position: 'left',
+ distance: 10,
+ color: '#000',
+ offset: [0, -30],
+ fontSize: 17,
+ formatter: '{c}' + '[min]'
+ },
+ // tooltip: {
+ // backgroundColor: 'transparent',
+ // formatter: ' '
+ // },
+ itemStyle: {
+ color: '#328adc'
+ },
+ zlevel: 9
+ }
+ ]
+ };
+ myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart.resize();
+ });
+ // this.$nextTick(() => {
+ // myChart.setOption(option)
+ // myChart.resize();
+ // })
+ }
+ },
+ mounted() {
+ // this.drawBar(this.typeValue);
+ },
+ watch: {
+ list: {
+ handler: function (newval, oldVal) {
+ if (newval && newval.length > 0) {
+ this.$nextTick(() => {
+ this.drawBar(newval[0]);
+ });
+ }
+ },
+ deep: true
+ // immediate: true
+ }
+ }
+};
+</script>
+<style>
+.tableTitle {
+ background: #f7f8fa;
+ margin-bottom: 5px;
+ padding: 8px;
+}
+</style>
diff --git a/src/components/newchart/barChart.vue b/src/components/newchart/barChart.vue
new file mode 100644
index 0000000..19a9908
--- /dev/null
+++ b/src/components/newchart/barChart.vue
@@ -0,0 +1,162 @@
+<template>
+ <div style="width: 100%; margin-top: 5px">
+ <div class="tableTitle">
+ <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">{{ componentName + '-' + chartName + '-' + '柱状图' + '-' + status }}</span>
+ </div>
+ </div>
+ <div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
+ </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+ name: 'barChart', //饼图组件
+ props: {
+ list: Array,
+ default() {
+ return [];
+ },
+ pageType: {
+ type: String
+ },
+ title: {
+ type: String
+ },
+ status: {
+ type: String
+ },
+ componentName: {
+ type: String
+ },
+ chartName: {
+ type: String
+ },
+ typeValue: {
+ type: Object
+ }
+ },
+ data() {
+ return {};
+ },
+ created() {},
+ methods: {
+ drawBar(newVal) {
+ if (newVal && newVal.type_data && newVal.type_data.length > 0) {
+ var xData = newVal.type_data.map((ele) => {
+ return getNameFromTargetType(ele.name);
+ });
+ var yData = newVal.type_data.map((ele) => {
+ return ele.quantity;
+ });
+ }
+ let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
+ if (myChart == null) {
+ myChart = this.$echarts.init(this.$refs.barChart);
+ }
+ let option = {
+ color: ['#7262FD', '#FC5A5A'],
+ tooltip: {
+ confine: true
+ },
+ grid: {
+ left: '5%',
+ right: '5%',
+ bottom: '0%',
+ top: '5%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ axisLine: {
+ lineStyle: {
+ color: '#000'
+ }
+ },
+ axisLabel: {
+ interval: 0,
+ fontSize: 12,
+ color: '#000',
+ rotate: 30
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ yAxis: [
+ {
+ type: 'value',
+ min: 0,
+ minInterval: 1,
+ splitArea: {
+ show: false
+ },
+
+ axisLine: {
+ show: true
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#eeebeb',
+ type: 'dashed' // dotted 虚线
+ }
+ },
+ axisLabel: {
+ fontSize: 12,
+ color: '#000',
+ fontFamily: 'Bebas'
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ barWidth: 20,
+ itemStyle: { barBorderRadius: [5, 5, 0, 0] },
+ name: '时间',
+ data: yData
+ }
+ ]
+ };
+ myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart.resize();
+ });
+ // this.$nextTick(() => {
+ // myChart.setOption(option)
+ // myChart.resize();
+ // })
+ }
+ },
+ mounted() {},
+ watch: {
+ list: {
+ handler: function (newval, oldVal) {
+ if (newval && newval.length > 0) {
+ this.$nextTick(() => {
+ this.drawBar(newval[0]);
+ });
+ }
+ },
+ deep: true
+ // immediate: true
+ }
+ }
+};
+</script>
diff --git a/src/components/newchart/detailDialog.vue b/src/components/newchart/detailDialog.vue
new file mode 100644
index 0000000..67e84f8
--- /dev/null
+++ b/src/components/newchart/detailDialog.vue
@@ -0,0 +1,125 @@
+<template>
+ <div>
+ <!-- <div class="down">
+ <el-dropdown trigger="click" @command="handleCommand">
+ <span class="moreIcon"></span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="show">查看详情</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div> -->
+ <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
+ <el-form label-width="80px">
+ <el-form-item label="val1">
+ <el-time-select
+ placeholder="起始时间"
+ v-model="startTime"
+ :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+ >
+ </el-time-select>
+ <el-time-select
+ placeholder="结束时间"
+ v-model="endTime"
+ :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
+ >
+ </el-time-select>
+ </el-form-item>
+ <el-form-item label="val2">
+ <el-select v-model="value" placeholder="请选择">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="val3">
+ <el-input></el-input>
+ </el-form-item>
+ <el-form-item label="val4">
+ <el-checkbox-group v-model="checkList">
+ <el-checkbox label="数值"></el-checkbox>
+ <el-checkbox label="表格"></el-checkbox>
+ <el-checkbox label="时间曲线图"></el-checkbox>
+ <el-checkbox label="均值图"></el-checkbox>
+ </el-checkbox-group>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="onSubmit">确认</el-button>
+ <el-button @click="dialogVisible = false">取消</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'detailDialog', //速度组件
+ props: {},
+ data() {
+ return {
+ dialogVisible: false,
+ startTime: '',
+ endTime: '',
+ checkList: ['复选框 A'],
+ options: [
+ {
+ value: '选项1',
+ label: '黄金糕'
+ },
+ {
+ value: '选项2',
+ label: '双皮奶'
+ },
+ {
+ value: '选项3',
+ label: '蚵仔煎'
+ },
+ {
+ value: '选项4',
+ label: '龙须面'
+ },
+ {
+ value: '选项5',
+ label: '北京烤鸭'
+ }
+ ],
+ value: ''
+ };
+ },
+ methods: {
+ onSubmit() {},
+ handleCommand(command) {
+ // 用户名下拉菜单选择事件
+ if (command == 'show') {
+ this.dialogVisible = true;
+ }
+ },
+ handleClose(done) {
+ this.$confirm('确认关闭？')
+ .then((_) => {
+ done();
+ })
+ .catch((_) => {});
+ }
+ },
+ mounted() {}
+};
+</script>
+<style scoped>
+.down {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 100;
+}
+.down .moreIcon{
+ width: 5px;
+ height: 18px;
+ background-size: 5px 18px;
+ position: relative;
+ z-index: 100;
+ background-image: url(../../assets/img/more.png);
+ display: block;
+}
+.el-form-item {
+ margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newchart/lineChart.vue b/src/components/newchart/lineChart.vue
new file mode 100644
index 0000000..b0e1d96
--- /dev/null
+++ b/src/components/newchart/lineChart.vue
@@ -0,0 +1,451 @@
+<template>
+ <div style="width: 100%; margin-top: 5px">
+ <div class="tableTitle">
+ <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.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
+ }}</span>
+ </div>
+ </div>
+ <div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div>
+ </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+ name: 'lineChart', //折线图组件
+ props: {
+ itemData: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ originalDataArr: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ list: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ pageType: {
+ type: String
+ },
+ title: {
+ type: String
+ },
+ // 时间模式
+ status: {
+ type: String
+ },
+ // 组件名称
+ componentName: {
+ type: String
+ },
+ chartName: {
+ type: String
+ },
+ // 单个数据接收
+ typeValue: {
+ type: Object,
+ default() {
+ return {};
+ }
+ }
+ },
+ data() {
+ return {
+ xData: [],
+ yData: [],
+ yData1: [],
+ yData2: [],
+ yData3: [],
+ arrN: [],
+ // series: []
+ // triggerType:'触发时刻'
+ myChart: null,
+ tooltip: {
+ show: true,
+ trigger: 'axis',
+ backgroundColor: 'rgba(1, 13, 19, 0.5)',
+ borderWidth: 1,
+ axisPointer: {
+ type: 'shadow'
+ // label: {
+ // show: true,
+ // },
+ },
+
+ textStyle: {
+ color: 'rgba(212, 232, 254, 1)'
+ // fontSize: fontChart(0.24),
+ },
+ extraCssText: 'z-index:2'
+ },
+ name: 'km/h',
+ series: [],
+
+ //
+ listArr: []
+ };
+ },
+ created() {
+ // console.log(this.componentName + '-' + JSON.stringify(this.itemData));
+ // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
+ },
+
+ methods: {
+ drawLine(newVal, title, timeMode) {
+ // console.log('newVal == ', newVal)
+ let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
+ if (myChart == null) {
+ myChart = this.$echarts.init(this.$refs.lineChart);
+ }
+ // var series = []
+ if (newVal) {
+ this.xData = newVal.map((val) => {
+ return val.time;
+ });
+ }
+
+ // myChart.showLoading() //开启loading
+ let option = {
+ legend: {},
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '10%',
+ top: '20%',
+ containLabel: true
+ },
+ tooltip: this.tooltip,
+ xAxis: [
+ {
+ type: 'category',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#eeebeb',
+ type: 'dashed'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#6c6c6c'
+ },
+ splitLine: {
+ show: false
+ },
+ boundaryGap: ['5%', '5%'],
+
+ data: this.xData.reverse()
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: this.name,
+ axisLabel: {
+ color: '#6c6c6c'
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#eeebeb',
+ type: 'dashed'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: this.getMessage(newVal, title, timeMode)
+ };
+ myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart.resize();
+ });
+ // this.$nextTick(() => {
+ // myChart.setOption(option)
+ // myChart.resize();
+ // })
+ },
+ //传值对应字段返回相应字段数组
+ extractKeyValues(arr, key) {
+ return arr.map((item) => {
+ if (key == 'speed' && item[key]) {
+ return Math.abs(item[key]);
+ }
+ return item[key];
+ });
+ },
+ getMessage(newVal, title, timeMode) {
+ if (newVal) {
+ var series = [
+ {
+ name: '',
+ type: 'line',
+ symbolSize: 6,
+ smooth: true,
+ itemStyle: {
+ color: '#fb864b',
+ borderColor: '#fb864b'
+ // borderWidth: 2
+ },
+ data: []
+ }
+ ];
+
+ if (title === '类型') {
+ this.tooltip = {
+ show: true,
+ confine: true,
+ trigger: 'axis',
+ backgroundColor: 'rgba(1, 13, 19, 0.5)',
+ borderWidth: 1,
+ axisPointer: {
+ type: 'shadow'
+ // label: {
+ // show: true,
+ // },
+ },
+
+ textStyle: {
+ color: 'rgba(212, 232, 254, 1)'
+ // fontSize: fontChart(0.24),
+ },
+ extraCssText: 'z-index:2'
+ };
+ this.name = '';
+ series[0].name = '总量';
+ //获取每种类型数据逻辑有问题
+ // 映射出类型数组
+ // let arr = newVal.map(function (ele) {
+ // if (ele.type_data != null) {
+ // return ele.type_data;
+ // }
+ // });
+ // var mapN = [];
+ // if (arr && arr.length > 0) {
+ // for (var t = 0; t < arr.length; t++) {
+ // if (arr[t] && arr[t].length > 0) {
+ // for (var i = 0; i < arr[t].length; i++) {
+ // mapN.push(arr[t][i]);
+ // }
+ // }
+ // }
+ // }
+ // var lineArr = [];
+ // if (newVal[0].type_data != undefined) {
+ // newVal[0].type_data.forEach((ele) => {
+ // lineArr.push({
+ // name: ele.name,
+ // type: 'line',
+ // data: [],
+ // smooth: true
+ // });
+ // });
+ // }
+ // console.log('newVal', newVal);
+ //获取每种类型数据逻辑有问题
+ // mapN.forEach((ele, index) => {
+
+ // if (lineArr[index] && lineArr[index].data) {
+ // let t = ele.quantity
+ // if(ele.value||ele.value===0){
+ // t = ele.value
+ // }
+ // lineArr[index].data.push(t);
+ // }
+ // });
+ // console.log('lineArr', lineArr);
+ var lineArr = [];
+ let seriesArr = this.extractKeyValues(newVal, 'type_data');
+ if (seriesArr && seriesArr.length > 0) {
+ const firstLevel = seriesArr.find((i) => i && i.length > 0);
+ if (firstLevel && firstLevel.length > 0) {
+ for (let i = 0; i < firstLevel.length; i++) {
+ const item = firstLevel[i];
+ if (item) {
+ const valueList = seriesArr.map((arr) => {
+ if (arr) {
+ let t = arr[i] && arr[i].value;
+ if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
+ t = arr[i].quantity;
+ }
+ return t;
+ }
+ return 0;
+ });
+
+ lineArr.push({
+ name: getNameFromTargetType(item.name),
+ data: valueList,
+ type: 'line',
+ smooth: true
+ });
+ }
+ }
+ }
+ }
+
+ if (lineArr && lineArr.length > 0) {
+ for (let j = 0; j < lineArr.length; j++) {
+ series.push(lineArr[j]);
+ }
+ }
+
+ // 总和数量
+ let mapNR1 = [];
+ newVal.map(function (ele) {
+ if (ele.type_data != null) {
+ let sum = ele.type_data.reduce(function (prev, cur) {
+ let t = cur.quantity;
+ if (cur.value || cur.value === 0) {
+ t = cur.value;
+ }
+ return t + prev;
+ }, 0);
+ mapNR1.push(sum);
+ }
+ });
+ series[0].data = mapNR1;
+ } else if (title === '速度') {
+ let unit = 'km/h';
+ if (this.originalDataArr && this.originalDataArr.length > 0) {
+ if (this.originalDataArr[0].speed >= 0) {
+ unit = 'km/h';
+ } else {
+ unit = 'pix/s';
+ }
+ }
+ this.tooltip = {
+ formatter: `{a} {b}:{c}${unit}`,
+ show: true,
+ confine: true
+ };
+ this.name = unit;
+ // console.log(this.status + '-速度-' + JSON.stringify(newVal));
+ series[0].data = newVal.map((val) => {
+ if (val.speed == -1) {
+ return '-';
+ }
+ return Math.abs(val.speed);
+ });
+ } else if (title === '流量') {
+ this.name = '辆';
+ if (this.status != '实时触发') {
+ this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
+ }
+ series[0].data = newVal.map((ele) => {
+ return ele.in_flow + ele.out_flow;
+ });
+ } else if (title === '车头时距') {
+ this.name = '秒';
+ this.tooltip = {
+ formatter: '{a} {b}:{c}/s',
+ show: true,
+ confine: true
+ };
+ series[0].data = newVal.map((val) => {
+ if (timeMode == '固定间隔') {
+ if (val.ave_headway == -1) {
+ return '-';
+ }
+ return val.ave_headway;
+ } else {
+ return val.headway;
+ }
+ });
+ } else if (title === '排队数') {
+ this.name = '辆';
+ if (this.status != '实时触发') {
+ this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
+ }
+ series[0].data = newVal.map((val) => {
+ // return val.n_queue;
+ if (timeMode == '固定间隔') {
+ return val.ave_queue;
+ } else {
+ return val.n_queue;
+ }
+ });
+ } else if (title === '检测数') {
+ this.name = '辆';
+ if (this.status != '实时触发') {
+ this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
+ }
+ series[0].data = newVal.map((val) => {
+ if (timeMode == '固定间隔') {
+ return val.ave_stay;
+ } else {
+ return val.n_stay;
+ }
+ });
+ } else if (title === '延误') {
+ this.name = '秒';
+ series[0].data = newVal.map((val) => {
+ return val.ave_delay;
+ });
+ } else if (title === '拥堵') {
+ this.name = '秒';
+ series[0].data = newVal.map((val) => {});
+ }
+ series.forEach((ele) => {
+ ele.data.reverse();
+ });
+ return series;
+ }
+ }
+ },
+ mounted() {
+ // if (this.historyData.length != 0) {
+ // this.drawLine(this.historyData, this.title, this.status);
+ // }
+ // this.getMessage(this.list)
+ // console.log(this.$parent.dataArr, '父组件的dataArr');
+ // this.$set(this.$parent.dataArr)
+ },
+ watch: {
+ list: {
+ handler: function (newval, oldVal) {
+ if (newval && newval.length > 0) {
+ this.$nextTick(() => {
+ this.drawLine(newval, this.title, this.status);
+ });
+ }
+ },
+ deep: true
+ // immediate: true
+ }
+ }
+};
+</script>
+<style scoped>
+.tableTitle {
+ background: #f7f8fa;
+ margin-bottom: 5px;
+ padding: 8px;
+}
+</style>
diff --git a/src/components/newchart/pieChart.vue b/src/components/newchart/pieChart.vue
new file mode 100644
index 0000000..f0f100c
--- /dev/null
+++ b/src/components/newchart/pieChart.vue
@@ -0,0 +1,178 @@
+<template>
+ <div style="width: 100%; margin-top: 5px">
+ <div class="tableTitle">
+ <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.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span>
+ </div>
+ </div>
+ <div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
+ </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+ name: 'pieChart', //饼图图组件
+ props: {
+ list: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ componentName: {
+ type: String
+ },
+ chartName: {
+ type: String
+ },
+ typeValue: {
+ type: Object
+ },
+ status: {
+ type: String
+ }
+ },
+ data() {
+ return {};
+ },
+ created() {},
+ methods: {
+ drawPie(newVal) {
+ // var legend = [];
+ var seriesData = [];
+ if (newVal && newVal.type_data && newVal.type_data.length > 0) {
+ // var legend = newVal.type_data.map((ele) => {
+ // return ele.name;
+ // });
+
+ newVal.type_data.forEach((ele) => {
+ // console.log(JSON.stringify(ele))
+ // if (ele.quantity != 0) {
+ seriesData.push({
+ name: getNameFromTargetType(ele.name),
+ value: ele.quantity
+ });
+ // legend.push(ele.name)
+ // }
+ });
+ }
+ let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
+ if (!myChart) {
+ myChart = this.$echarts.init(this.$refs.pieChart);
+ }
+ var color = [
+ '#0CD2E6',
+ '#3751E6',
+ '#FFC722',
+ '#00FFFF',
+ '#00FF80',
+ '#FFEA00',
+ '#FF7300',
+ '#9500B3',
+ '#3377FF',
+ '#5087EC',
+ '#68BBC4',
+ '#58A55C',
+ '#F2BD42',
+ '#EE752F',
+ '#D95040',
+ '#14CAFB'
+ ];
+ let option = {
+ // title: {
+ // show: true,
+ // text: this.componentName + '-' + this.chartName + '-' + '饼状图',
+ // textStyle: {
+ // lineHeight: '30'
+ // }
+ // },
+ color: color,
+ animation: false,
+ legend: {
+ top: 20,
+ right: 10,
+ bottom: 20,
+ orient: 'vertical',
+ textStyle: {}
+ // data: legend
+ },
+ tooltip: {},
+ series: [
+ {
+ type: 'pie',
+ center: ['30%', '55%'],
+ radius: '70%',
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ show: false,
+ length: 0,
+ length2: 0
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'inside',
+ formatter: '{value|{c}}',
+ rich: {
+ value: {
+ fontSize: 20,
+ color: '#ffffff'
+ }
+ }
+ }
+ },
+ data: seriesData
+ }
+ ]
+ };
+
+ myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart.resize();
+ });
+ // this.$nextTick(() => {
+ // myChart.setOption(option)
+ // myChart.resize();
+ // })
+ }
+ },
+ mounted() {},
+ watch: {
+ list: {
+ handler: function (newval, oldVal) {
+ // console.log('pieChart', newval);
+ if (newval && newval.length > 0) {
+ this.$nextTick(() => {
+ this.drawPie(newval[0]);
+ });
+ }
+ },
+ deep: true
+ // immediate: true
+ }
+ }
+};
+</script>
+<style scoped>
+.tableTitle {
+ background: #f7f8fa;
+ margin-bottom: 5px;
+ padding: 8px;
+}
+</style>
diff --git a/src/components/newchart/regionTable.vue b/src/components/newchart/regionTable.vue
new file mode 100644
index 0000000..33d541c
--- /dev/null
+++ b/src/components/newchart/regionTable.vue
@@ -0,0 +1,276 @@
+<template>
+ <!-- 区域的表格 -->
+ <div class="tableContent">
+ <!-- <div class="down">
+ <el-dropdown trigger="click" @command="handleCommand">
+ <span class="moreIcon"></span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="show">查看详情</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div> -->
+
+ <div v-if="msg" class="regionBox">
+ <!-- 实时触发 -->
+ <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
+ <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
+ <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
+ <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
+ <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+ <el-table-column align="center" label="目标类型" prop="type">
+ <template slot-scope="scope">
+ {{getNameFromTargetType(scope.row.type)}}
+ </template>
+ <!-- <template slot-scope="scope">
+ <span v-if="scope.row.type == 'Person'">行人</span>
+ <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+ </template> -->
+ </el-table-column>
+ <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+ <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+ <el-table-column align="center" prop="occ" label="占用状态">
+ <template slot-scope="scope">
+ <span v-if="scope.row.occ == '1'">占用</span>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="speed" label="空间平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+ ? Math.abs(scope.row.speed)
+ : scope.row.speed == '-1'
+ ? '-'
+ : scope.row.speed
+ }}
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
+ <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
+ <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
+ <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
+ <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+ <el-table-column align="center" label="目标类型" prop="type">
+ <template slot-scope="scope">
+ {{getNameFromTargetType(scope.row.type)}}
+ </template>
+ <!-- <template slot-scope="scope">
+ <span v-if="scope.row.type == 'Person'">行人</span>
+ <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+ </template> -->
+ </el-table-column>
+ <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+ <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+ <el-table-column align="center" prop="occ" label="占用状态">
+ <template slot-scope="scope">
+ <span v-if="scope.row.occ == '1'">占用</span>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="speed" label="空间平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+ ? Math.abs(scope.row.speed)
+ : scope.row.speed == '-1'
+ ? '-'
+ : scope.row.speed
+ }}
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 固定间隔 -->
+ <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
+ <!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
+ <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
+ <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+ <el-table-column align="center" label="目标类型" prop="type">
+ <template slot-scope="scope">
+ {{getNameFromTargetType(scope.row.type)}}
+ </template>
+ <!-- <template slot-scope="scope">
+ <span v-if="scope.row.type == 'Person'">行人</span>
+ <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+ </template> -->
+ </el-table-column>
+ <el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>
+ <el-table-column align="center" prop="out_flow" label="驶离流量"></el-table-column>
+ <el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
+ <el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
+ <el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
+ <el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
+ <el-table-column align="center" prop="speed" label="平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+ ? Math.abs(scope.row.speed)
+ : scope.row.speed == '-1'
+ ? '-'
+ : scope.row.speed
+ }}
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
+ <el-form :model="msg" label-width="80px">
+ <el-form-item label="val1">
+ <el-time-select
+ placeholder="起始时间"
+ v-model="startTime"
+ :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+ >
+ </el-time-select>
+ <el-time-select
+ placeholder="结束时间"
+ v-model="endTime"
+ :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
+ >
+ </el-time-select>
+ </el-form-item>
+ <el-form-item label="val2">
+ <el-select>
+ <el-option> </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="val3">
+ <el-input v-model="dialogVisible"></el-input>
+ </el-form-item>
+ <el-form-item label="val4">
+ <el-checkbox-group v-model="checkList">
+ <el-checkbox label="数值"></el-checkbox>
+ <el-checkbox label="表格"></el-checkbox>
+ <el-checkbox label="时间曲线图"></el-checkbox>
+ <el-checkbox label="均值图"></el-checkbox>
+ </el-checkbox-group>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary">确认</el-button>
+ <el-button @click="dialogVisible = false">取消</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+import tableShow from './tableShow.vue';
+export default {
+ components: { tableShow },
+ name: 'tableShow', //表格组件
+ props: {
+ msg: {
+ type: Array
+ // default() {
+ // return [];
+ // }
+ },
+ triggerType: {
+ type: String
+ }
+ },
+ data() {
+ return {
+ getNameFromTargetType,
+ dialogVisible: false,
+ startTime: '',
+ endTime: '',
+ checkList: ['复选框 A']
+ };
+ },
+ methods: {
+ handleCommand(command) {
+ // 用户名下拉菜单选择事件
+ if (command == 'show') {
+ this.dialogVisible = true;
+ }
+ }
+ },
+ mounted() {
+ // console.log(this.type,'129129');
+ },
+ watch: {
+ msg: {
+ handler(newVal) {
+ // console.log(newVal,'流量数据table');
+ }
+ }
+ }
+};
+</script>
+<style scoped lang="scss">
+/deep/ .el-table {
+ // height: 709px !important;
+ // overflow-y: scroll;
+ z-index: 900;
+}
+.el-table::-webkit-scrollbar {
+ width: 0 !important;
+}
+.tableContent {
+ position: relative;
+}
+
+.down {
+ position: absolute;
+ top: -35px;
+ right: 5px;
+ z-index: 100;
+}
+
+.down .moreIcon {
+ width: 5px;
+ height: 18px;
+ background-size: 5px 18px;
+ background-image: url(../../assets/img/more.png);
+ display: block;
+}
+
+.el-form-item {
+ margin-bottom: 20px;
+}
+
+.tableContent {
+ border: 1px solid #e4e7ed;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newchart/tableShow.vue b/src/components/newchart/tableShow.vue
new file mode 100644
index 0000000..66a6a40
--- /dev/null
+++ b/src/components/newchart/tableShow.vue
@@ -0,0 +1,312 @@
+<template>
+ <!-- 断面的表格 -->
+ <div class="tableContent">
+ <!-- <div class="down">
+ <el-dropdown trigger="click" @command="handleCommand">
+ <span class="moreIcon"></span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="show">查看详情</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div> -->
+ <!-- 实时触发 -->
+
+ <!-- 实时触发 -->
+ <div v-if="msg && msg.length > 0">
+ <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
+ <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
+ <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
+ <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
+ <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+ <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
+ <el-table-column align="center" label="目标类型" prop="type">
+ <template slot-scope="scope">
+ {{getNameFromTargetType(scope.row.type)}}
+ </template>
+ <!-- <template slot-scope="scope">
+ <span v-if="scope.row.type == 'Person'">行人</span>
+ <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+ </template> -->
+ </el-table-column>
+ <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+ <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+ <el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
+ <el-table-column align="center" prop="speed" label="空间平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+ ? Math.abs(scope.row.speed)
+ : scope.row.speed == '-1'
+ ? '-'
+ : scope.row.speed
+ }}
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
+ <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
+ <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
+ <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
+ <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+ <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
+ <el-table-column align="center" label="目标类型" prop="type">
+ <template slot-scope="scope">
+ {{getNameFromTargetType(scope.row.type)}}
+ </template>
+ <!-- <template slot-scope="scope">
+ <span v-if="scope.row.type == 'Person'">行人</span>
+ <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+ </template> -->
+ </el-table-column>
+ <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+ <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+ <el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
+ <el-table-column align="center" prop="speed" label="空间平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+ ? Math.abs(scope.row.speed)
+ : scope.row.speed == '-1'
+ ? '-'
+ : scope.row.speed
+ }}
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <!-- 固定间隔 -->
+ <el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
+ <el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
+ <el-table-column align="center" prop="name" label="断面名称"></el-table-column>
+ <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+ <el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
+ <el-table-column align="center" prop="type" label="目标类型">
+ <template slot-scope="scope">
+ {{getNameFromTargetType(scope.row.type)}}
+ </template>
+ <!-- <template slot-scope="scope">
+ <span v-if="scope.row.type == 'Person'">行人</span>
+ <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+ <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+ <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+ </template> -->
+ </el-table-column>
+ <el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
+ <el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
+ <el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
+ <el-table-column align="center" prop="in_spd" label="入流平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.in_spd && scope.row.in_spd != '-' && scope.row.speed != '-1'
+ ? Math.abs(scope.row.in_spd)
+ : scope.row.in_spd == '-1'
+ ? '-'
+ : scope.row.in_spd
+ }}
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="out_spd" label="出流平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
+ ? Math.abs(scope.row.out_spd)
+ : scope.row.out_spd == '-1'
+ ? '-'
+ : scope.row.out_spd
+ }}
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="speed" label="断面的平均速度">
+ <template slot-scope="scope">
+ {{
+ scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+ ? Math.abs(scope.row.speed)
+ : scope.row.speed == '-1'
+ ? '-'
+ : scope.row.speed
+ }}
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div v-else>
+ <el-empty :image-size="100"></el-empty>
+ </div>
+ <el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
+ <el-form :model="msg" label-width="80px">
+ <el-form-item label="val1">
+ <el-time-select
+ placeholder="起始时间"
+ v-model="startTime"
+ :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+ >
+ </el-time-select>
+ <el-time-select
+ placeholder="结束时间"
+ v-model="endTime"
+ :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
+ >
+ </el-time-select>
+ </el-form-item>
+ <el-form-item label="val2">
+ <el-select v-model="value" placeholder="请选择">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+ </el-select>
+ </el-form-item>
+ <!-- <el-form-item label="val3">
+ <el-input v-model="msg[0].val3"></el-input>
+ </el-form-item> -->
+ <el-form-item label="val4">
+ <el-checkbox-group v-model="checkList">
+ <el-checkbox label="数值"></el-checkbox>
+ <el-checkbox label="表格"></el-checkbox>
+ <el-checkbox label="时间曲线图"></el-checkbox>
+ <el-checkbox label="均值图"></el-checkbox>
+ </el-checkbox-group>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary">确认</el-button>
+ <el-button @click="dialogVisible = false">取消</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+ name: 'tableShow', //表格组件
+ props: {
+ msg: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ triggerType: {
+ type: String
+ }
+ },
+ data() {
+ return {
+ getNameFromTargetType,
+ dialogVisible: false,
+ startTime: '',
+ endTime: '',
+ checkList: ['复选框 A'],
+ options: [
+ {
+ value: '选项1',
+ label: '黄金糕'
+ },
+ {
+ value: '选项2',
+ label: '双皮奶'
+ },
+ {
+ value: '选项3',
+ label: '蚵仔煎'
+ },
+ {
+ value: '选项4',
+ label: '龙须面'
+ },
+ {
+ value: '选项5',
+ label: '北京烤鸭'
+ }
+ ],
+ value: ''
+ };
+ },
+ watch: {
+ msg: {
+ handler(newVal) {
+ // console.log('断面', newVal);
+ // console.log('断面-triggerType', this.triggerType);
+ }
+ // immediate: true
+ }
+ },
+ methods: {
+ handleCommand(command) {
+ // 用户名下拉菜单选择事件
+ if (command == 'show') {
+ this.dialogVisible = true;
+ }
+ },
+ onSubmit() {},
+ handleClose() {}
+ },
+ mounted() {}
+};
+</script>
+<style scoped lang="scss">
+/deep/ .el-table {
+ // height: 709px !important;
+ // overflow-y: scroll;
+ z-index: 900;
+}
+.el-table::-webkit-scrollbar {
+ width: 0 !important;
+}
+.tableContent {
+ position: relative;
+}
+
+.down {
+ position: absolute;
+ top: -35px;
+ right: 5px;
+ z-index: 100;
+}
+
+.down .moreIcon {
+ width: 5px;
+ height: 18px;
+ background-size: 5px 18px;
+ background-image: url(../../assets/img/more.png);
+ display: block;
+}
+
+.el-form-item {
+ margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newchart/thermalChart.vue b/src/components/newchart/thermalChart.vue
new file mode 100644
index 0000000..0c3c69e
--- /dev/null
+++ b/src/components/newchart/thermalChart.vue
@@ -0,0 +1,217 @@
+<template>
+ <div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
+</template>
+
+<script>
+export default {
+ name: 'thermalChart', //热点图组件
+ data() {
+ return {
+ thermalChartData: []
+ };
+ },
+ created() {},
+ props: {
+ list: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ pageType: {
+ type: String
+ },
+ title: {
+ type: String
+ },
+ startEndData:{
+ type:Object,
+ default() {
+ return {};
+ }
+ }
+ // status: {
+ // type: String
+ // },
+ // componentName: {
+ // type: String
+ // },
+ },
+ methods: {
+ //处理od组件数据
+ ODhanlde(odData) {
+ // console.log(odData,'oddata');
+ // var odData = this.odData
+ var chartData = [];
+ var start = [];
+ if (odData && odData.length > 0) {
+ for (let i = 0; i < odData.length; i++) {
+ let item = odData[i].data;
+ if (item && item.length > 0) {
+ for (let j = 0; j < item.length; j++) {
+ start.push(item[j].start);
+ // 数组去重
+
+ // od图的数据
+ chartData.push([i, j, item[j].quantity]);
+ // console.log([i,j,item[j].val]);
+ }
+ }
+ }
+ }
+ // this.thermalChartData = chartData
+ // console.log(chartData,'处理过后的odssssssssssssss');
+ return chartData;
+ // console.log(chartData, this.unique(start), 'od图的数据');
+ },
+ //数组去重
+ unique(arr) {
+ let newArr = [];
+ arr.forEach((item) => {
+ return newArr.includes(item) ? '' : newArr.push(item);
+ });
+ return newArr;
+ },
+ isObject(variable) {
+ return typeof variable === 'object' && variable !== null && !Array.isArray(variable);
+ },
+ // 绘制热力图
+ drawThermalChart(odData, startEnd) {
+ let startEndStart = [],
+ startEndEnd = [];
+ if (this.isObject(startEnd)) {
+ if (startEnd.start) {
+ startEndStart = startEnd.start.split(',');
+ }
+ if (startEnd.start) {
+ startEndEnd = startEnd.end.split(',');
+ }
+ }
+ let myChart = this.$echarts.init(this.$refs.thermalChart);
+ let option = {
+ dataZoom: [
+ {
+ id: 'dataZoomY',
+ type: 'slider',
+ yAxisIndex: [0],
+ startValue: 0,
+ endValue: 10,
+ filterMode: 'empty'
+ }
+ ],
+ tooltip: {
+ position: 'top'
+ // formatter: function (params) {
+ // return (
+ // "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
+ // );
+ // },
+ },
+ animation: false,
+ grid: {
+ left: '3%',
+ right: '8%',
+ bottom: '8%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: startEndStart,
+ axisLine: {
+ lineStyle: {
+ color: '#000'
+ }
+ },
+ axisLabel: {
+ interval: 0,
+ rotate: 40
+ },
+ splitArea: {
+ show: true
+ }
+ // name: "镇街",
+ },
+ yAxis: {
+ type: 'category',
+ data: startEndEnd,
+ axisLine: {
+ lineStyle: {
+ color: '#000'
+ }
+ },
+ axisLabel: {
+ interval: 0,
+ rotate: 40
+ },
+ splitArea: {
+ show: true
+ }
+ // name: "",
+ },
+ visualMap: {
+ min: 1,
+ max: 50,
+ calculable: true,
+ orient: 'horizontal',
+ left: 'center',
+ bottom: '1%',
+ text: ['50', '1'], // 文本，默认为数值文本
+ //color:['#20a0ff','#D2EDFF'],
+ calculable: false,
+ color: ['#22DDDD', '#fec42c', '#80F1BE']
+ },
+ series: [
+ {
+ name: 'OD图',
+ type: 'heatmap',
+ data: this.ODhanlde(odData),
+ label: {
+ normal: {
+ show: true
+ }
+ },
+ itemStyle: {
+ emphasis: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(120, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ };
+ if (myChart) {
+ myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart.resize();
+ });
+ }
+
+ // this.$nextTick(() => {
+ // myChart.setOption(option)
+ // myChart.resize();
+ // })
+ }
+ },
+ mounted() {
+ this.drawThermalChart()
+ },
+ watch: {
+ list: {
+ handler: function (newval, oldVal) {
+ if (newval && newval.length > 0) {
+ this.$nextTick(() => {
+ this.drawThermalChart(newval[0].ob_data,this.startEndData);
+ });
+ }
+ },
+ deep: true
+ // immediate: true
+ }
+ }
+};
+</script>
+<style scoped>
+.a{
+ color: rgba(120, 0, 0, 0.5);
+}
+</style>
diff --git a/src/components/sensorFusion/echartsPie.vue b/src/components/sensorFusion/echartsPie.vue
index 0ff0b99..19d585c 100644
--- a/src/components/sensorFusion/echartsPie.vue
+++ b/src/components/sensorFusion/echartsPie.vue
@@ -97,10 +97,10 @@ export default {
if(seriesData&&seriesData.length>0){
let temp=[];
seriesData.forEach((ele) => {
- if (ele.value != 0) {
+ // if (ele.value != 0) {
ele.name = getNameFromTargetType(ele.name);
temp.push(ele)
- }
+ // }
})
seriesData = temp
}
diff --git a/src/components/sensorFusion/meanValue.vue b/src/components/sensorFusion/meanValue.vue
index 5fe6169..e77cfce 100644
--- a/src/components/sensorFusion/meanValue.vue
+++ b/src/components/sensorFusion/meanValue.vue
@@ -65,64 +65,71 @@ export default {
},
methods: {
initEcharts() {
- this.max = [];
- this.min = [];
- this.med = [];
- this.avg = [];
- // console.log("均值图",arr)
- // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
- // if (myChart == null) {
- // myChart = this.$echarts.init(this.$refs.barChart);
+ // this.max = [];
+ // this.min = [];
+ // this.med = [];
+ // this.avg = [];
+ // // console.log("均值图",arr)
+ // // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
+ // // if (myChart == null) {
+ // // myChart = this.$echarts.init(this.$refs.barChart);
+ // // }
+ // // this.dataProcessing(this.dataList);
+ // if (this.dataList.length > 10) {
+ // this.dataList = this.dataList.slice(-10);
// }
- // this.dataProcessing(this.dataList);
- if (this.dataList.length > 10) {
- this.dataList = this.dataList.slice(-10);
- }
- for (let i = 0; i < this.dataList.length; i++) {
- if (this.dataList[i].max) {
- this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
- } else {
- this.max.push(0);
- }
+ // for (let i = 0; i < this.dataList.length; i++) {
+ // if (this.dataList[i].max) {
+ // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
+ // } else {
+ // this.max.push(0);
+ // }
- if (this.dataList[i].min) {
- this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
- } else {
- this.min.push(0);
- }
+ // if (this.dataList[i].min) {
+ // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
+ // } else {
+ // this.min.push(0);
+ // }
- if (this.dataList[i].med) {
- this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
- } else {
- this.med.push(0);
- }
+ // if (this.dataList[i].med) {
+ // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
+ // } else {
+ // this.med.push(0);
+ // }
- if (this.dataList[i].avg) {
- this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
- } else {
- this.avg.push(0);
- }
+ // if (this.dataList[i].avg) {
+ // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
+ // } else {
+ // this.avg.push(0);
+ // }
- // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
- // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
- // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
- // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
- }
+ // // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
+ // // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
+ // // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
+ // // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
+ // }
let maxData = '';
let minData = '';
let medData = '';
let avgData = '';
- for (let i = 0; i < this.max.length; i++) {
- maxData = this.max[i];
- }
- for (let i = 0; i < this.min.length; i++) {
- minData = this.min[i];
- }
- for (let i = 0; i < this.med.length; i++) {
- medData = this.med[i];
- }
- for (let i = 0; i < this.avg.length; i++) {
- avgData = this.avg[i];
+ // for (let i = 0; i < this.max.length; i++) {
+ // maxData = this.max[i];
+ // }
+ // for (let i = 0; i < this.min.length; i++) {
+ // minData = this.min[i];
+ // }
+ // for (let i = 0; i < this.med.length; i++) {
+ // medData = this.med[i];
+ // }
+ // for (let i = 0; i < this.avg.length; i++) {
+ // avgData = this.avg[i];
+ // }
+ let arr = this.dataList[0]||{}
+ if (arr && Object.keys(arr).length > 0) {
+ avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
+ medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
+ maxData = arr.max ? Math.abs(arr.max).toFixed(2) : 0;
+ minData = arr.min ? Math.abs(arr.min).toFixed(2) : 0;
}
let myChart = this.chart;
let chartData = [{ stage: '', number: 40 }];
@@ -310,45 +317,51 @@ export default {
}, 300);
},
watch: {
- intersectionName: {
- handler: function (oldValues, newValues) {
- this.$nextTick(() => {
- this.initEcharts();
- });
- }
- },
- chatShowType: {
- handler: function (oldValues, newValues) {
- let that = this;
- setTimeout(() => {
- that.$nextTick(() => {
- this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
- if (this.chart == null) {
- this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
- }
- that.initEcharts();
- });
- }, 300);
- }
- },
- echartsRef: {
- handler: function (oldValues, newValues) {
- console.log('old', oldValues);
- console.log('newV', newValues);
- let that = this;
- setTimeout(() => {
- that.$nextTick(() => {
- this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
- if (this.chart == null) {
- this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
- }
- that.initEcharts();
- });
- }, 300);
- }
- },
+ // intersectionName: {
+ // handler: function (oldValues, newValues) {
+ // this.$nextTick(() => {
+ // this.initEcharts();
+ // });
+ // }
+ // },
+ // chatShowType: {
+ // handler: function (oldValues, newValues) {
+ // let that = this;
+ // setTimeout(() => {
+ // that.$nextTick(() => {
+ // this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+ // if (this.chart == null) {
+ // this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+ // }
+ // that.initEcharts();
+ // });
+ // }, 300);
+ // }
+ // },
+ // echartsRef: {
+ // handler: function (newValues, oldValues) {
+ // console.log('old', oldValues);
+ // console.log('newV', newValues);
+ // let that = this;
+ // setTimeout(() => {
+ // that.$nextTick(() => {
+ // this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+ // if (this.chart == null) {
+ // this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+ // }
+ // that.initEcharts();
+ // });
+ // }, 300);
+ // }
+ // },
dataList: {
- handler: function (oldValues, newValues) {
+ handler: function (newValues, oldValues) {
+ // if(newValues&&newValues.length>0) {
+ // if(newValues[0].name=='gate1'){
+ // console.log('newV', newValues);
+ // }
+ // }
+
this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
diff --git a/src/components/target/newtypeChart.vue b/src/components/target/newtypeChart.vue
new file mode 100644
index 0000000..bebc396
--- /dev/null
+++ b/src/components/target/newtypeChart.vue
@@ -0,0 +1,404 @@
+<template>
+ <!-- 触发类型 -->
+ <div class="setion">
+ <!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
+ <!-- 触发数据数值渲染 -->
+ <div class="typeContent">
+ <div v-if="newDataArr && newDataArr.length > 0">
+ <div v-if="title == '类型'" style="display: flex; flex-wrap: wrap">
+ <el-card
+ v-for="(n, i) in latestDataArr.type_data"
+ :key="i"
+ style="width: 150px; margin-bottom: 20px; text-align: center"
+ >
+ <div>
+ <span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
+ ><br />
+ <span style="font-size: 30px; font-weight: bold">{{
+ n.quantity || n.quantity === 0 ? n.quantity : ' - '
+ }}</span>
+ <span style="font-size: 15px" v-if="n.quantity || n.quantity === 0"> 个</span>
+ </div>
+ <div>
+ <div>
+ {{ latestDataArr.time ? latestDataArr.time : '' }}
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
+ <el-card v-show="echartArr.includes('数值')" class="spacialCard">
+ <div v-if="newDataArr && newDataArr.length > 0">
+ <div v-if="title == '类型'">
+ <span style="font-size: 15px">类型数量总和</span><br />
+ <span style="font-size: 30px; font-weight: bold">
+ {{ getTotal(newDataArr) }}
+ </span>
+ <span style="font-size: 15px">个</span>
+ </div>
+ <div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr && dataArr.length > 0">
+ <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">
+ <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
+ {{ Math.abs(latestDataArr.speed) }}
+ </span>
+ <span v-else> - </span>
+ </span>
+ <span style="font-size: 20px; font-weight: 200">
+ <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
+ {{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }}
+ </span>
+ </span>
+ </div>
+ <div style="font-size: 30px; font-weight: bold" v-if="title == '流量' && dataArr && dataArr.length > 0">
+ <span style="font-size: 15px">流量</span><br />
+ <span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '出流'">{{
+ latestDataArr.out_flow || latestDataArr.out_flow === 0 ? latestDataArr.out_flow : ' - '
+ }}</span>
+ <span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '入流'">{{
+ latestDataArr.in_flow || latestDataArr.in_flow === 0 ? latestDataArr.in_flow : ' - '
+ }}</span>
+ <span style="font-size: 20px; font-weight: 200">辆</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">{{
+ latestDataArr.headway || latestDataArr.headway === 0
+ ? latestDataArr.headway == -1
+ ? ' - '
+ : latestDataArr.headway
+ : ' - '
+ }}</span>
+ <!-- <span style="font-size: 30px; font-weight: bold">100</span> -->
+ <span style="font-size: 20px; font-weight: 200">秒</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">
+ {{
+ latestDataArr.n_queue || latestDataArr.n_queue === 0
+ ? latestDataArr.n_queue == -1
+ ? ' - '
+ : latestDataArr.n_queue
+ : ' - '
+ }}
+ </span>
+ <span style="font-size: 20px; font-weight: 200">辆</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">{{
+ latestDataArr.n_stay || latestDataArr.n_stay === 0 ? latestDataArr.n_stay : ' - '
+ }}</span>
+ <span style="font-size: 20px; font-weight: 200">辆</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">{{
+ latestDataArr.ave_delay || latestDataArr.ave_delay === 0 ? latestDataArr.ave_delay : ' - '
+ }}</span>
+ <span style="font-size: 20px; font-weight: 200">秒</span>
+ </div>
+ <div>
+ <div v-if="latestDataArr.time">
+ <!-- {{ latestDataArr.time ? latestDataArr.time : '' }} -->
+ <div>{{ latestDataArr.time.slice(0, 11) }}</div>
+ <div>{{ latestDataArr.time.slice(11) }}</div>
+ </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">
+ <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="newDataArrAbs" :triggerType="triggerType" />
+ </div>
+ <div v-if="pageType == '区域'">
+ <regionTable :msg="newDataArrAbs" :triggerType="triggerType" />
+ </div>
+ </div>
+ <div class="border" v-if="echartArr.includes('曲线图')">
+ <detailDialog />
+ <lineChart
+ :componentName="componentName"
+ :itemData="itemData"
+ :originalDataArr="newDataArr"
+ :chartName="chartName"
+ :pageType="pageType"
+ :list="newDataArrAbs"
+ :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="newDataArrAbs"
+ :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="newDataArrAbs"
+ :status="triggerType"
+ :title="title"
+ :typeValue="typeValue"
+ />
+ </div>
+ <div class="border" v-if="echartArr.includes('直方图')">
+ <detailDialog />
+ <barChart
+ :componentName="componentName"
+ :chartName="chartName"
+ :pageType="pageType"
+ :list="newDataArrAbs"
+ :status="triggerType"
+ :title="title"
+ :typeValue="typeValue"
+ ref="barChartRef"
+ />
+ </div>
+ <div class="border" v-if="echartArr.includes('矩阵图')">
+ <detailDialog />
+ <thermalChart
+ :componentName="componentName"
+ :pageType="pageType"
+ :list="newDataArrAbs"
+ :status="triggerType"
+ :title="title"
+ :typeValue="typeValue"
+ :startEndData="startEndData"
+ ref="ODChartRef"
+ />
+ </div>
+ </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import avgChart from '../newchart/avgChart.vue';
+import lineChart from '../newchart/lineChart.vue';
+import barChart from '../newchart/barChart.vue';
+import tableShow from '../newchart/tableShow.vue';
+import pieChart from '../newchart/pieChart.vue';
+import detailDialog from '../newchart/detailDialog.vue';
+import regionTable from '../newchart/regionTable.vue';
+import thermalChart from '../newchart/thermalChart.vue';
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+ name: 'typeChart', //类型组件
+ props: [
+ 'typeValue',
+ 'itemData',
+ 'pageType',
+ 'triggerType',
+ 'dataArr',
+ 'cycleAccumulateData',
+ 'echartArr',
+ 'componentName',
+ 'title',
+ 'chartName',
+ 'startEndData'
+ ],
+ components: {
+ lineChart,
+ barChart,
+ tableShow,
+ detailDialog,
+ regionTable,
+ pieChart,
+ avgChart,
+ thermalChart
+ },
+ data() {
+ return {
+ getNameFromTargetType
+ };
+ },
+ created() {},
+ methods: {
+ // 计算类型数量的总和
+ // getDataArr(val) {
+ // this.newDataArr = val;
+ // this.getNewQueue(this.newDataArr);
+ // },
+ getTotal(dataArr) {
+ if (this.title == '类型') {
+ if (dataArr && dataArr.length > 0) {
+ if (dataArr[0].type_data && dataArr[0].type_data.length > 0) {
+ return dataArr[0].type_data.reduce(function (prev, cur) {
+ return cur.quantity + prev;
+ }, 0);
+ }
+ return 0;
+ }
+ return 0;
+ }
+ }
+ },
+
+ computed: {
+ latestDataArr() {
+ //最新一条数据
+ if (this.dataArr && this.dataArr.length > 0) {
+ let latestDataArr = _.cloneDeep(this.dataArr[0]);
+ return latestDataArr;
+ }
+ if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) {
+ let latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
+ return latestDataArr;
+ }
+ return {};
+ },
+ newDataArr() {
+ if (this.dataArr && this.dataArr.length > 0) {
+ let dataArr = _.cloneDeep(this.dataArr);
+ return dataArr;
+ }
+ return [];
+ },
+ // 处理数据图表数据-1需要改成‘-’
+ newDataArrAbs() {
+ // console.log('newDataArrAbs1', this.newDataArr);
+ let arr = [];
+ if (this.newDataArr.length > 0) {
+ let newlist = JSON.parse(JSON.stringify(this.newDataArr));
+ for (const item of newlist) {
+ if (!isNaN(item.speed) && (item.speed !== -1 || item.speed === 0)) {
+ item.speed = Math.abs(item.speed);
+ } else {
+ item.speed = '-';
+ }
+
+ if (!isNaN(item.flow) && (item.headway !== -1 || item.headway === 0)) {
+ item.flow = item.flow;
+ } else {
+ item.flow = '-';
+ }
+
+ if (!isNaN(item.headway) && (item.headway !== -1 || item.headway === 0)) {
+ item.headway = item.headway;
+ } else {
+ item.headway = '-';
+ }
+
+ if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
+ item.n_stay = item.n_stay;
+ } else {
+ item.n_stay = '-';
+ }
+
+ if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
+ item.n_queue = item.n_queue;
+ } else {
+ item.n_queue = '-';
+ }
+ if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
+ item.n_queue = item.ave_queue;
+ } else {
+ item.ave_queue = '-';
+ }
+
+ if (!isNaN(item.ave_delay) && (item.ave_delay !== -1 || item.ave_delay === 0)) {
+ item.ave_delay = item.ave_delay;
+ } else {
+ item.ave_delay = '-';
+ }
+ if (!isNaN(item.in_spd) && (item.in_spd !== -1 || item.in_spd === 0)) {
+ item.in_spd = item.in_spd;
+ } else {
+ item.in_spd = '-';
+ }
+ if (!isNaN(item.out_spd) && (item.out_spd !== -1 || item.out_spd === 0)) {
+ item.out_spd = item.out_spd;
+ } else {
+ item.out_spd = '-';
+ }
+ arr.push(Object.assign({}, item));
+ }
+ }
+ // console.log('triggerType',this.triggerType)
+ // console.log('newDataArrAbs2', arr);
+ return arr;
+ }
+ },
+ mounted() {},
+ watch: {
+ // 监听触发数据
+ // dataArr: {
+ // handler(newVal) {
+ // console.log('newtypeChart', newVal);
+ // // if (newVal &&newVal.length >0) {
+ // // this.getNewQueue(newVal);
+ // // }
+ // },
+ // immediate: true,
+ // deep:true,
+ // }
+ }
+};
+</script>
+<style scoped>
+.spacialCard {
+ width: 150px;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+::v-deep.spacialCard .el-card__body {
+ padding: 10px;
+}
+
+.tableTitle {
+ background: #f7f8fa;
+ margin-bottom: 5px;
+ padding: 8px;
+}
+
+.typeContent {
+ box-sizing: border-box;
+}
+
+.border {
+ width: 100%;
+ margin-bottom: 20px;
+ position: relative;
+}
+</style>
diff --git a/src/views/bounced/dataBoard-old.vue b/src/views/bounced/dataBoard-old.vue
new file mode 100644
index 0000000..8bd6508
--- /dev/null
+++ b/src/views/bounced/dataBoard-old.vue
@@ -0,0 +1,1049 @@
+<template>
+ <div ref="box" class="box" v-loading="loading">
+ <el-empty v-show="!loading&§ionData.length == 0" :image-size="400"></el-empty>
+ <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
+ <el-scrollbar class="scrollbar">
+ <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
+ <!-- 断面 -->
+ <!-- :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" -->
+ <div class="plate1" ref="plate1">
+ <div class="section" ref="section" v-for="s in sectionData" :key="s.analogAreaComponentId">
+ <template>
+ <div ref="sectionContent">
+ <div>
+ <p class="board-title">
+ <span>{{ s.title }}</span>
+ </p>
+ <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
+ </div>
+ <el-tabs>
+ <el-collapse v-model="acticveName" @change="handleChange">
+ <div style="position: relative" v-for="o in s.children" :key="o.analogAreaComponentId">
+ <div class="titleGnag"></div>
+ <el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
+ <!--触发的组件 -->
+ <typeChart
+ ref="typeChartRef"
+ v-if="o.timeMode === '实时触发'"
+ :itemData="o"
+ :pageType="o.graphicType"
+ :triggerType="o.timeMode"
+ :componentName="o.componentName"
+ :dataArr="o.trigger"
+ :echartArr="o.presentationForm"
+ :title="o.componentName.split('_')[0]"
+ :chartName="o.combinationName"
+ :typeValue="typeTimeMode"
+ :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
+ />
+ <typeChart
+ ref="typeChartRef1"
+ v-if="o.timeMode === '固定时刻'"
+ :itemData="o"
+ :pageType="o.graphicType"
+ :triggerType="o.timeMode"
+ :componentName="o.componentName"
+ :dataArr="o.cycleTimeData"
+ :echartArr="o.presentationForm"
+ :title="o.componentName.split('_')[0]"
+ :chartName="o.combinationName"
+ :typeValue="typeCycleTimeData"
+ :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
+ />
+
+ <!-- 固定间隔的组件 -->
+ <typeChart
+ ref="typeChartRef2"
+ style="width: 100%"
+ v-if="o.timeMode === '固定间隔'"
+ :itemData="o"
+ :pageType="o.graphicType"
+ :triggerType="o.timeMode"
+ :componentName="o.componentName"
+ :dataArr="o.cycleStatisticsData"
+ :echartArr="o.presentationForm"
+ :title="o.componentName.split('_')[0]"
+ :chartName="o.combinationName"
+ :typeValue="typeCycleStatistics"
+ :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
+ />
+ </el-collapse-item>
+ </div>
+ </el-collapse>
+ </el-tabs>
+ </div>
+ </template>
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+ <!-- 详情框 -->
+ </div>
+</template>
+<script>
+import typeChart from '../../components/target/typeChart.vue';
+// import {mapMutation} from 'vuex'
+import { getComponentSection } from '../../api/index';
+export default {
+ components: {
+ typeChart
+ },
+ props: {
+ activeName: {
+ type: String
+ },
+ triggerData: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ // 触发数据
+ triggerListData: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ // 固定时刻数据
+ cycleTimeData: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ //固定间隔
+ cycleStatisticsData: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ //周期统计实时累计数据主题
+ cycleAccumulateData: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ //历史数据
+ cycleHistoryData: {
+ type: Object,
+ default() {
+ return {};
+ }
+ }
+ },
+ data() {
+ return {
+ loading:false,
+ acticveName: [],
+ title1: '01断面',
+ title2: '01区域',
+ dialogVisible: false,
+
+ idVal: '',
+ //组件数组
+ componentList: [],
+ // 触发数据数组
+ triggerList: [],
+
+ sectionData: [],
+
+ // 单个区域或者断面的表格触发数据
+ tableList: [],
+
+ // 路线数据
+ headWay: [],
+
+ tripData: [],
+
+ sectionArr: [],
+
+ //触发的类型数值看板显示
+ typeTimeMode: {},
+ // 固定时刻的数值看板展示
+ typeCycleTimeData: {},
+ typeCycleStatistics: {},
+
+ // 各个组件分类
+ classify: []
+ // cycleHistoryData:''
+ };
+ },
+ // beforeCeated(){
+
+ // },
+ created() {
+ // this.getNew()
+ // //console.log("cycleHistoryData",this.cycleHistoryData)
+ },
+ methods: {
+ // 手风琴下拉切换
+ handleChange(val) {
+ // setTimeout(() => {
+ // this.$nextTick(function () {
+ // var myEvent = new Event("resize");
+ // window.dispatchEvent(myEvent);
+ // });
+ // }, 3000);
+ },
+ getNew() {
+ // this.idVal = ;
+ this.loading=true;
+ getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
+ if (res.data.code == 200) {
+ //console.log(res.data.data, '组件的数据');
+ this.componentList = res.data.data;
+ this.siftData();
+ }
+ }).finally(()=>{
+ this.loading=false;
+ });
+ },
+
+ siftData() {
+ this.sectionArr = [];
+ this.sectionData = [];
+ this.classify = [];
+ this.componentList.forEach((val) => {
+ // //console.log("val",val)
+ this.sectionArr.push(val.combinationName);
+ this.sectionArr = Array.from(new Set(this.sectionArr));
+ });
+ this.sectionData = this.sectionArr.map((item) => {
+ item = { title: item, children: [] };
+ this.acticveName = [];
+ this.componentList.forEach((val) => {
+ if (item.title == val.combinationName) {
+ this.classify.push(val);
+ item.children.push(val);
+ if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
+ item.cycleStatisticsData = val.cycleStatisticsData;
+ }
+ if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
+ item.cycleTimeData = val.cycleTimeData;
+ }
+ }
+ this.acticveName.push([val.analogAreaComponentId]);
+ });
+ return item;
+ });
+ },
+ // 组件图标点击下拉事件
+ sectionHandle(i) {
+ // let sections = document.querySelectorAll('.section');
+ let sectionBox = document.querySelectorAll('.sectionBox');
+ let downPulls1 = document.querySelectorAll('.downPull1');
+ // 断面的小图标
+ downPulls1[i].dataset.num++;
+ if (downPulls1[i].dataset.num % 2 == 0) {
+ downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
+ // sections[i].style.height = 'auto';
+ if (sectionBox[i] != undefined) {
+ // sectionBox[i].style.height = 'auto';
+ }
+ } else {
+ downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
+ // sections[i].style.height = '500px';
+ if (sectionBox[i] != undefined) {
+ }
+ }
+ },
+
+ // 触发数据的类型数值
+
+ //循环方法
+ getRef(data, timeMode) {
+ for (let i = 0; i < data.length; i++) {
+ let refItem = data[i];
+ if (data.length != 0 && refItem.dataArr && refItem.dataArr.length > 0) {
+ if (refItem.echartArr.includes('时间曲线图')) {
+ refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
+ }
+ if (refItem.echartArr.includes('数值')) {
+ refItem.getDataArr(refItem.dataArr);
+ }
+ if (refItem.echartArr.includes('表格')) {
+ refItem.getDataArr(refItem.dataArr);
+ }
+ if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
+ // 数据改变重新渲染柱状图
+ refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
+ }
+ if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
+ // 数据改变重新渲染饼图
+ refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
+ }
+ if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
+ refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
+ }
+ if (
+ refItem.componentName.includes('OD') &&
+ refItem.$refs.ODChartRef != undefined &&
+ refItem.dataArr[0].ob_data &&
+ refItem.dataArr[0].ob_data.length != 0
+ ) {
+ refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
+ }
+ }
+ }
+ },
+ //处理离线视频历史数据
+ changecycleHistoryData() {}
+ },
+ mounted() {},
+ watch: {
+ // 触发的原始数据 作用是给3d那边，界面不需要展示
+ // triggerData: {
+ // handler(newVal, oldVal) {},
+ // immediate: true
+ // },
+ componentList: {
+ handler(newVal) {
+ //console.log('componentList', newVal);
+
+ if (newVal != undefined && newVal.length != 0) {
+ newVal.forEach((ele) => {
+ if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
+ //console.log('实时视频', '固定间隔');
+ this.$nextTick(() => {
+ // var thatNN = this;
+ ele.cycleStatisticsData.forEach((item) => {
+ if (item.type_data != null) {
+ this.typeCycleStatistics = item;
+ }
+ });
+ if (this.$refs.typeChartRef2 != undefined) {
+ // // 轮循固定时刻生成的各类组件
+ //console.log('轮循固定时刻生成的各类组件')
+ this.getRef(this.$refs.typeChartRef2, ele.timeMode);
+ }
+ });
+ }
+ if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
+ //console.log('实时视频', '固定时刻');
+ this.$nextTick(() => {
+ ele.cycleTimeData.forEach((item) => {
+ if (item.type_data != null) {
+ item.time = item.time.split('.')[0];
+
+ this.typeCycleStatistics = item;
+ }
+ // thatN.$nextTick(() => {
+ });
+ if (this.$refs.typeChartRef1 != undefined) {
+ // // 轮循固定时刻生成的各类组件
+ this.getRef(this.$refs.typeChartRef1, ele.timeMode);
+ }
+ });
+ }
+ if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
+ if (
+ this.cycleHistoryData.CycleStatisticsData != undefined &&
+ this.cycleHistoryData.CycleStatisticsData.lenght != 0
+ ) {
+ this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
+ if (ne.component_id == ele.analogAreaComponentId) {
+ ele.cycleStatisticsData = ne.cycleStatisticsData;
+ }
+ });
+ this.$nextTick(() => {
+ ele.cycleStatisticsData.forEach((item) => {
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ if (item.type_data != null) {
+ this.typeCycleStatistics = item;
+ }
+ // thatN.$nextTick(() => {
+ });
+ if (this.$refs.typeChartRef2 != undefined) {
+ // // 轮循固定时刻生成的各类组件
+ this.getRef(this.$refs.typeChartRef2, '固定间隔');
+ }
+ });
+ }
+ }
+ if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
+ if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
+ this.cycleHistoryData.CycleTimeData.forEach((ne) => {
+ if (ne.component_id == ele.analogAreaComponentId) {
+ ele.cycleTimeData = ne.cycleTimeData;
+ }
+ });
+ this.$nextTick(() => {
+ ele.cycleTimeData.forEach((item) => {
+ // if(this.$route.query.type=='离线视频'){
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ // }else{
+ // item.time = item.time.split('.')[0];
+ // }
+ if (item.type_data != null) {
+ this.typeCycleStatistics = item;
+ }
+ });
+ if (this.$refs.typeChartRef1 != undefined) {
+ // // 轮循固定时刻生成的各类组件
+
+ this.getRef(this.$refs.typeChartRef1, '固定时刻');
+ }
+ });
+ }
+ }
+ });
+ }
+ },
+ immediate: true,
+ deep: true
+ },
+ cycleHistoryData: {
+ handler(newVal) {
+ // debugger
+ //console.log('历史', newVal);
+ // //console.log("历史",oldVal)
+ if (newVal != undefined) {
+ // newVal.forEach(ele => {
+ if (newVal.CycleStatisticsData) {
+ newVal.CycleStatisticsData.forEach((ele) => {
+ this.$nextTick(() => {
+ // var thatNN = this;
+ ele.cycleStatisticsData.forEach((item) => {
+ if (item.type_data != null) {
+ if (this.$route.query.type == '离线视频') {
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ } else {
+ item.time = item.time.split('.')[0];
+ }
+ this.typeCycleStatistics = item;
+ }
+ });
+ if (this.$refs.typeChartRef2 != undefined) {
+ // // 轮循固定时刻生成的各类组件
+ this.getRef(this.$refs.typeChartRef2, '固定间隔');
+ }
+ });
+ });
+ }
+ if (newVal.CycleTimeData) {
+ newVal.CycleTimeData.forEach((ele) => {
+ this.$nextTick(() => {
+ // debugger
+ // var thatNN = this;
+ ele.cycleTimeData.forEach((item) => {
+ if (this.$route.query.type == '离线视频') {
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ } else {
+ item.time = item.time.split('.')[0];
+ }
+ if (item.type_data != null) {
+ this.typeCycleStatistics = item;
+ }
+ });
+ if (this.$refs.typeChartRef1 != undefined) {
+ // // 轮循固定时刻生成的各类组件
+ this.getRef(this.$refs.typeChartRef1, '固定时刻');
+ }
+ });
+ });
+ }
+
+ // });
+ }
+ },
+ immediate: true,
+ deep: true
+ },
+ // activeName:'channge',
+ // 处理过的触发数据
+ triggerListData: {
+ handler(newVal) {
+ // console.log("实时触发triggerListData-",newVal)
+ this.triggerList = newVal;
+ // //console.log("oldVal",oldVal)
+ // 触发数据
+ var _this = this;
+ if (newVal.length != 0 && _this.sectionData.length>0) {
+ _this.classify.forEach((ele, index) => {
+ if (ele.trigger == undefined && ele.timeMode == '实时触发') {
+ ele.trigger = [];
+ }
+ newVal.forEach((item) => {
+ if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
+ // //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
+ // //console.log(item.component_id, 'component_id');
+ if (ele.trigger.length == 10) {
+ ele.trigger.pop();
+ }
+ if (this.$route.query.type == '离线视频') {
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ } else {
+ item.time = item.time.split('.')[0];
+ }
+
+ // 该时间的触发数据
+ if (item.type_data != null) {
+ _this.typeTimeMode = item;
+ }
+ //component_type
+ // if(item.component_name=='车头时距_4'){
+ // console.log("dataBoard实时触发triggerListData-item",item)
+ // }
+ ele.trigger.unshift(item);
+ _this.$nextTick(() => {
+ if (_this.$refs.typeChartRef != undefined) {
+ for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
+ // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+ let itemTypeChart = _this.$refs.typeChartRef[i];
+ if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
+ if (itemTypeChart.echartArr.includes('时间曲线图')) {
+ _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
+ _this.$refs.typeChartRef[i].dataArr,
+ _this.$refs.typeChartRef[i].componentName.split('_')[0],
+ '实时触发'
+ );
+ }
+ if (itemTypeChart.echartArr.includes('数值')) {
+ _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
+ }
+ if (itemTypeChart.echartArr.includes('表格')) {
+ _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
+ }
+ if (
+ itemTypeChart.echartArr.includes('直方图') &&
+ itemTypeChart.componentName.split('_')[0]
+ ) {
+ // 数据改变重新渲染柱状图
+ itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
+ }
+ if (
+ itemTypeChart.echartArr.includes('饼状图') &&
+ itemTypeChart.componentName.split('_')[0]
+ ) {
+ // 数据改变重新渲染饼图
+ itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
+ }
+ if (
+ itemTypeChart.echartArr.includes('均值图') &&
+ itemTypeChart.$refs.avgChartRef != undefined
+ ) {
+ itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
+ }
+ if (
+ itemTypeChart.componentName.includes('OD') &&
+ itemTypeChart.$refs.ODChartRef != undefined &&
+ itemTypeChart.dataArr[0].ob_data &&
+ itemTypeChart.dataArr[0].ob_data.length != 0
+ ) {
+ itemTypeChart.$refs.ODChartRef.drawThermalChart(
+ itemTypeChart.dataArr[0].ob_data,
+ itemTypeChart.startEndData
+ );
+ }
+ }
+ }
+ }
+ });
+ }
+ });
+ });
+ }
+ },
+ immediate: true
+ },
+ // 固定时刻的数据
+ cycleTimeData: {
+ handler(newVal) {
+ // 监听到打印固定时刻数据
+ // console.log(newVal, '固定时刻数据');
+
+ if (newVal != undefined && newVal.length != 0 && this.sectionData) {
+ var thatN = this;
+ thatN.classify.forEach((ele, index) => {
+ newVal.forEach((item) => {
+ if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
+ if (ele.cycleTimeData.length == 10) {
+ ele.cycleTimeData.pop();
+ }
+ // item.time = item.time.split('.')[0];
+ if (this.$route.query.type == '离线视频') {
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ } else {
+ item.time = item.time.split('.')[0];
+ }
+ if (item.type_data != null) {
+ // 固定时刻的类型数据
+ thatN.typeCycleTimeData = item;
+ }
+ ele.cycleTimeData.unshift(item);
+
+ // thatN.$nextTick(() => {
+ if (thatN.$refs.typeChartRef1 != undefined) {
+ // //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
+ // 轮循固定时刻生成的各类组件
+ for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
+ let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
+ if (
+ itemTypeChartRef1.length != 0 &&
+ itemTypeChartRef1.dataArr != undefined &&
+ itemTypeChartRef1.dataArr.length != 0
+ ) {
+ if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
+ thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
+ thatN.$refs.typeChartRef1[i].dataArr,
+ thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
+ '固定时刻'
+ );
+ }
+ if (itemTypeChartRef1.echartArr.includes('数值')) {
+ thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
+ }
+ if (itemTypeChartRef1.echartArr.includes('表格')) {
+ thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
+ }
+ if (
+ itemTypeChartRef1.echartArr.includes('直方图') &&
+ itemTypeChartRef1.$refs.barChartRef.drawBar
+ ) {
+ // 数据改变重新渲染柱状图
+ itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
+ }
+ if (
+ itemTypeChartRef1.echartArr.includes('饼状图') &&
+ itemTypeChartRef1.$refs.pieChartRef.drawPie
+ ) {
+ // 数据改变重新渲染饼图
+ itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
+ }
+ if (
+ itemTypeChartRef1.echartArr.includes('均值图') &&
+ itemTypeChartRef1.$refs.avgChartRef != undefined
+ ) {
+ itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
+ }
+ if (
+ itemTypeChartRef1.componentName.includes('OD') &&
+ itemTypeChartRef1.$refs.ODChartRef != undefined &&
+ itemTypeChartRef1.dataArr[0].ob_data &&
+ itemTypeChartRef1.dataArr[0].ob_data.length != 0
+ ) {
+ // console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
+ itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
+ itemTypeChartRef1.dataArr[0].ob_data,
+ itemTypeChartRef1.startEndData
+ );
+ }
+ }
+ }
+
+ // });
+ }
+ }
+ });
+ });
+ }
+ // else {
+ // var _thatN = this
+ // _thatN.classify.forEach((ele, index) => {
+
+ // // newVal.forEach(item => {
+ // if (ele.timeMode == '固定时刻') {
+ // if (ele.cycleTimeData.length == 10) {
+ // ele.cycleTimeData.pop();
+ // }
+ // // item.time = item.time.split('.')[0];
+ // // if (item.type_data != null) {
+ // // // 固定时刻的类型数据
+ // // _thatN.typeCycleTimeData = item;
+ // // }
+ // // ele.cycleTimeData.unshift(item);
+ // // _thatN.$nextTick(() => {
+ // if (_thatN.$refs.typeChartRef1 != undefined) {
+ // // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
+ // // 轮循固定时刻生成的各类组件
+ // for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
+ // let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
+ // if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
+
+ // if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
+ // _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻')
+ // }
+ // if (itemTypeChartRef1.echartArr.includes('数值')) {
+ // _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
+ // }
+
+ // if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
+ // // 数据改变重新渲染柱状图
+ // itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
+ // }
+ // if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
+ // // 数据改变重新渲染饼图
+ // itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
+ // }
+ // if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef.drawBar) {
+ // itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
+ // }
+ // if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
+ // itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
+ // }
+
+ // }
+ // }
+
+ // // });
+ // }
+ // }
+ // // });
+ // });
+ // }
+ },
+ immediate: true
+ },
+ //固定间隔
+ cycleStatisticsData: {
+ handler(newVal) {
+ // console.log('固定间隔', newVal);
+ if (newVal != undefined && newVal.length != 0 && this.sectionData) {
+ var that = this;
+ that.classify.forEach((ele, index) => {
+ newVal.forEach((item) => {
+ if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
+ if (ele.cycleStatisticsData.length == 10) {
+ ele.cycleStatisticsData.pop();
+ }
+
+ if (this.$route.query.type == '离线视频') {
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ } else {
+ item.time = item.time.split('.')[0];
+ }
+ if (item.type_data != null) {
+ that.typeCycleStatistics = item;
+ }
+ ele.cycleStatisticsData.unshift(item);
+ if (that.$refs.typeChartRef2 != undefined) {
+ for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
+ let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
+
+ if (
+ itemTypeChartRef2.length != 0 &&
+ itemTypeChartRef2.dataArr != undefined &&
+ itemTypeChartRef2.dataArr.length != 0
+ ) {
+ if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
+ that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
+ that.$refs.typeChartRef2[i].dataArr,
+ that.$refs.typeChartRef2[i].componentName.split('_')[0],
+ '固定间隔'
+ );
+ }
+ if (itemTypeChartRef2.echartArr.includes('数值')) {
+ that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
+ }
+ if (itemTypeChartRef2.echartArr.includes('表格')) {
+ that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
+ }
+ // //console.log(item,'组件数据');
+ if (
+ itemTypeChartRef2.echartArr.includes('直方图') &&
+ itemTypeChartRef2.$refs.barChartRef.drawBar
+ ) {
+ // 数据改变重新渲染柱状图
+ // //console.log(item, '组件');
+ itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
+ }
+ if (
+ itemTypeChartRef2.echartArr.includes('饼状图') &&
+ itemTypeChartRef2.$refs.pieChartRef.drawPie
+ ) {
+ // 数据改变重新渲染饼图
+ itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
+ }
+ if (
+ itemTypeChartRef2.echartArr.includes('均值图') &&
+ itemTypeChartRef2.$refs.avgChartRef != undefined
+ ) {
+ itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
+ }
+ if (
+ itemTypeChartRef2.componentName.includes('OD') &&
+ itemTypeChartRef2.$refs.ODChartRef != undefined &&
+ itemTypeChartRef2.dataArr[0].ob_data &&
+ itemTypeChartRef2.dataArr[0].ob_data.length != 0
+ ) {
+ itemTypeChartRef2.$refs.ODChartRef.drawThermalChart(
+ itemTypeChartRef2.dataArr[0].ob_data,
+ itemTypeChartRef2.startEndData
+ );
+ }
+ }
+ }
+ }
+ }
+ });
+ });
+ }
+ // else {
+
+ // var _that = this
+ // _that.classify.forEach(ele => {
+ // if (ele.timeMode == '固定间隔') {
+ // if (ele.cycleStatisticsData.length == 10) {
+ // ele.cycleStatisticsData.pop();
+ // }
+ // // item.time = item.time.split('.')[0];
+ // // if (item.type_data != null) {
+ // // _that.typeCycleStatistics = item;
+ // // }
+ // // ele.cycleStatisticsData.unshift(item);
+ // if (_that.$refs.typeChartRef2 != undefined) {
+ // for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
+ // let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
+ // // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+ // if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
+ // // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
+ // if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
+ // _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔')
+ // }
+ // if (itemTypeChartRef2.echartArr.includes('数值')) {
+ // _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
+ // }
+ // // //console.log(item,'组件数据');
+ // if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
+ // // 数据改变重新渲染柱状图
+ // // //console.log(item, '组件');
+ // itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+ // }
+ // if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
+ // // 数据改变重新渲染饼图
+ // itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
+ // }
+
+ // // if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
+ // // item.$refs.avgChartRef.drawBar(item.dataArr[0])
+ // // }
+ // if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
+ // itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+ // }
+ // }
+
+ // }
+
+ // }
+ // }
+
+ // });
+ // }
+ },
+ immediate: true
+ },
+ //周期统计实时累计数据主题
+ cycleAccumulateData: {
+ handler(newVal) {
+ // console.log('周期统计实时累计数据主题', newVal);
+ if (newVal != undefined && newVal.length != 0 && this.sectionData) {
+ var that = this;
+ that.classify.forEach((ele, index) => {
+ newVal.forEach((item) => {
+ if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
+ // if (ele.cycleStatisticsData.length == 10) {
+ // ele.cycleStatisticsData.pop();
+ // }
+
+ if (this.$route.query.type == '离线视频') {
+ var timeNew = item.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ item.time = key;
+ } else {
+ item.time = item.time.split('.')[0];
+ }
+ if (item.type_data != null) {
+ that.typeCycleStatistics = item;
+ }
+ // ele.cycleStatisticsData.unshift(item);
+ if (that.$refs.typeChartRef2 != undefined) {
+ for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
+ let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
+
+ if (
+ itemTypeChartRef2.length != 0 &&
+ itemTypeChartRef2.dataArr != undefined &&
+ itemTypeChartRef2.dataArr.length != 0
+ ) {
+ //console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
+ if (
+ itemTypeChartRef2.echartArr.includes('数值') &&
+ itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
+ ) {
+ //只需要修改数值组件,逻辑存在问题
+ itemTypeChartRef2.getcycleAccumulateDataArr([item]);
+ }
+ }
+ }
+ }
+ }
+ });
+ });
+ }
+ },
+ immediate: true
+ }
+ }
+};
+</script>
+
+<style>
+.titleGnag {
+ width: 3px;
+ height: 18px;
+ display: inline-block;
+ background-color: #3297ff;
+ position: absolute;
+ top: 14px;
+}
+
+.el-collapse-item__header {
+ font-size: 15px;
+ margin-left: 10px;
+}
+</style>
+<style scoped lang="scss">
+* {
+ margin: 0;
+ padding: 0;
+}
+
+.plate1,
+.plate2 {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+/deep/ .el-scrollbar__view {
+ display: inline-block !important;
+ width: 100%;
+}
+
+/deep/ .el-scrollbar__wrap {
+ overflow-x: hidden !important;
+}
+
+.scrollbar {
+ height: 100vh;
+ overflow-x: hidden !important;
+
+ .dataBoard {
+ height: 100%;
+ }
+}
+
+.dataBoard .region,
+.dataBoard .section {
+ width: 48%;
+ border: 1px solid #e4e7ed;
+ box-sizing: border-box;
+ padding: 15px;
+ height: auto;
+ position: relative;
+ transition: all 1s;
+ overflow: hidden;
+}
+
+.dataBoard .sectionBox {
+ width: 100%;
+ height: auto;
+ border: 1px solid #e4e7ed;
+ box-sizing: border-box;
+ padding: 15px;
+ position: relative;
+ transition: all 1s;
+ overflow: hidden;
+}
+
+.dataBoard .sectionBox:nth-child(1) {
+ margin-bottom: 4vh;
+}
+
+.dataBoard .section {
+ float: left;
+ margin-top: 20px;
+}
+
+.dataBoard .section:nth-child(1),
+.dataBoard .section:nth-child(2) {
+ margin-top: 0;
+}
+
+/* .downUp{
+ height: 2000px !important;
+} */
+
+.dataBoard .board-title {
+ font-size: 17px;
+ font-weight: 400;
+ position: relative;
+ margin-bottom: 15px;
+ border-bottom: 1px solid #e4e7ed;
+}
+
+.dataBoard .board-title span {
+ padding: 5px 10px 5px 10px;
+ border-bottom: 1px solid #79b7f8;
+ /* display: block; */
+ display: inline-block;
+}
+
+.test-div i {
+ font-size: 25px;
+}
+
+.down {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.downPull,
+.downPull1 {
+ position: absolute;
+ top: 20px;
+ right: 17px;
+ cursor: pointer;
+ background-size: 14px 9px;
+ background-image: url(../../assets/img/downpull.png);
+ width: 14px;
+ height: 9px;
+}
+
+.upActive {
+ transform: rotate(180deg);
+ transition: all 0.5s linear;
+ /* transform-origin: 7px 7px; */
+}
+
+.active {
+ transition: all 0.5s linear;
+}
+</style>
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index dd4d2e9..22aa19c 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -1,6 +1,6 @@
<template>
<div ref="box" class="box" v-loading="loading">
- <el-empty v-show="!loading&§ionData.length == 0" :image-size="400"></el-empty>
+ <el-empty v-show="!loading && sectionData.length == 0" :image-size="400"></el-empty>
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
<el-scrollbar class="scrollbar">
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
@@ -14,7 +14,6 @@
<p class="board-title">
<span>{{ s.title }}</span>
</p>
- <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
</div>
<el-tabs>
<el-collapse v-model="acticveName" @change="handleChange">
@@ -22,7 +21,7 @@
<div class="titleGnag"></div>
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
<!--触发的组件 -->
- <typeChart
+ <newtypeChart
ref="typeChartRef"
v-if="o.timeMode === '实时触发'"
:itemData="o"
@@ -36,7 +35,7 @@
:typeValue="typeTimeMode"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
/>
- <typeChart
+ <newtypeChart
ref="typeChartRef1"
v-if="o.timeMode === '固定时刻'"
:itemData="o"
@@ -52,7 +51,7 @@
/>
<!-- 固定间隔的组件 -->
- <typeChart
+ <newtypeChart
ref="typeChartRef2"
style="width: 100%"
v-if="o.timeMode === '固定间隔'"
@@ -61,6 +60,7 @@
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.cycleStatisticsData"
+ :cycleAccumulateData="o.cycleAccumulateData"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
@@ -81,12 +81,13 @@
</div>
</template>
<script>
-import typeChart from '../../components/target/typeChart.vue';
+import newtypeChart from '../../components/target/newtypeChart.vue';
// import {mapMutation} from 'vuex'
import { getComponentSection } from '../../api/index';
+import { update } from '../../api/aboutMachine';
export default {
components: {
- typeChart
+ newtypeChart
},
props: {
activeName: {
@@ -136,48 +137,37 @@ export default {
},
data() {
return {
- loading:false,
+ loading: false,
acticveName: [],
- title1: '01断面',
- title2: '01区域',
- dialogVisible: false,
-
- idVal: '',
//组件数组
componentList: [],
// 触发数据数组
triggerList: [],
sectionData: [],
-
- // 单个区域或者断面的表格触发数据
- tableList: [],
-
- // 路线数据
- headWay: [],
-
- tripData: [],
-
sectionArr: [],
//触发的类型数值看板显示
- typeTimeMode: {},
- // 固定时刻的数值看板展示
- typeCycleTimeData: {},
- typeCycleStatistics: {},
+ // "type_data":[{//类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值
+ // "name":"electric bicycle",//类型名称
+ // "quantity":0//数量
+ // }],
+ // "ob_data":[{//od数据，只供od组件使用，只有组件类型为OD的时候，这个字段才有值
+ // "end":"gate1",
+ // "data":[{
+ // "start":"zone1",
+ // "quantity":0
+ // }]
+ // }]
+ typeTimeMode: {}, //实时触发类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
+ typeCycleTimeData: {}, // 固定时刻的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
+ typeCycleStatistics: {}, //固定间隔的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
// 各个组件分类
classify: []
- // cycleHistoryData:''
};
},
- // beforeCeated(){
-
- // },
- created() {
- // this.getNew()
- // //console.log("cycleHistoryData",this.cycleHistoryData)
- },
+ created() {},
methods: {
// 手风琴下拉切换
handleChange(val) {
@@ -188,24 +178,27 @@ export default {
// });
// }, 3000);
},
+ //点击数据看板tab会执行获取所有配置的组件
getNew() {
- // this.idVal = ;
- this.loading=true;
- getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
- if (res.data.code == 200) {
- //console.log(res.data.data, '组件的数据');
- this.componentList = res.data.data;
- this.siftData();
- }
- }).finally(()=>{
- this.loading=false;
- });
+ this.loading = true;
+ getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
+ .then((res) => {
+ if (res.data.code == 200) {
+ //console.log(res.data.data, '组件的数据');
+ this.componentList = res.data.data;
+ this.siftData();
+ }
+ })
+ .finally(() => {
+ this.loading = false;
+ });
},
-
+ //组件数据根据分类重组到相同分类下
siftData() {
+ //获取分类
this.sectionArr = [];
this.sectionData = [];
- this.classify = [];
+ // this.classify = []; //通过相同赋值来改变sectionData里面children数据的改变不太合理，所以这边不用了
this.componentList.forEach((val) => {
// //console.log("val",val)
this.sectionArr.push(val.combinationName);
@@ -213,697 +206,145 @@ export default {
});
this.sectionData = this.sectionArr.map((item) => {
item = { title: item, children: [] };
- this.acticveName = [];
+ this.acticveName = []; //存储collapse组件的展开，默认全部收缩
this.componentList.forEach((val) => {
if (item.title == val.combinationName) {
- this.classify.push(val);
+ // this.classify.push(val);
+ //trigger 为实时触发存储的数据，cycleTimeData为固定时刻存储的数据，cycleStatisticsData为固定间隔存储的数据
+ //在接口返回的componentList组件中没有trigger字段
+ if (!val.trigger) {
+ val.trigger = [];
+ }
+ //固定间隔还有个周期统计实时累计数据主题
+ if (!val.cycleAccumulateData) {
+ val.cycleAccumulateData = [];
+ }
item.children.push(val);
- if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
- item.cycleStatisticsData = val.cycleStatisticsData;
- }
- if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
- item.cycleTimeData = val.cycleTimeData;
- }
+ //把cycleStatisticsData，cycleTimeData存给children同级别暂时没理解为啥怎么做
+ // if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
+ // item.cycleStatisticsData = val.cycleStatisticsData;
+ // }
+ // if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
+ // item.cycleTimeData = val.cycleTimeData;
+ // }
}
- this.acticveName.push([val.analogAreaComponentId]);
+ // this.acticveName.push(val.analogAreaComponentId);
});
return item;
});
+ // console.log('折叠面板-', this.acticveName);
},
- // 组件图标点击下拉事件
- sectionHandle(i) {
- // let sections = document.querySelectorAll('.section');
- let sectionBox = document.querySelectorAll('.sectionBox');
- let downPulls1 = document.querySelectorAll('.downPull1');
- // 断面的小图标
- downPulls1[i].dataset.num++;
- if (downPulls1[i].dataset.num % 2 == 0) {
- downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
- // sections[i].style.height = 'auto';
- if (sectionBox[i] != undefined) {
- // sectionBox[i].style.height = 'auto';
+ updateSectionData(newVal, updateKey, timeMode) {
+ this.sectionData.forEach((item) => {
+ //item.title == val.combinationName
+ if (item.children && item.children.length > 0) {
+ item.children.forEach((cItem) => {
+ if (cItem.timeMode == timeMode) {
+ //找出对应timeMode的mqtt数据
+ newVal.forEach((nItem) => {
+ if (cItem.analogAreaComponentId == nItem.component_id) {
+ if (cItem[updateKey].length > 9) {
+ this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
+ }
+ //这里逻辑不知道为啥这样处理time，用的原逻辑
+ if (this.$route.query.type == '离线视频') {
+ var timeNew = nItem.time.split('.')[0];
+ var dateLength = timeNew.length;
+ var key = timeNew.substring(dateLength - 8, dateLength);
+ nItem.time = key;
+ } else {
+ nItem.time = nItem.time.split('.')[0];
+ }
+ // cItem[updateKey].unshift(nItem);
+ this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
+ }
+ });
+ }
+ });
}
- } else {
- downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
- // sections[i].style.height = '500px';
- if (sectionBox[i] != undefined) {
- }
- }
- },
-
- // 触发数据的类型数值
-
- //循环方法
- getRef(data, timeMode) {
- for (let i = 0; i < data.length; i++) {
- let refItem = data[i];
- if (data.length != 0 && refItem.dataArr && refItem.dataArr.length > 0) {
- if (refItem.echartArr.includes('时间曲线图')) {
- refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
- }
- if (refItem.echartArr.includes('数值')) {
- refItem.getDataArr(refItem.dataArr);
- }
- if (refItem.echartArr.includes('表格')) {
- refItem.getDataArr(refItem.dataArr);
- }
- if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
- // 数据改变重新渲染柱状图
- refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
- }
- if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
- // 数据改变重新渲染饼图
- refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
- }
- if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
- refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
- }
- if (
- refItem.componentName.includes('OD') &&
- refItem.$refs.ODChartRef != undefined &&
- refItem.dataArr[0].ob_data &&
- refItem.dataArr[0].ob_data.length != 0
- ) {
- refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
- }
- }
- }
- },
- //处理离线视频历史数据
- changecycleHistoryData() {}
+ });
+ this.$forceUpdate();
+ // console.log('sectionData', this.sectionData);
+ }
},
mounted() {},
watch: {
- // 触发的原始数据
- triggerData: {
- handler(newVal, oldVal) {},
- immediate: true
- },
- componentList: {
- handler(newVal) {
- //console.log('componentList', newVal);
-
- if (newVal != undefined && newVal.length != 0) {
- newVal.forEach((ele) => {
- if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
- //console.log('实时视频', '固定间隔');
- this.$nextTick(() => {
- // var thatNN = this;
- ele.cycleStatisticsData.forEach((item) => {
- if (item.type_data != null) {
- this.typeCycleStatistics = item;
- }
- });
- if (this.$refs.typeChartRef2 != undefined) {
- // // 轮循固定时刻生成的各类组件
- //console.log('轮循固定时刻生成的各类组件')
- this.getRef(this.$refs.typeChartRef2, ele.timeMode);
- }
- });
- }
- if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
- //console.log('实时视频', '固定时刻');
- this.$nextTick(() => {
- ele.cycleTimeData.forEach((item) => {
- if (item.type_data != null) {
- item.time = item.time.split('.')[0];
-
- this.typeCycleStatistics = item;
- }
- // thatN.$nextTick(() => {
- });
- if (this.$refs.typeChartRef1 != undefined) {
- // // 轮循固定时刻生成的各类组件
- this.getRef(this.$refs.typeChartRef1, ele.timeMode);
- }
- });
- }
- if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
- if (
- this.cycleHistoryData.CycleStatisticsData != undefined &&
- this.cycleHistoryData.CycleStatisticsData.lenght != 0
- ) {
- this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
- if (ne.component_id == ele.analogAreaComponentId) {
- ele.cycleStatisticsData = ne.cycleStatisticsData;
- }
- });
- this.$nextTick(() => {
- ele.cycleStatisticsData.forEach((item) => {
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- if (item.type_data != null) {
- this.typeCycleStatistics = item;
- }
- // thatN.$nextTick(() => {
- });
- if (this.$refs.typeChartRef2 != undefined) {
- // // 轮循固定时刻生成的各类组件
- this.getRef(this.$refs.typeChartRef2, '固定间隔');
- }
- });
- }
- }
- if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
- if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
- this.cycleHistoryData.CycleTimeData.forEach((ne) => {
- if (ne.component_id == ele.analogAreaComponentId) {
- ele.cycleTimeData = ne.cycleTimeData;
- }
- });
- this.$nextTick(() => {
- ele.cycleTimeData.forEach((item) => {
- // if(this.$route.query.type=='离线视频'){
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- // }else{
- // item.time = item.time.split('.')[0];
- // }
- if (item.type_data != null) {
- this.typeCycleStatistics = item;
- }
- });
- if (this.$refs.typeChartRef1 != undefined) {
- // // 轮循固定时刻生成的各类组件
-
- this.getRef(this.$refs.typeChartRef1, '固定时刻');
- }
- });
- }
- }
- });
- }
- },
- immediate: true,
- deep: true
- },
+ // 触发的原始数据 作用是给3d那边，界面不需要展示
+ // triggerData: {
+ // handler(newVal, oldVal) {},
+ // immediate: true
+ // },
+ //离线历史数据
cycleHistoryData: {
handler(newVal) {
// debugger
- //console.log('历史', newVal);
- // //console.log("历史",oldVal)
- if (newVal != undefined) {
- // newVal.forEach(ele => {
- if (newVal.CycleStatisticsData) {
+ // console.log('历史cycleHistoryData-', newVal);
+ //该主题只会有固定间隔和固定时刻数据
+ if (newVal && this.sectionData.length > 0) {
+ //更新sectionData对应的analogAreaComponentId和timeMode更新数据
+ if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
newVal.CycleStatisticsData.forEach((ele) => {
- this.$nextTick(() => {
- // var thatNN = this;
- ele.cycleStatisticsData.forEach((item) => {
- if (item.type_data != null) {
- if (this.$route.query.type == '离线视频') {
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- } else {
- item.time = item.time.split('.')[0];
- }
- this.typeCycleStatistics = item;
- }
- });
- if (this.$refs.typeChartRef2 != undefined) {
- // // 轮循固定时刻生成的各类组件
- this.getRef(this.$refs.typeChartRef2, '固定间隔');
- }
- });
+ if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) {
+ this.updateSectionData(ele.cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
+ }
});
}
- if (newVal.CycleTimeData) {
- newVal.CycleTimeData.forEach((ele) => {
- this.$nextTick(() => {
- // debugger
- // var thatNN = this;
- ele.cycleTimeData.forEach((item) => {
- if (this.$route.query.type == '离线视频') {
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- } else {
- item.time = item.time.split('.')[0];
- }
- if (item.type_data != null) {
- this.typeCycleStatistics = item;
- }
- });
- if (this.$refs.typeChartRef1 != undefined) {
- // // 轮循固定时刻生成的各类组件
- this.getRef(this.$refs.typeChartRef1, '固定时刻');
- }
- });
+ if (newVal.cycleTimeData && newVal.cycleTimeData.length > 0) {
+ newVal.cycleTimeData.forEach((ele) => {
+ if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
+ this.updateSectionData(ele.cycleTimeData, 'cycleTimeData', '固定时刻');
+ }
});
}
-
- // });
}
},
immediate: true,
deep: true
},
- // activeName:'channge',
// 处理过的触发数据
triggerListData: {
handler(newVal) {
- // console.log("实时触发triggerListData-",newVal)
- this.triggerList = newVal;
- // //console.log("oldVal",oldVal)
+ // console.log('实时触发triggerListData-', newVal);
+ //this.triggerList = newVal; //目前看用不到这个数组
// 触发数据
- var _this = this;
- if (newVal.length != 0 && _this.sectionData.length>0) {
- _this.classify.forEach((ele, index) => {
- if (ele.trigger == undefined && ele.timeMode == '实时触发') {
- ele.trigger = [];
- }
- newVal.forEach((item) => {
- if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
- // //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
- // //console.log(item.component_id, 'component_id');
- if (ele.trigger.length == 10) {
- ele.trigger.pop();
- }
- if (this.$route.query.type == '离线视频') {
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- } else {
- item.time = item.time.split('.')[0];
- }
-
- // 该时间的触发数据
- if (item.type_data != null) {
- _this.typeTimeMode = item;
- }
- //component_type
- // if(item.component_name=='车头时距_4'){
- // console.log("dataBoard实时触发triggerListData-item",item)
- // }
- ele.trigger.unshift(item);
- _this.$nextTick(() => {
- if (_this.$refs.typeChartRef != undefined) {
- for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
- // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
- let itemTypeChart = _this.$refs.typeChartRef[i];
- if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
- if (itemTypeChart.echartArr.includes('时间曲线图')) {
- _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
- _this.$refs.typeChartRef[i].dataArr,
- _this.$refs.typeChartRef[i].componentName.split('_')[0],
- '实时触发'
- );
- }
- if (itemTypeChart.echartArr.includes('数值')) {
- _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
- }
- if (itemTypeChart.echartArr.includes('表格')) {
- _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
- }
- if (
- itemTypeChart.echartArr.includes('直方图') &&
- itemTypeChart.componentName.split('_')[0]
- ) {
- // 数据改变重新渲染柱状图
- itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
- }
- if (
- itemTypeChart.echartArr.includes('饼状图') &&
- itemTypeChart.componentName.split('_')[0]
- ) {
- // 数据改变重新渲染饼图
- itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
- }
- if (
- itemTypeChart.echartArr.includes('均值图') &&
- itemTypeChart.$refs.avgChartRef != undefined
- ) {
- itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
- }
- if (
- itemTypeChart.componentName.includes('OD') &&
- itemTypeChart.$refs.ODChartRef != undefined &&
- itemTypeChart.dataArr[0].ob_data &&
- itemTypeChart.dataArr[0].ob_data.length != 0
- ) {
- itemTypeChart.$refs.ODChartRef.drawThermalChart(
- itemTypeChart.dataArr[0].ob_data,
- itemTypeChart.startEndData
- );
- }
- }
- }
- }
- });
- }
- });
- });
+ if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+ //更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
+ this.updateSectionData(newVal, 'trigger', '实时触发');
}
},
- immediate: true
+ immediate: true,
+ deep: true
},
// 固定时刻的数据
cycleTimeData: {
handler(newVal) {
// 监听到打印固定时刻数据
// console.log(newVal, '固定时刻数据');
-
- if (newVal != undefined && newVal.length != 0 && this.sectionData) {
- var thatN = this;
- thatN.classify.forEach((ele, index) => {
- newVal.forEach((item) => {
- if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
- if (ele.cycleTimeData.length == 10) {
- ele.cycleTimeData.pop();
- }
- // item.time = item.time.split('.')[0];
- if (this.$route.query.type == '离线视频') {
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- } else {
- item.time = item.time.split('.')[0];
- }
- if (item.type_data != null) {
- // 固定时刻的类型数据
- thatN.typeCycleTimeData = item;
- }
- ele.cycleTimeData.unshift(item);
-
- // thatN.$nextTick(() => {
- if (thatN.$refs.typeChartRef1 != undefined) {
- // //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
- // 轮循固定时刻生成的各类组件
- for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
- let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
- if (
- itemTypeChartRef1.length != 0 &&
- itemTypeChartRef1.dataArr != undefined &&
- itemTypeChartRef1.dataArr.length != 0
- ) {
- if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
- thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
- thatN.$refs.typeChartRef1[i].dataArr,
- thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
- '固定时刻'
- );
- }
- if (itemTypeChartRef1.echartArr.includes('数值')) {
- thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
- }
- if (itemTypeChartRef1.echartArr.includes('表格')) {
- thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
- }
- if (
- itemTypeChartRef1.echartArr.includes('直方图') &&
- itemTypeChartRef1.$refs.barChartRef.drawBar
- ) {
- // 数据改变重新渲染柱状图
- itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
- }
- if (
- itemTypeChartRef1.echartArr.includes('饼状图') &&
- itemTypeChartRef1.$refs.pieChartRef.drawPie
- ) {
- // 数据改变重新渲染饼图
- itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
- }
- if (
- itemTypeChartRef1.echartArr.includes('均值图') &&
- itemTypeChartRef1.$refs.avgChartRef != undefined
- ) {
- itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
- }
- if (
- itemTypeChartRef1.componentName.includes('OD') &&
- itemTypeChartRef1.$refs.ODChartRef != undefined &&
- itemTypeChartRef1.dataArr[0].ob_data &&
- itemTypeChartRef1.dataArr[0].ob_data.length != 0
- ) {
- // console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
- itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
- itemTypeChartRef1.dataArr[0].ob_data,
- itemTypeChartRef1.startEndData
- );
- }
- }
- }
-
- // });
- }
- }
- });
- });
+ if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+ this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
}
- // else {
- // var _thatN = this
- // _thatN.classify.forEach((ele, index) => {
-
- // // newVal.forEach(item => {
- // if (ele.timeMode == '固定时刻') {
- // if (ele.cycleTimeData.length == 10) {
- // ele.cycleTimeData.pop();
- // }
- // // item.time = item.time.split('.')[0];
- // // if (item.type_data != null) {
- // // // 固定时刻的类型数据
- // // _thatN.typeCycleTimeData = item;
- // // }
- // // ele.cycleTimeData.unshift(item);
- // // _thatN.$nextTick(() => {
- // if (_thatN.$refs.typeChartRef1 != undefined) {
- // // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
- // // 轮循固定时刻生成的各类组件
- // for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
- // let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
- // if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
-
- // if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
- // _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻')
- // }
- // if (itemTypeChartRef1.echartArr.includes('数值')) {
- // _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
- // }
-
- // if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
- // // 数据改变重新渲染柱状图
- // itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
- // }
- // if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
- // // 数据改变重新渲染饼图
- // itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
- // }
- // if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef.drawBar) {
- // itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
- // }
- // if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
- // itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
- // }
-
- // }
- // }
-
- // // });
- // }
- // }
- // // });
- // });
- // }
},
- immediate: true
+ immediate: true,
+ deep: true
},
//固定间隔
cycleStatisticsData: {
handler(newVal) {
// console.log('固定间隔', newVal);
- if (newVal != undefined && newVal.length != 0 && this.sectionData) {
- var that = this;
- that.classify.forEach((ele, index) => {
- newVal.forEach((item) => {
- if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
- if (ele.cycleStatisticsData.length == 10) {
- ele.cycleStatisticsData.pop();
- }
-
- if (this.$route.query.type == '离线视频') {
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- } else {
- item.time = item.time.split('.')[0];
- }
- if (item.type_data != null) {
- that.typeCycleStatistics = item;
- }
- ele.cycleStatisticsData.unshift(item);
- if (that.$refs.typeChartRef2 != undefined) {
- for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
- let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
-
- if (
- itemTypeChartRef2.length != 0 &&
- itemTypeChartRef2.dataArr != undefined &&
- itemTypeChartRef2.dataArr.length != 0
- ) {
- if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
- that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
- that.$refs.typeChartRef2[i].dataArr,
- that.$refs.typeChartRef2[i].componentName.split('_')[0],
- '固定间隔'
- );
- }
- if (itemTypeChartRef2.echartArr.includes('数值')) {
- that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
- }
- if (itemTypeChartRef2.echartArr.includes('表格')) {
- that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
- }
- // //console.log(item,'组件数据');
- if (
- itemTypeChartRef2.echartArr.includes('直方图') &&
- itemTypeChartRef2.$refs.barChartRef.drawBar
- ) {
- // 数据改变重新渲染柱状图
- // //console.log(item, '组件');
- itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
- }
- if (
- itemTypeChartRef2.echartArr.includes('饼状图') &&
- itemTypeChartRef2.$refs.pieChartRef.drawPie
- ) {
- // 数据改变重新渲染饼图
- itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
- }
- if (
- itemTypeChartRef2.echartArr.includes('均值图') &&
- itemTypeChartRef2.$refs.avgChartRef != undefined
- ) {
- itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
- }
- if (
- itemTypeChartRef2.componentName.includes('OD') &&
- itemTypeChartRef2.$refs.ODChartRef != undefined &&
- itemTypeChartRef2.dataArr[0].ob_data &&
- itemTypeChartRef2.dataArr[0].ob_data.length != 0
- ) {
- itemTypeChartRef2.$refs.ODChartRef.drawThermalChart(
- itemTypeChartRef2.dataArr[0].ob_data,
- itemTypeChartRef2.startEndData
- );
- }
- }
- }
- }
- }
- });
- });
+ if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+ this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
}
- // else {
-
- // var _that = this
- // _that.classify.forEach(ele => {
- // if (ele.timeMode == '固定间隔') {
- // if (ele.cycleStatisticsData.length == 10) {
- // ele.cycleStatisticsData.pop();
- // }
- // // item.time = item.time.split('.')[0];
- // // if (item.type_data != null) {
- // // _that.typeCycleStatistics = item;
- // // }
- // // ele.cycleStatisticsData.unshift(item);
- // if (_that.$refs.typeChartRef2 != undefined) {
- // for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
- // let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
- // // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
- // if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
- // // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
- // if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
- // _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔')
- // }
- // if (itemTypeChartRef2.echartArr.includes('数值')) {
- // _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
- // }
- // // //console.log(item,'组件数据');
- // if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
- // // 数据改变重新渲染柱状图
- // // //console.log(item, '组件');
- // itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
- // }
- // if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
- // // 数据改变重新渲染饼图
- // itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
- // }
-
- // // if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
- // // item.$refs.avgChartRef.drawBar(item.dataArr[0])
- // // }
- // if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
- // itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
- // }
- // }
-
- // }
-
- // }
- // }
-
- // });
- // }
},
- immediate: true
+ immediate: true,
+ deep: true
},
//周期统计实时累计数据主题
cycleAccumulateData: {
handler(newVal) {
// console.log('周期统计实时累计数据主题', newVal);
- if (newVal != undefined && newVal.length != 0 && this.sectionData) {
- var that = this;
- that.classify.forEach((ele, index) => {
- newVal.forEach((item) => {
- if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
- // if (ele.cycleStatisticsData.length == 10) {
- // ele.cycleStatisticsData.pop();
- // }
-
- if (this.$route.query.type == '离线视频') {
- var timeNew = item.time.split('.')[0];
- var dateLength = timeNew.length;
- var key = timeNew.substring(dateLength - 8, dateLength);
- item.time = key;
- } else {
- item.time = item.time.split('.')[0];
- }
- if (item.type_data != null) {
- that.typeCycleStatistics = item;
- }
- // ele.cycleStatisticsData.unshift(item);
- if (that.$refs.typeChartRef2 != undefined) {
- for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
- let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
-
- if (
- itemTypeChartRef2.length != 0 &&
- itemTypeChartRef2.dataArr != undefined &&
- itemTypeChartRef2.dataArr.length != 0
- ) {
- //console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
- if (
- itemTypeChartRef2.echartArr.includes('数值') &&
- itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
- ) {
- //只需要修改数值组件,逻辑存在问题
- itemTypeChartRef2.getcycleAccumulateDataArr([item]);
- }
- }
- }
- }
- }
- });
- });
+ if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+ //实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
+ this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
}
},
immediate: true
diff --git a/src/views/sensorFusion/index.vue b/src/views/sensorFusion/index.vue
index e038b3c..20bd0a4 100644
--- a/src/views/sensorFusion/index.vue
+++ b/src/views/sensorFusion/index.vue
@@ -797,7 +797,7 @@
<el-empty
:image-size="100"
description="暂无数据"
- v-if="e.triggerDataList == null"
+ v-if="!e.triggerDataList || e.triggerDataList.length == 0"
></el-empty>
<chartsPie
:echartsRef="'echartsPie' + e.duocgqrhpzId"
@@ -806,7 +806,7 @@
:dataList="e.triggerDataList"
:timeMode="'实时触发'"
:intersectionName="intersectionName"
- v-else-if="e.triggerDataList != null"
+ v-else
/>
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -854,7 +854,7 @@
<el-empty
:image-size="100"
description="暂无数据"
- v-if="e.triggerDataList == null"
+ v-if="!e.triggerDataList || e.triggerDataList.length == 0"
></el-empty>
<chartsBar
:echartsRef="'echartsBar' + e.duocgqrhpzId"
@@ -863,7 +863,7 @@
:timeMode="'实时触发'"
:intersectionName="intersectionName"
:dataList="e.triggerDataList"
- v-else-if="e.triggerDataList != null"
+ v-else
/>
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -911,7 +911,7 @@
<el-empty
:image-size="100"
description="暂无数据"
- v-if="e.triggerDataList == null"
+ v-if="!e.triggerDataList || e.triggerDataList.length == 0"
></el-empty>
<meanValue
:echartsRef="'meanValue' + e.duocgqrhpzId"
@@ -919,7 +919,7 @@
:chatShowType="chatShowType"
:intersectionName="intersectionName"
:dataList="e.triggerDataList"
- v-else-if="e.triggerDataList != null"
+ v-else
/>
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -965,7 +965,7 @@
<el-empty
:image-size="100"
description="暂无数据"
- v-if="e.triggerDataList == null"
+ v-if="!e.triggerDataList || e.triggerDataList.length == 0"
></el-empty>
<thermalOD
:echartsRef="'thermalOD' + e.duocgqrhpzId"
@@ -977,7 +977,7 @@
:endName="e.endSectionNames"
:dataList="e.triggerDataList"
:intersectionName="intersectionName"
- v-else-if="e.triggerDataList != null"
+ v-else
/>
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -1420,278 +1420,9 @@ export default {
activeNames: ['1'], // 视频折叠
intersectionName: [], //数据分析名称
videoList: [],
- intersectionList: [
- // {
- // intersectionLabel: '路口数据分析',
- // intersectionChildList: [
- // {
- // intersectionTitle: '北进口',
- // children: [
- // {
- // name: '卡片区',
- // twoContentList: [
- // {
- // parentTitle: '左转',
- // children: [
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // },
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // },
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // },
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // },
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // }
- // ]
- // },
- // {
- // parentTitle: '右转',
- // children: [
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // },
- // {
- // childrenTitle: '速度',
- // childrenSmallTitle: '速度',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // },
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // },
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // }
- // ]
- // },
- // {
- // parentTitle: '直行',
- // children: [
- // {
- // childrenTitle: '流量',
- // childrenSmallTitle: '流量',
- // count: 1,
- // time: '2023-08-25 11:26:10'
- // }
- // ]
- // }
- // ]
- // },
- // {
- // name: '图表区',
- // echartsList: [
- // {
- // echartsType: '线性',
- // name: '视频X82_线性图表'
- // },
- // {
- // echartsType: '线性2',
- // name: '视频X82_表格'
- // },
- // {
- // echartsType: '线性2',
- // name: '视频X82_饼图'
- // }
- // ]
- // }
- // ]
- // }
- // ]
- // }
- ],
+ intersectionList: [],
tabPosition: '1',
- threeData: [
- // {
- // id: 1,
- // label: '路口数据分析页',
- // showInput: false,
- // children: [
- // {
- // id: 2,
- // label: '北进口',
- // showInput: false,
- // children: [
- // {
- // id: 3,
- // label: '卡片区',
- // children: [
- // {
- // id: 4,
- // label: '左车道',
- // showInput: false,
- // children: [
- // {
- // id: 5,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 6,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 7,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 8,
- // label: '空间组件-指标组件'
- // }
- // ]
- // },
- // {
- // id: 9,
- // label: '中车道',
- // showInput: false,
- // children: [
- // {
- // id: 10,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 11,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 12,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 13,
- // label: '空间组件-指标组件'
- // }
- // ]
- // }
- // ]
- // },
- // {
- // id: 14,
- // label: '图表区',
- // children: [
- // {
- // id: 15,
- // label: '流量组件-曲线图'
- // },
- // {
- // id: 16,
- // label: '速度组件-表格'
- // }
- // ]
- // }
- // ]
- // }
- // ]
- // },
- // {
- // id: 2,
- // label: '路段数据分析页',
- // showInput: false,
- // children: [
- // {
- // id: 3,
- // label: '北进口',
- // showInput: false,
- // children: [
- // {
- // id: 4,
- // label: '卡片区',
- // children: [
- // {
- // id: 5,
- // label: '左车道',
- // showInput: false,
- // children: [
- // {
- // id: 6,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 7,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 8,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 9,
- // label: '空间组件-指标组件'
- // }
- // ]
- // },
- // {
- // id: 10,
- // label: '中车道',
- // showInput: false,
- // children: [
- // {
- // id: 11,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 12,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 13,
- // label: '空间组件-指标组件'
- // },
- // {
- // id: 14,
- // label: '空间组件-指标组件'
- // }
- // ]
- // }
- // ]
- // },
- // {
- // id: 15,
- // label: '图表区',
- // children: [
- // {
- // id: 16,
- // label: '流量组件-曲线图'
- // },
- // {
- // id: 17,
- // label: '速度组件-表格'
- // }
- // ]
- // }
- // ]
- // }
- // ]
- // }
- ],
+ threeData: [],
defaultProps: {
children: 'children',
label: 'label'
@@ -1843,9 +1574,9 @@ export default {
this.addSelectOptionField(this.intersectionList);
// this.addTriggerDataField(this.intersectionList);
//mqtt订阅
- // this.$nextTick(() => {
- this.getMqtt();
- // });
+ this.$nextTick(() => {
+ this.getMqtt();
+ });
//console.log(this.intersectionList, 'this.intersectionList');
//开发路口默认展开第一个
@@ -2963,7 +2694,7 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
- // console.log('实时触发trigger-', msgN);
+ // console.log('实时触发trigger-', JSON.stringify(msgN));
for (let j = 0; j < msgN.length; j++) {
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
@@ -3110,6 +2841,10 @@ export default {
// originalSpeed: msgN[j].speed
// });
} else if (msgN[j].component_type == '速度') {
+ // if(msgN[j].component_name=='速度_3'){
+ // console.log('实时触发trigger-速度', msgN[j]);
+ // }
+
//卡片区
let map = {
speed: msgN[j].speed,
@@ -4243,12 +3978,12 @@ export default {
width: 440px;
height: 282px;
}
- // .echarts0 {
- // position: absolute;
- // width: 440px;
- // height: 282px;
- // z-index: 999;
- // }
+ .echarts0 {
+ // position: absolute;
+ // width: 440px;
+ // height: 282px;
+ z-index: 999;
+ }
// .echarts1 {
// position: absolute;
// width: 440px;