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

更改

wangqin
zhangzhang 1 year ago
parent
9b07f50e03
commit
dc4441da64
4 changed files with 216 additions and 208 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
  2. 408
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
  3. 5
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
  4. 5
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue

4
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
View File

@ -2,8 +2,8 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'日累计感知事件趋势'"></WgtTitle> <WgtTitle :title="'日累计感知事件趋势'"></WgtTitle>
<div class="board"> <div class="board">
<Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty> <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
<div v-else class="charts keep-ratio " id="daytotal"></div> <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="daytotal"></div>
</div> </div>
</div> </div>
</template> </template>

408
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
View File

@ -1,218 +1,224 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var options = { var options = {
color: ["#5090FF", "#01B3E4"],
tooltip: {
trigger: "axis",
textStyle: {
color: "#333",
},
},
grid: {
left: "0%",
right: "5%",
bottom: "10%",
top: "30px",
containLabel: true,
},
color: ["#5090FF", "#01B3E4"], dataZoom: [
tooltip: { {
trigger: "axis", type: "slider",
textStyle: { xAxisIndex: 0,
color: "#333", startValue: 0,
}, endValue: 7,
}, filterMode: "filter",
grid: { height: 14,
left: "2%", bottom: 5,
right: "5%", handleSize: "200%",
bottom: "10%", handleIcon:
top: "30px", "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
containLabel: true, // 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
}, handleStyle: {
color: "#0BDADA",
dataZoom: [ borderWidth: 0,
{
type: 'slider',
xAxisIndex: 0,
startValue: 0,
endValue: 7,
filterMode: 'filter',
height: 14,
bottom: 5,
handleSize: '200%',
handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
// 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
handleStyle: {
color: '#0BDADA',
borderWidth: 0,
},
moveHandleStyle: {
color: 'transparent',
borderWidth: 0,
opacity: 0,
},
selectedDataBackground: {
color: 'transparent',
areaStyle: {
opacity: 0
},
lineStyle: {
opacity: 0
}
},
backgroundColor: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(71, 180, 124, 0.70)'
},
{
offset: 1,
color: 'rgba(71, 180, 124, 0)'
}
],
false
),
// shadowColor: 'rgba(255, 214, 62, 0.10)',
// shadowBlur: 10
fillerColor: 'transparent',
borderColor: 'transparent',
textStyle: {
color: 'transparent'
},
dataBackground: {
areaStyle: {
opacity: 0
},
lineStyle: {
opacity: 0
}
}
}
],
legend: {
show: true,
icon: "rect",
orient: "horizontal",
left: "right",
itemWidth: 12,
itemHeight: 12,
formatter: ["{a|{name}}"].join("\n"),
textStyle: {
fontSize: 12,
color: "#6A93B9",
height: 8,
rich: {
a: {
verticalAlign: "bottom",
},
},
}, },
data: ["魅力值"], moveHandleStyle: {
}, color: "transparent",
xAxis: { borderWidth: 0,
type: "category", opacity: 0,
axisLine: {
lineStyle: {
color: "#BDD8FB",
fontSize: 12,
},
}, },
axisLabel: { selectedDataBackground: {
// interval:0, color: "transparent",
color: "#BDD8FB", areaStyle: {
fontSize: 12, opacity: 0,
},
lineStyle: {
opacity: 0,
},
}, },
axisTick: { backgroundColor: new echarts.graphic.LinearGradient(
show: false, 0,
0,
1,
0,
[
{
offset: 0,
color: "rgba(71, 180, 124, 0.70)",
},
{
offset: 1,
color: "rgba(71, 180, 124, 0)",
},
],
false
),
// shadowColor: 'rgba(255, 214, 62, 0.10)',
// shadowBlur: 10
fillerColor: "transparent",
borderColor: "transparent",
textStyle: {
color: "transparent",
}, },
data: [ dataBackground: {
"0点至1点", areaStyle: {
"1点至2点", opacity: 0,
"2点至3点", },
"3点至4点", lineStyle: {
"4点至5点", opacity: 0,
"5点至6点", },
"6点至7点",
"7点至8点",
"8点至9点",
"9点至10点",
"10点至11点",
"11点至12点",
"12点至13点",
"13点至14点",
"14点至15点",
"15点至16点",
"16点至17点",
"17点至18点",
"18点至19点",
"19点至20点",
"20点至21点",
"21点至22点",
"22点至23点",
"23点至24点",
],
},
yAxis: {
type: "value",
min: 0,
minInterval: 1,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
}, },
splitLine: { },
lineStyle: { ],
color: "rgba(255, 255, 255, 0.15)", legend: {
// type: 'dashed', // dotted 虚线 show: true,
}, icon: "rect",
orient: "horizontal",
left: "right",
itemWidth: 12,
itemHeight: 12,
formatter: ["{a|{name}}"].join("\n"),
textStyle: {
fontSize: 12,
color: "#6A93B9",
height: 8,
rich: {
a: {
verticalAlign: "bottom",
},
}, },
splitArea: { show: false }, },
axisLine: { data: ["魅力值"],
show: false, },
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#BDD8FB",
fontSize: 12,
}, },
axisTick: { },
show: false, axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
},
data: [
"0点至1点",
"1点至2点",
"2点至3点",
"3点至4点",
"4点至5点",
"5点至6点",
"6点至7点",
"7点至8点",
"8点至9点",
"9点至10点",
"10点至11点",
"11点至12点",
"12点至13点",
"13点至14点",
"14点至15点",
"15点至16点",
"16点至17点",
"17点至18点",
"18点至19点",
"19点至20点",
"20点至21点",
"21点至22点",
"22点至23点",
"23点至24点",
],
},
yAxis: {
type: "value",
min: 0,
minInterval: 1,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.15)",
// type: 'dashed', // dotted 虚线
}, },
axisLabel: { },
fontSize: 12, splitArea: { show: false },
fontFamily: "Bebas", axisLine: {
color: "#BDD8FB", show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 12,
fontFamily: "Bebas",
color: "#BDD8FB",
},
},
series: [
{
type: "line",
// symbol: "none",
showSymbol: false,
smooth: true, // 是否曲线
name: "", // 图例对应类别
data: [
400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900,
400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900,
], // 纵坐标数据
lineStyle: {
color: "#39B1FF",
}, },
}, areaStyle: {
series: [ // 区域颜色
{ // color: new graphic.LinearGradient(0, 0, 0, 1, [
type: "line", // {
// symbol: "none", // offset: 0,
showSymbol: false, // color: "#5090FF",
smooth: true, // 是否曲线 // },
name: "", // 图例对应类别 // {
data: [400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900], // 纵坐标数据 // offset: 1,
lineStyle: { // color: "#1057E5",
color: "#39B1FF" // },
}, // ]),
areaStyle: { color: {
// 区域颜色 type: "linear",
// color: new graphic.LinearGradient(0, 0, 0, 1, [ x: 0, //右
// { y: 0, //下
// offset: 0, x2: 0, //左
// color: "#5090FF", y2: 1, //上
// }, colorStops: [
// { {
// offset: 1, offset: 0.1,
// color: "#1057E5", color: "#39B1FF", // 0% 处的颜色
// }, },
// ]), {
color: { offset: 1,
type: 'linear', opacity: 0.01,
x: 0, //右 color: "#39b1ff01", // 100% 处的颜色
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: '#39B1FF' // 0% 处的颜色
},
{
offset: 1,
opacity: 0.01,
color: '#39b1ff01' // 100% 处的颜色
}
]
}, },
}, ],
},
}, },
},
], ],
}; };
export default options; export default options;

5
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
View File

@ -2,8 +2,9 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle> <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
<div class="board"> <div class="board">
<Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty> <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
<div v-else class="charts keep-ratio " id="monthStatistics"></div> <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="monthStatistics">
</div>
</div> </div>
</div> </div>
</template> </template>

5
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
View File

@ -6,8 +6,9 @@
<div class="checked">路段车流量Top10</div> <div class="checked">路段车流量Top10</div>
<div>断面交通量Top10</div> <div>断面交通量Top10</div>
</div> --> </div> -->
<Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty> <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
<div v-else class="charts keep-ratio" id="situationEchartBox"></div> <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio"
id="situationEchartBox"></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save