You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
393 lines
10 KiB
393 lines
10 KiB
<template>
|
|
<div class='board_record'>
|
|
<!-- 搜索栏 -->
|
|
<div class="filter">
|
|
<div>
|
|
<ButtonGradient @click.native="handleExport">
|
|
<template #prefix>
|
|
<img src="@screen/images/export.svg" />
|
|
</template>
|
|
导出
|
|
</ButtonGradient>
|
|
<ButtonGradient @click="onRefreshForm" class="refresh-btn">
|
|
<template #prefix>
|
|
<img src="@screen/images/refresh.svg" />
|
|
</template>
|
|
刷新
|
|
</ButtonGradient>
|
|
</div>
|
|
|
|
<InputSearch ref="searchComp" style="width: 400px" :formList="searchFormList" @handleSearch="handleSearch" />
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="body">
|
|
<div class="flowstate">
|
|
<div class="tag1" >方向：济南<span>←</span></div>
|
|
<div class="tag2"><span>→</span>方向：菏泽</div>
|
|
<div class="chartsFs " id="surveyChart"></div>
|
|
</div>
|
|
<Table :data="tableData" :span-method="mergeRow" :height="'50%'">
|
|
|
|
<ElTableColumn label="设备名称" prop="stakeMark" width="200" align="center" header-align="center" >
|
|
<template slot-scope="scope">
|
|
<span>一类交调站{{scope.row.stakeMark}}</span>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="方向" prop="direction" align="center" header-align="center" width="120">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.direction == '1'">菏泽</span>
|
|
<span v-if="scope.row.direction == '3'">济南</span>
|
|
<span v-if="scope.row.direction == '2'">合计</span>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn v-for="item in columnList" :label="item.label" :prop="item.key" min-width="80" align="center" header-align="center" />
|
|
<ElTableColumn label="合计" prop="total" width="150" align="center" header-align="center" />
|
|
</Table>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
|
|
import Pagination from '@screen/components/Pagination.vue';
|
|
import Table from '@screen/components/Table.vue';
|
|
import request from "@/utils/request";
|
|
import BoardRecordPreview from '@screen/components/infoBoard/BoardRecordPreview.vue'
|
|
import InputSearch from "@screen/components/InputSearch/index.vue";
|
|
import { searchFormList } from "./data";
|
|
import { delay, exportFile, confirm } from "@screen/utils/common";
|
|
import Button from "@screen/components/Buttons/Button.vue";
|
|
import Form from "@screen/components/FormConfig/index";
|
|
import Dialog from "@screen/components/Dialog/index.vue";
|
|
import { mapState } from "vuex";
|
|
import moment from 'moment';
|
|
import * as echarts from "echarts";
|
|
import chartOptions from "./charts";
|
|
|
|
|
|
export default {
|
|
name: 'Survey',
|
|
components: {
|
|
ButtonGradient,
|
|
Pagination,
|
|
Table,
|
|
Button,
|
|
Form,
|
|
Dialog,
|
|
BoardRecordPreview,
|
|
InputSearch
|
|
},
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
searchFormList,
|
|
total: 20,
|
|
searchData: {
|
|
},
|
|
columnList:[],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["menu"]),
|
|
},
|
|
created() {
|
|
this.initData();
|
|
},
|
|
mounted(){
|
|
this.$nextTick(()=>{
|
|
if(!this.myChart){
|
|
this.myChart = echarts.init(document.getElementById("surveyChart"));
|
|
}
|
|
this.initData();
|
|
// this.searchQuery()
|
|
})
|
|
|
|
window.addEventListener("resize", () => {
|
|
if(this.myChart)
|
|
this.myChart.resize();
|
|
});
|
|
},
|
|
methods: {
|
|
mergeRow({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 0) {
|
|
const start = this.tableData.findIndex(data => data.stakeMark === row.stakeMark);
|
|
if (start !== -1) {
|
|
const count = this.tableData.filter((data, index) => index >= start && data.stakeMark === row.stakeMark).length;
|
|
if (rowIndex === start) {
|
|
return [count, 1]; // 返回要合并的行数和列数
|
|
} else {
|
|
return [0, 0]; // 不合并
|
|
}
|
|
}
|
|
}
|
|
return [1, 1];
|
|
},
|
|
|
|
onRefreshForm(){
|
|
this.searchData.pageNum = 1;
|
|
this.$refs.searchComp.handleResetForm();
|
|
},
|
|
handleSearch(data) {
|
|
if (data.type == 'range'){
|
|
data.timestamp = data.timeRange[0] + " 00:00:00";
|
|
data.endTime = data.timeRange[1] + " 23:59:59";
|
|
} else {
|
|
data.timestamp = data.startTime + " 00:00:01";
|
|
}
|
|
// this.searchData = { ...data };
|
|
this.searchData.type = data.type
|
|
this.searchData.timestamp = data.timestamp
|
|
this.searchData.startTime = data.startTime
|
|
this.searchData.endTime = data.endTime
|
|
this.initData();
|
|
},
|
|
indexMethod(index) {
|
|
return this.searchData.pageSize*(this.searchData.pageNum-1) + index + 1;
|
|
},
|
|
//
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
exportFile({
|
|
url: "/trafficSurveyData/dcTrafficSurveyData/export",
|
|
filename: "综合查询",
|
|
data: this.searchData,
|
|
});
|
|
},
|
|
async initData() {
|
|
|
|
if(!this.searchData.timestamp){
|
|
this.searchData.timestamp = moment().format('YYYY-MM-DD') + " 00:00:01"
|
|
}
|
|
if(!this.searchData.type){
|
|
this.searchData.type = 'day'
|
|
}
|
|
request({
|
|
url: `/trafficSurveyData/dcTrafficSurveyData/list`,
|
|
method: "get",
|
|
params: this.searchData,
|
|
}).then((result) => {
|
|
this.columnList = result.data.columnList
|
|
this.tableData = result.data.rowList
|
|
this.loadCharts(result.data)
|
|
});
|
|
},
|
|
onSizeChange(pageSize) {
|
|
this.tableData = [];
|
|
this.searchData.pageSize = pageSize;
|
|
this.searchData.pageNum = 1;
|
|
this.initData();
|
|
},
|
|
loadCharts(data){
|
|
|
|
const xAxis = data.columnList.map(x=>x.label);
|
|
chartOptions.xAxis[0].data = xAxis;
|
|
chartOptions.xAxis[1].data = xAxis;
|
|
|
|
let color = ["#2ef7f5", "#4780f5", "#b346f6", "#25ea77", "#d2040a", "#eadb06", "#0600f2", "#e67500"]
|
|
let series = []
|
|
let legendData = []
|
|
const stakeMarkMap = new Map();
|
|
data.rowList.forEach(item => {
|
|
if (item.direction != '2'){
|
|
stakeMarkMap.set(item.stakeMark, item);
|
|
}
|
|
});
|
|
data.rowList.forEach(item => {
|
|
if (item.direction != '2') {
|
|
const stakeMark = item.stakeMark;
|
|
if (!stakeMarkMap[stakeMark]) {
|
|
stakeMarkMap[stakeMark] = [];
|
|
}
|
|
stakeMarkMap[stakeMark].push(item);
|
|
}
|
|
});
|
|
|
|
stakeMarkMap.keys().forEach((stakeMark,index) =>{
|
|
|
|
legendData.push({
|
|
name: stakeMark,
|
|
itemStyle: {
|
|
color: color[index]
|
|
}
|
|
})
|
|
stakeMarkMap[stakeMark].forEach(stakeMarkData => {
|
|
let seriesData = []
|
|
data.columnList.forEach(x =>{
|
|
seriesData.push(stakeMarkData[x.key])
|
|
})
|
|
|
|
if (stakeMarkData.direction == '3'){
|
|
series.push({
|
|
name: stakeMark,
|
|
type: "line",
|
|
symbolSize: 0,
|
|
lineStyle: {
|
|
color: color[index],
|
|
},
|
|
smooth: true,
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: "#06AED300",
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: color[index],
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
data: seriesData,
|
|
},)
|
|
} else {
|
|
series.push({
|
|
name: stakeMark,
|
|
type: "line",
|
|
symbol: "circle",
|
|
symbolSize: 0,
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: color[index],
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#06AED300",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: color[index],
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
data: seriesData,
|
|
})
|
|
}
|
|
})
|
|
|
|
})
|
|
chartOptions.series = series
|
|
chartOptions.legend.data = legendData
|
|
this.myChart.setOption(chartOptions);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.flowstate {
|
|
width: 100%;
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.chartsFs {
|
|
height: 35vh;
|
|
width: 200vh;
|
|
}
|
|
|
|
.tag1 {
|
|
position: absolute;
|
|
margin-top: -15%;
|
|
margin-left: 2%;
|
|
font-size: 12px;
|
|
span{
|
|
color: #8be8fe;
|
|
font-weight: bold;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.tag2 {
|
|
position: absolute;
|
|
font-size: 12px;
|
|
margin-top: 15%;
|
|
margin-left: 90%;
|
|
span{
|
|
color: #8be8fe;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.board_record {
|
|
width:100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.filter {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
>div {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
}
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 15px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.board_shower{
|
|
margin: 4px;
|
|
}
|
|
::v-deep .el-carousel__indicators--horizontal{
|
|
line-height: 0; height: 16px;
|
|
.el-carousel__indicator--horizontal{
|
|
padding: 7px 4px;
|
|
}
|
|
}
|
|
::v-deep .el-table__cell div.cell {
|
|
padding: 0 10px !important;
|
|
}
|
|
}
|
|
.upload-file{
|
|
position: absolute;
|
|
width: 120px;
|
|
height: 120px;
|
|
margin-left: 55%;
|
|
bottom: 210px;
|
|
z-index: 9999;
|
|
}
|
|
::v-deep .el-upload-dragger{
|
|
background-color: #104c66 !important;
|
|
border: 1px solid #359cbc !important;
|
|
|
|
}
|
|
</style>
|
|
|