mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

develop
wangsixiang 1 year ago
parent
ec6fa4746a eeefff7c84
commit
3dbe99bc41
2 changed files with 494 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 316
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js
  2. 175
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue

316
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js
View File

@ -0,0 +1,316 @@
import * as echarts from "echarts";
var options = {
tooltip: {
show: true,
trigger: "axis",
position: function (point, params, dom, rect, size) {
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else {
// 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else {
// 上边放得下
y = pointY - boxHeight;
}
return [point[0] + 10, y];
},
formatter: (params) => {
let name = params[0].name.replace(/-/g, "")
let name1 = '济南-' + name
let name2 = '菏泽-' + name
if(params[0].axisIndex === 1){
name1 = '菏泽-' + name
name2 = '济南-' + name
}
let tip = `${name1}<br/>`;
params.forEach((item,index) =>{
if (item.axisIndex === 0){
tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value} 辆</span><br/>`
}
})
tip = tip + `<br/>${name2}<br/>`
params.forEach((item,index) =>{
if (item.axisIndex === 1){
tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value} 辆</span><br/>`
}
})
return tip;
},
},
axisPointer: {
link: [
{
xAxisIndex: "all",
},
],
},
legend: {
top: 0,
right: 0,
icon:'rect',
textStyle: {
color: "#fff",
},
itemHeight: 5,
itemWidth: 10,
data: [
{
name: "本期车流量",
itemStyle: {
color: '#6DBBFB'
}
},{
name: "去年同期",
itemStyle: {
color: '#5FA52B'
}
},
],
},
grid: [
{
left: 60,
top: '25%',
right: 10,
height: "35%",
},
{
left: 60,
right: 10,
top: "60%",
height: "35%",
},
],
xAxis: [
{
type: "category",
data: [],
axisLabel: {
show:false
},
z: 10,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
{
onZero: true,
axisLine: { show: false },
gridIndex: 1,
type: "category",
z: 10,
data: [],
position: "top",
axisLabel: {
color: "#fff",
margin: -7,
// formatter: function (params) {
// return `${params.substr(0,params.length-2)}\n\n${params.substr(params.length-2)}`;
// },
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
name: "车流量 ",
type: "value",
axisLabel: {
color: "#FFF",
},
axisLine: {
show: true,
lineStyle: {
color: "#00D1FF",
},
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
name: "",
type: "value",
inverse: true,
axisLabel: {
color: "#FFF",
},
axisLine: {
show: true,
lineStyle: {
color: "#06AED3",
},
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "本期车流量",
type: "line",
symbolSize: 0,
lineStyle: {
color: "#06AED3",
},
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: "#06AED300",
},
{
offset: 0,
color: "#06AED3",
},
],
false
),
},
},
data: [
57, 36, 56, 95, 125, 194, 94, 94, 74, 34, 125, 194, 94, 94, 74, 34,
],
},
{
name: "去年同期",
type: "line",
symbol: 'none',
smooth: true,
lineStyle: {
type:'dashed',
width: 1
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: "#5FA52B00",
},
{
offset: 0,
color: "#5FA52B55",
},
],
false
),
},
},
data: [
94, 74, 34, 125, 194, 94, 94, 74, 34,57, 36, 56, 95, 125, 194, 94,
],
},
{
name: "本期车流量",
type: "line",
symbol: "circle",
symbolSize: 0,
xAxisIndex: 1,
yAxisIndex: 1,
smooth: true,
lineStyle: {
color: "#06AED3",
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#06AED300",
},
{
offset: 1,
color: "#06AED3",
},
],
false
),
},
},
data: [
67, 36, 56, 195, 25, 194, 94, 94, 74, 21, 195, 25, 194, 94, 94, 74, 21,
],
},
{
name: "去年同期",
type: "line",
symbol: 'none',
smooth: true,
xAxisIndex: 1,
yAxisIndex: 1,
lineStyle: {
type:'dashed',
width: 1
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: "#5FA52B00",
},
{
offset: 0,
color: "#5FA52B55",
},
],
false
),
},
},
data: [
195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21,
],
},
],
};
export default options;

175
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue
View File

@ -21,7 +21,12 @@
</div>
<!-- 内容 -->
<div class="body">
<Table :data="tableData" :span-method="mergeRow" >
<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">
@ -57,6 +62,9 @@ import Form from "@screen/components/FormConfig";
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',
@ -87,9 +95,20 @@ export default {
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);
@ -126,7 +145,8 @@ export default {
data: this.searchData,
});
},
initData() {
async initData() {
if(!this.searchData.timestamp){
this.searchData.timestamp = moment().format('YYYY-MM-DD') + " 00:00:01"
}
@ -140,6 +160,7 @@ export default {
}).then((result) => {
this.columnList = result.data.columnList
this.tableData = result.data.rowList
this.loadCharts(result.data)
});
},
onSizeChange(pageSize) {
@ -147,12 +168,160 @@ export default {
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 => {
stakeMarkMap.set(item.stakeMark, item);
});
data.rowList.forEach(item => {
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])
})
debugger
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,
})
}
})
})
debugger
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%;

Write Preview
Loading…
Cancel
Save