Browse Source

更改禅道bug

wangqin
zhangzhang 2 years ago
parent
commit
bab15f9831
  1. 105
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
  2. 84
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js
  3. 359
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js
  4. 298
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js
  5. 175
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
  6. 45
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
  7. 281
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
  8. 236
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue
  9. 14
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
  10. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue

105
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js

@ -1,3 +1,5 @@
import { options } from "runjs";
export const source = { export const source = {
label: "来源:", label: "来源:",
key: "eventSource", key: "eventSource",
@ -178,11 +180,11 @@ export const startTime = {
required: true, required: true,
isAlone: true, isAlone: true,
type: "datePicker", type: "datePicker",
options:{ options: {
type: "datetime", type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss', format: "yyyy-MM-dd HH:mm:ss",
valueFormat: 'yyyy-MM-dd HH:mm:ss' valueFormat: "yyyy-MM-dd HH:mm:ss",
} },
}; };
export const expectedEndTime = { export const expectedEndTime = {
@ -190,11 +192,11 @@ export const expectedEndTime = {
key: "estimatedEndTime", key: "estimatedEndTime",
isAlone: true, isAlone: true,
type: "datePicker", type: "datePicker",
options:{ options: {
type: "datetime", type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss', format: "yyyy-MM-dd HH:mm:ss",
valueFormat: 'yyyy-MM-dd HH:mm:ss' valueFormat: "yyyy-MM-dd HH:mm:ss",
} },
}; };
export const eventLevel = { export const eventLevel = {
@ -202,31 +204,31 @@ export const eventLevel = {
key: "eventLevel", key: "eventLevel",
required: true, required: true,
type: "select", type: "select",
options:{ options: {
options:[ options: [
{ {
key: 1, key: 1,
label: '一级' label: "一级",
}, },
{ {
key: 2, key: 2,
label: '二级' label: "二级",
}, },
{ {
key: 3, key: 3,
label: '三级' label: "三级",
}, },
{ {
key: 4, key: 4,
label: '四级' label: "四级",
}, },
{ {
key: 5, key: 5,
label: '五级' label: "五级",
}, },
], ],
disabled: true disabled: true,
} },
}; };
export const laneOccupancy = { export const laneOccupancy = {
@ -334,11 +336,11 @@ export const eventType = {
key: "11", key: "11",
label: "其他事件", label: "其他事件",
}, },
] ],
} },
}; };
export const vehicleCondition = (keyPrefix = 'dcEventAccident') => ({ export const vehicleCondition = (keyPrefix = "dcEventAccident") => ({
label: "车辆情况:", label: "车辆情况:",
key: "key25", key: "key25",
isAlone: true, isAlone: true,
@ -389,7 +391,7 @@ export const vehicleCondition = (keyPrefix = 'dcEventAccident') => ({
}, },
}); });
export const casualties = (keyPrefix = 'dcEventAccident') => ({ export const casualties = (keyPrefix = "dcEventAccident") => ({
label: "伤亡情况:", label: "伤亡情况:",
key: "key0036", key: "key0036",
isAlone: true, isAlone: true,
@ -485,7 +487,7 @@ export const isInTunnel = {
}; };
export const freeway = { export const freeway = {
label: "高速公路:", label: "路线:",
required: true, required: true,
key: "roadId", key: "roadId",
type: "select", type: "select",
@ -495,8 +497,8 @@ export const freeway = {
// key: "1", // key: "1",
// label: "济菏高速", // label: "济菏高速",
// }, // },
] ],
} },
}; };
export const weatherCondition = { export const weatherCondition = {
@ -717,49 +719,49 @@ export const eventHappenTime = {
key: "startTime", key: "startTime",
required: true, required: true,
type: "datePicker", type: "datePicker",
options:{ options: {
type: "datetime", type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss', format: "yyyy-MM-dd HH:mm:ss",
valueFormat: 'yyyy-MM-dd HH:mm:ss' valueFormat: "yyyy-MM-dd HH:mm:ss",
} },
}; };
export const aEstimatedReleaseTime = { export const aEstimatedReleaseTime = {
label: "预计解除时间:", label: "预计解除时间:",
key: "estimatedEndTime", key: "estimatedEndTime",
type: "datePicker", type: "datePicker",
options:{ options: {
type: "datetime", type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss', format: "yyyy-MM-dd HH:mm:ss",
valueFormat: 'yyyy-MM-dd HH:mm:ss' valueFormat: "yyyy-MM-dd HH:mm:ss",
} },
}; };
export const pressure = { export const pressure = {
label: "压车(公里):", label: "压车(公里):",
key: "dcEventAccident.trafficJam", key: "dcEventAccident.trafficJam",
type:"inputNumber", type: "inputNumber",
options:{ options: {
min: 0 min: 0,
}, },
ons:{ ons: {
change(value, ...args){ change(value, ...args) {
const { data } = args.slice(-1)[0]; const { data } = args.slice(-1)[0];
let dj = 5; let dj = 5;
if(value < 3){ if (value < 3) {
dj = 5 dj = 5;
} else if(value >= 3 && value < 6){ } else if (value >= 3 && value < 6) {
dj = 4 dj = 4;
}else if(value >= 6 && value < 9){ } else if (value >= 6 && value < 9) {
dj = 3 dj = 3;
}else if(value >= 9 && value < 11){ } else if (value >= 9 && value < 11) {
dj = 2 dj = 2;
}else if(value >10){ } else if (value > 10) {
dj = 1 dj = 1;
}
data.eventLevel = dj
}
} }
data.eventLevel = dj;
},
},
}; };
export const isCongestionAhead = { export const isCongestionAhead = {
@ -902,6 +904,9 @@ export const ownerPhone = {
label: "车主电话:", label: "车主电话:",
key: "dcEventAccident.vehicleOwnerPhone", key: "dcEventAccident.vehicleOwnerPhone",
isAlone: true, isAlone: true,
options: {
placeholder: "车主电话(多个电话请以逗号分隔,不超过10个)",
},
}; };
export const emptyLine = { export const emptyLine = {

84
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js

@ -1,26 +1,36 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var xData = ['梁山东', '安城', '梁山', '孝里', '平阴北', '长青','东平','平阴南','嘉祥西'] var xData = [
let eventWarning = [55, 50, 46, 46, 55, 45,33,62,30] "梁山东",
let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200,1200,1900] "安城",
let legend = ['通行量', '收费金额'] "梁山",
"孝里",
"平阴北",
"长青",
"东平",
"平阴南",
"嘉祥西",
];
let eventWarning = [55, 50, 46, 46, 55, 45, 33, 62, 30];
let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200, 1200, 1900];
let legend = ["通行量", "收费金额"];
let options = { let options = {
color: ['#2CF1FF', '#3456FF'], color: ["#2CF1FF", "#3456FF"],
timeline: { timeline: {
show: false, show: false,
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { // axisPointer: {
type: "shadow", // type: "shadow",
}, // },
backgroundColor: "rgba(255,255,255,0.75)", // backgroundColor: "rgba(255,255,255,0.75)",
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);", // extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
textStyle: { // textStyle: {
fontSize: 14, // fontSize: 14,
color: "#000", // color: "#000",
}, // },
formatter: "{a}<br/>{b} :\n\n{c} ", // formatter: "{a}<br/>{b} :\n\n{c} ",
}, },
legend: { legend: {
top: 10, top: 10,
@ -28,14 +38,14 @@ let options = {
itemWidth: 10, itemWidth: 10,
itemHeight: 6, itemHeight: 6,
itemGap: 20, itemGap: 20,
icon:"roundRect", icon: "roundRect",
orient: "horizontal", orient: "horizontal",
itemStyle:{ itemStyle: {
borderRadius:18, borderRadius: 18,
}, },
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 16, fontSize: 13,
}, },
data: legend, data: legend,
}, },
@ -79,9 +89,9 @@ let options = {
}, },
axisLabel: { axisLabel: {
show: true, show: true,
verticalAlign: 'middle', verticalAlign: "middle",
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 0.7)', color: "rgba(255, 255, 255, 0.7)",
fontSize: 12, fontSize: 12,
}, },
}, },
@ -103,9 +113,9 @@ let options = {
}, },
axisLabel: { axisLabel: {
show: true, show: true,
verticalAlign: 'middle', verticalAlign: "middle",
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 0.7)', color: "rgba(255, 255, 255, 0.7)",
fontSize: 12, fontSize: 12,
}, },
}, },
@ -120,7 +130,7 @@ let options = {
inverse: true, inverse: true,
position: "right", position: "right",
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -162,7 +172,7 @@ let options = {
inverse: true, inverse: true,
position: "left", position: "left",
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -183,17 +193,17 @@ let options = {
normal: { normal: {
show: true, show: true,
position: "left", position: "left",
z:"100", z: "100",
valueAnimation: true, valueAnimation: true,
textStyle: { textStyle: {
color: "#F5F5F5", color: "#F5F5F5",
fontSize: 10, fontSize: 10,
}, },
formatter: '{c}' formatter: "{c}",
}, },
}, },
itemStyle: { itemStyle: {
borderRadius:9, borderRadius: 9,
//Y轴数字显示部分 //Y轴数字显示部分
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@ -211,8 +221,8 @@ let options = {
animationEasing: "elasticOut", animationEasing: "elasticOut",
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: "rgba(180, 180, 180, 0.2)",
} },
}, },
{ {
name: legend[1], name: legend[1],
@ -225,17 +235,17 @@ let options = {
normal: { normal: {
show: true, show: true,
position: "right", position: "right",
z:"100", z: "100",
valueAnimation: true, valueAnimation: true,
textStyle: { textStyle: {
color: "#F5F5F5", color: "#F5F5F5",
fontSize: 10, fontSize: 10,
}, },
formatter: '{c}' formatter: "{c}",
}, },
}, },
itemStyle: { itemStyle: {
borderRadius:9, borderRadius: 9,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ {
offset: 0, offset: 0,
@ -251,12 +261,10 @@ let options = {
animationEasing: "elasticOut", animationEasing: "elasticOut",
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)' color: "rgba(180, 180, 180, 0.2)",
} },
}, },
], ],
}; };
export default options;
export default options

359
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js

@ -1,43 +1,56 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15];
var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15];
var options = { var options = {
tooltip: { tooltip: {
trigger: 'axis', // trigger: "axis",
backgroundColor: 'rgba(17,95,182,0.5)', // backgroundColor: 'rgba(17,95,182,0.5)',
textStyle: { // textStyle: {
color: "#fff" // color: "#fff"
}, // },
formatter: function (params) { // formatter: function (params) {
return params[1].marker + '' + params[1].name + '\n' + // return params[1].marker + '' + params[1].name + '\n' +
"<div>" + // "<div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" + // "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
"<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' + // "<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' +
"</div>" + // "</div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" + // "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
'' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value; // '' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value;
} // }
}, },
grid: { grid: {
left: '5%', left: "5%",
right: '5%', right: "5%",
top: '25%', top: "25%",
bottom: '12%' bottom: "12%",
}, },
xAxis: { xAxis: {
data: ['01日', '02日', '03日', '04日', '05日', '06日','07日', '08日', '09日', '10日', '11日', '12日'], data: [
"01日",
"02日",
"03日",
"04日",
"05日",
"06日",
"07日",
"08日",
"09日",
"10日",
"11日",
"12日",
],
show: true, show: true,
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'solid', type: "solid",
color: '#2D4377', color: "#2D4377",
opacity: 1 opacity: 1,
} },
}, },
// lineStyle: { // lineStyle: {
// show: true, // show: true,
@ -46,229 +59,267 @@ var options = {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
fontSize: 14 fontSize: 12,
},
margin: 12, // 刻度标签与轴线之间的距离。
}, },
margin: 12 // 刻度标签与轴线之间的距离。
}
}, },
yAxis: [{ yAxis: [
{
min: 0, min: 0,
max: 18, max: 18,
type: 'value', type: "value",
minInterval:3, minInterval: 3,
maxInterval:3, maxInterval: 3,
name: '(单位:万)', name: "(单位:万)",
nameTextStyle: { nameTextStyle: {
align: 'left', align: "left",
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
padding: [0, 0, 0, -20], padding: [0, 0, 0, -20],
fontSize: 14 fontSize: 14,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: '#2D4377', color: "#2D4377",
opacity: 0.5 opacity: 0.5,
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#2D4377', color: "#2D4377",
} },
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
fontSize: 14 fontSize: 12,
}
}, },
data:[ },
'0','3','6','9','12','15','18' data: ["0", "3", "6", "9", "12", "15", "18"],
], },
}, { {
show: true, show: true,
name: '', name: "",
min: 0, min: 0,
max: 18, max: 18,
type: 'value', type: "value",
minInterval:3, minInterval: 3,
maxInterval:3, maxInterval: 3,
splitNumber:3, splitNumber: 3,
formatter:function(e){ formatter: function (e) {
console.log("---------------",e); console.log("---------------", e);
}, },
nameTextStyle: { nameTextStyle: {
align: 'left', align: "left",
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
padding: [0, 0, 0, 10], padding: [0, 0, 0, 10],
fontSize: 14 fontSize: 14,
}, },
splitLine: { show: false }, splitLine: { show: false },
axisLine: { show: true }, axisLine: { show: true },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
textStyle: { fontSize: 14, color: 'rgba(255,255,255,0.8)' } textStyle: { fontSize: 12, color: "rgba(255,255,255,0.8)" },
},
data: ["0%", "3%", "6%", "9%", "12%", "15%", "18%"],
}, },
data:[
'0%','3%','6%','9%','12%','15%','18%'
], ],
}],
legend: { legend: {
icon: 'rect', icon: "rect",
itemWidth: 25, itemWidth: 25,
itemHeight: 10, itemHeight: 10,
top: '5%', top: "5%",
right: '5%', right: "5%",
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: 14 fontSize: 12,
}, },
lineStyle:{ lineStyle: {
show:false, show: false,
}, },
itemGap: 12, // 设置间距 itemGap: 12, // 设置间距
data:[{ data: [
name:'增收金额', {
itemStyle:{ name: "增收金额",
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#1CE8E8' // 0% 处的颜色 color: "#1CE8E8", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#2CAEE3' // 100% 处的颜色 color: "#2CAEE3", // 100% 处的颜色
}], false) },
],
false
),
}, },
}, },
{ {
name:'增涨率', name: "增涨率",
itemStyle:{ itemStyle: {
color:"#006AA6" color: "#006AA6",
} },
}], },
],
}, },
series: [ series: [
// 下半截柱状图 // 下半截柱状图
{ {
name: '增收金额', name: "增收金额",
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
barGap: '-100%', barGap: "-100%",
borderCap:"round", borderCap: "round",
itemStyle: { // lenged文本 itemStyle: {
// lenged文本
opacity: 1, opacity: 1,
borderCap:"round", borderCap: "round",
color: function (params) { color: function (params) {
var a = params.name.slice(0, 2) var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(1, 0, 0, 1, [{ return new echarts.graphic.LinearGradient(
1,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#1CE8E8' // 0% 处的颜色 color: "#1CE8E8", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#2CAEE3' // 100% 处的颜色 color: "#2CAEE3", // 100% 处的颜色
}], false) },
} ],
false
);
}, },
data: data1
}, },
data: data1,
},
{ {
'name': '', name: "",
'type': 'pictorialBar', type: "pictorialBar",
'symbolSize': [12, 12], symbolSize: [12, 12],
'symbolOffset': [0, -4], symbolOffset: [0, -4],
'z': 5, z: 5,
itemStyle: { itemStyle: {
opacity: 1, opacity: 1,
borderCap:"round", borderCap: "round",
color: function (params) { color: function (params) {
var a = params.name.slice(0, 2) var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#0BA7DA' // 0% 处的颜色 color: "#0BA7DA", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#0BA7DA30' // 100% 处的颜色 color: "#0BA7DA30", // 100% 处的颜色
}], false) },
} ],
false
);
},
}, },
'symbolPosition': 'end', symbolPosition: "end",
'data': data1 data: data1,
}, },
{ {
name: '增涨率', name: "增涨率",
'z': 9, z: 9,
yAxisIndex: 1, yAxisIndex: 1,
type: 'line', type: "line",
data: data2, data: data2,
symbol: symbol:
"image://data:image/png;base64,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", "image://data:image/png;base64,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",
symbolSize: [20, 20], symbolSize: [20, 20],
symbolOffset:['0',0], symbolOffset: ["0", 0],
lineStyle: { lineStyle: {
normal: { normal: {
width: 3, width: 3,
color: '#006AA6' // 线条颜色 color: "#006AA6", // 线条颜色
}, },
borderWidth:5, borderWidth: 5,
borderColor: '#006AA6' borderColor: "#006AA6",
}, },
itemStyle:{ itemStyle: {
color:"#006AA6", color: "#006AA6",
}, },
}, },
{ {
name: '', name: "",
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
barGap: '-100%', barGap: "-100%",
z: 0, z: 0,
itemStyle: { itemStyle: {
borderCap:"round", borderCap: "round",
color: '#163F7A', color: "#163F7A",
opacity: .7, opacity: 0.7,
}, },
data: [18, 18, 18, 18, 18, 18,18, 18, 18, 18, 18, 18] data: [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
}, },
{ {
'name': '', name: "",
'type': 'pictorialBar', type: "pictorialBar",
'symbolSize': [12, 12], symbolSize: [12, 12],
'symbolOffset': [0, -5], symbolOffset: [0, -5],
'z': 5, z: 5,
itemStyle: { itemStyle: {
barBorderRadius: [13, 13, 13, 13], barBorderRadius: [13, 13, 13, 13],
opacity: 1, opacity: 1,
borderCap:"round", borderCap: "round",
color: function (params) { color: function (params) {
var a = params.name.slice(0, 2) var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#2CAEE3' // 0% 处的颜色 color: "#2CAEE3", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#2CAEE3' // 100% 处的颜色 color: "#2CAEE3", // 100% 处的颜色
}], false) },
} ],
}, false
'symbolPosition': 'end', );
data: [0, 0, 0, 0, 0, 0,0, 0, 0,0, 0, 0] },
} },
] symbolPosition: "end",
} data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
},
],
};
// option && myChart3.setOption(option); // option && myChart3.setOption(option);
// if (option && typeof option === "object") { // if (option && typeof option === "object") {

298
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js

@ -1,43 +1,56 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15];
var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15];
var options = { var options = {
tooltip: { tooltip: {
trigger: 'axis', // trigger: "axis",
backgroundColor: 'rgba(17,95,182,0.5)', // backgroundColor: 'rgba(17,95,182,0.5)',
textStyle: { // textStyle: {
color: "#fff" // color: "#fff"
}, // },
formatter: function (params) { // formatter: function (params) {
return params[1].marker + '' + params[1].name + '\n' + // return params[1].marker + '' + params[1].name + '\n' +
"<div>" + // "<div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" + // "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
"<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' + // "<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' +
"</div>" + // "</div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" + // "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
'' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value; // '' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value;
} // }
}, },
grid: { grid: {
left: '5%', left: "5%",
right: '5%', right: "5%",
top: '25%', top: "25%",
bottom: '12%' bottom: "12%",
}, },
xAxis: { xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'], data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
show: true, show: true,
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'solid', type: "solid",
color: '#2D4377', color: "#2D4377",
opacity: 1 opacity: 1,
} },
}, },
// lineStyle: { // lineStyle: {
// show: true, // show: true,
@ -46,190 +59,219 @@ var options = {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
fontSize: 14 fontSize: 12,
}, },
margin: 12 // 刻度标签与轴线之间的距离。 margin: 12, // 刻度标签与轴线之间的距离。
}
}, },
yAxis: [{ },
yAxis: [
{
min: 0, min: 0,
max: 18, max: 18,
minInterval:1, minInterval: 1,
maxInterval:1, maxInterval: 1,
name: '(单位:万)', name: "(单位:万)",
nameTextStyle: { nameTextStyle: {
align: 'left', align: "left",
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
padding: [0, 0, 0, -20], padding: [0, 0, 0, -20],
fontSize: 14 fontSize: 14,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: '#2D4377', color: "#2D4377",
opacity: 0.5 opacity: 0.5,
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#2D4377', color: "#2D4377",
} },
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
fontSize: 14 fontSize: 12,
}
}, },
data:[ },
'0','3','6','9','12','15','18' data: ["0", "3", "6", "9", "12", "15", "18"],
], },
}, { {
show: true, show: true,
name: '', name: "",
min: 0, min: 0,
max: 18, max: 18,
splitNumber:3, splitNumber: 3,
nameTextStyle: { nameTextStyle: {
align: 'left', align: "left",
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
padding: [0, 0, 0, 10], padding: [0, 0, 0, 10],
fontSize: 14 fontSize: 14,
}, },
splitLine: { show: false }, splitLine: { show: false },
axisLine: { show: true }, axisLine: { show: true },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
textStyle: { fontSize: 14, color: 'rgba(255,255,255,0.8)' } textStyle: { fontSize: 12, color: "rgba(255,255,255,0.8)" },
},
data: ["0%", "3%", "6%", "9%", "12%", "15%", "18%"],
}, },
data:[
'0%','3%','6%','9%','12%','15%','18%'
], ],
}],
legend: { legend: {
top: '5%', top: "5%",
right: '5%', right: "5%",
icon: 'rect', icon: "rect",
itemWidth: 25, itemWidth: 25,
itemHeight: 10, itemHeight: 10,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: 14 fontSize: 12,
}, },
lineStyle:{ lineStyle: {
show:false, show: false,
color:"#00E4BB", color: "#00E4BB",
}, },
data:[{ data: [
name:'增收金额', {
itemStyle:{ name: "增收金额",
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#00E4BB' // 0% 处的颜色 color: "#00E4BB", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#003B4E' // 100% 处的颜色 color: "#003B4E", // 100% 处的颜色
}], false) },
],
false
),
}, },
}, },
{ {
name:'增涨率', name: "增涨率",
itemStyle:{ itemStyle: {
color:"#755400" color: "#755400",
} },
}], },
itemGap: 12 // 设置间距 ],
itemGap: 12, // 设置间距
}, },
series: [ series: [
// 下半截柱状图 // 下半截柱状图
{ {
name: '增收金额', name: "增收金额",
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
barGap: '-100%', barGap: "-100%",
itemStyle: { // lenged文本 itemStyle: {
// lenged文本
opacity: 1, opacity: 1,
barBorderRadius: [13, 13, 13, 13], barBorderRadius: [13, 13, 13, 13],
color: function (params) { color: function (params) {
var a = params.name.slice(0, 2) var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#00E4BB' // 0% 处的颜色 color: "#00E4BB", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#003B4E' // 100% 处的颜色 color: "#003B4E", // 100% 处的颜色
}], false) },
} ],
false
);
}, },
data: data1
}, },
data: data1,
},
{ {
'name': '', name: "",
'type': 'pictorialBar', type: "pictorialBar",
'symbolSize': [12, 12], symbolSize: [12, 12],
'symbolOffset': [0, -4], symbolOffset: [0, -4],
'z': 5, z: 5,
itemStyle: { itemStyle: {
opacity: 1, opacity: 1,
color: function (params) { color: function (params) {
var a = params.name.slice(0, 2) var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#00E4BB' // 0% 处的颜色 color: "#00E4BB", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#00E4BB30' // 100% 处的颜色 color: "#00E4BB30", // 100% 处的颜色
}], false)
}
}, },
'symbolPosition': 'end', ],
'data': data1 false
);
},
},
symbolPosition: "end",
data: data1,
}, },
{ {
name: '增涨率', name: "增涨率",
'z': 9, z: 9,
yAxisIndex: 1, yAxisIndex: 1,
type: 'line', type: "line",
data: data2, data: data2,
symbol:"image://data:image/png;base64,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", symbol:
"image://data:image/png;base64,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",
symbolSize: [20, 20], symbolSize: [20, 20],
symbolOffset:['0',0], symbolOffset: ["0", 0],
lineStyle: { lineStyle: {
normal: { normal: {
width: 3, width: 3,
color: '#FF9B61' // 线条颜色 color: "#FF9B61", // 线条颜色
}, },
borderColor: '#FF9B61' borderColor: "#FF9B61",
}, },
}, },
{ {
name: '', name: "",
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
barGap: '-100%', barGap: "-100%",
z: 0, z: 0,
itemStyle: { itemStyle: {
color: '#163F7A', color: "#163F7A",
opacity: .7, opacity: 0.7,
}, },
data: [18, 18, 18, 18, 18, 18,18, 18, 18, 18, 18, 18] data: [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
} },
] ],
} };
// option && myChart3.setOption(option); // option && myChart3.setOption(option);
// if (option && typeof option === "object") { // if (option && typeof option === "object") {

175
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js

@ -2,34 +2,36 @@ import * as echarts from "echarts";
let options = { let options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
backgroundColor: 'rgba(17,95,182,0.5)', backgroundColor: "rgba(17,95,182,0.5)",
textStyle: { textStyle: {
color: "#fff" color: "#fff",
}, },
formatter: function (params) { formatter: function (params) {
return params[0].name + params[0].seriesName + ': ' + params[0].value + '%' return (
} params[0].name + params[0].seriesName + ": " + params[0].value + "%"
);
},
}, },
grid: { grid: {
left: '2%', left: "2%",
right: '2%', right: "0%",
top: '15%', top: "15%",
bottom: '12%' bottom: "12%",
}, },
xAxis: { xAxis: {
data: [], data: [],
show: true, show: true,
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'solid', type: "solid",
color: '#2D4377', color: "#2D4377",
opacity: 1 opacity: 1,
} },
}, },
// lineStyle: { // lineStyle: {
// show: true, // show: true,
@ -38,126 +40,147 @@ let options = {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
fontSize: 14 fontSize: 14,
}, },
margin: 12 // 刻度标签与轴线之间的距离。 margin: 12, // 刻度标签与轴线之间的距离。
}
}, },
yAxis: [{ },
yAxis: [
{
min: 0, min: 0,
max: 100, max: 100,
type: 'value', type: "value",
minInterval: 20, minInterval: 20,
maxInterval: 20, maxInterval: 20,
name: "", name: "",
nameTextStyle: { nameTextStyle: {
align: 'left', align: "left",
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
padding: [0, 0, 0, -20], padding: [0, 0, 0, -20],
fontSize: 14 fontSize: 14,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: '#2D4377', color: "#2D4377",
opacity: 0.5 opacity: 0.5,
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#2D4377', color: "#2D4377",
} },
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
fontSize: 14 fontSize: 14,
} },
},
data: ["0", "3", "6", "9", "12", "15", "18"],
}, },
data: [
'0', '3', '6', '9', '12', '15', '18'
], ],
}],
legend: { legend: {
top: '5%', top: "5%",
right: '5%', right: "5%",
icon: 'rect', icon: "rect",
itemWidth: 25, itemWidth: 25,
itemHeight: 10, itemHeight: 10,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: 14 fontSize: 14,
}, },
lineStyle: { lineStyle: {
show: false, show: false,
color: "#00E4BB", color: "#00E4BB",
}, },
data: [{ data: [
name: '高清网络球型摄像机', {
name: "高清网络球型摄像机",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#00E4BB' // 0% 处的颜色 color: "#00E4BB", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#003B4E' // 100% 处的颜色 color: "#003B4E", // 100% 处的颜色
}], false) },
],
false
),
}, },
}, },
{ {
name: '增涨率', name: "增涨率",
itemStyle: { itemStyle: {
color: "#755400" color: "#755400",
} },
}], },
itemGap: 12 // 设置间距 ],
itemGap: 12, // 设置间距
}, },
series: [ series: [
// 下半截柱状图 // 下半截柱状图
{ {
name: '', name: "",
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
barGap: '-100%', barGap: "-100%",
itemStyle: { // lenged文本 itemStyle: {
// lenged文本
opacity: 1, opacity: 1,
barBorderRadius: [13, 13, 13, 13], barBorderRadius: [13, 13, 13, 13],
color: function (params) { color: function (params) {
var a = params.name.slice(0, 2) var a = params.name.slice(0, 2);
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, offset: 0,
color: '#00E4BB' // 0% 处的颜色 color: "#00E4BB", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#003B4E' // 100% 处的颜色 color: "#003B4E", // 100% 处的颜色
}], false) },
} ],
false
);
},
}, },
data: [] data: [],
}, },
{ {
name: '', name: "",
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
barGap: '-100%', barGap: "-100%",
z: 0, z: 0,
itemStyle: { itemStyle: {
color: '#0BA7DA', color: "#0BA7DA",
opacity: .1, opacity: 0.1,
},
data: [],
}, },
data: [] ],
} };
]
}
// option && myChart3.setOption(option); // option && myChart3.setOption(option);
// if (option && typeof option === "object") { // if (option && typeof option === "object") {

45
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@ -17,7 +17,7 @@
@click="SystemStatusExport">导出Excel</el-button> @click="SystemStatusExport">导出Excel</el-button>
</div> </div>
<div class="right-div"> <div class="right-div">
<InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" :placeholder="searchText"/> <InputSearch :formList="searchFormList" @handleSearch="handleSearch" :placeholder="searchText" />
</div> </div>
</div> </div>
<div class="queryChart"> <div class="queryChart">
@ -109,10 +109,10 @@ export default {
}, },
data() { data() {
return { return {
searchText:"请设置查询条件", searchText: "请设置查询条件",
isEmpty01:true, isEmpty01: true,
emptyText01:"请输入参数查询...", emptyText01: "请输入参数查询...",
isEmpty02:true, isEmpty02: true,
emptyText02: "请输入参数查询...", emptyText02: "请输入参数查询...",
startTime: "", startTime: "",
time: "", time: "",
@ -180,11 +180,11 @@ export default {
return year + "-" + m + "-" + day + " 00:00:00"; return year + "-" + m + "-" + day + " 00:00:00";
}, },
onRefreshData(){ onRefreshData() {
if(!this.typeQuery || !this.startTime){ if (!this.typeQuery || !this.startTime) {
this.$message({ this.$message({
message : "请先设置查询条件!", message: "请先设置查询条件!",
type : "warning" type: "warning"
}) })
return return
} }
@ -195,7 +195,7 @@ export default {
this.typeQuery = data.type; this.typeQuery = data.type;
this.startTime = this.formatDate(data.time[0]); this.startTime = this.formatDate(data.time[0]);
this.time = this.formatDate(data.time[1]); this.time = this.formatDate(data.time[1]);
let typeText = this.searchFormList[1].options.options[this.typeQuery-1].label; let typeText = this.searchFormList[1].options.options[this.typeQuery - 1].label;
this.searchText = `${moment(this.startTime).format("YYYY年MM月DD日")}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; this.searchText = `${moment(this.startTime).format("YYYY年MM月DD日")}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`;
this.initQueryChart(); this.initQueryChart();
this.initQueryTable(1); this.initQueryTable(1);
@ -271,11 +271,11 @@ export default {
}) })
}, },
setStatus(id,status){ setStatus(id, status) {
if(status == "doing"){ if (status == "doing") {
this["isEmpty" + id] = true this["isEmpty" + id] = true
this["emptyText" + id] = "数据查询中..." this["emptyText" + id] = "数据查询中..."
}else if(status == "empty"){ } else if (status == "empty") {
this["isEmpty" + id] = true this["isEmpty" + id] = true
this["emptyText" + id] = "暂无数据..." this["emptyText" + id] = "暂无数据..."
} else if (status == "finish") { } else if (status == "finish") {
@ -294,7 +294,7 @@ export default {
}).then((res) => { }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
if (res.data && Object.keys(res.data).length>0) { if (res.data && Object.keys(res.data).length > 0) {
this.setStatus("01", "finish"); this.setStatus("01", "finish");
@ -325,7 +325,7 @@ export default {
this.queryChart.setOption(chartsStatistics); this.queryChart.setOption(chartsStatistics);
}); });
}else{ } else {
this.setStatus("01", "empty"); this.setStatus("01", "empty");
@ -346,7 +346,7 @@ export default {
pageSize: pageSize, pageSize: pageSize,
}).then((res) => { }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
if(res.rows && res.rows.length>0){ if (res.rows && res.rows.length > 0) {
this.setStatus("02", "finish"); this.setStatus("02", "finish");
this.pageIndex = pageIndex; this.pageIndex = pageIndex;
this.pageSize = pageSize; this.pageSize = pageSize;
@ -355,7 +355,7 @@ export default {
this.tableData.forEach((it, index) => { this.tableData.forEach((it, index) => {
it.order = (pageIndex - 1) * (pageSize) + index + 1; it.order = (pageIndex - 1) * (pageSize) + index + 1;
}) })
}else{ } else {
this.setStatus("02", "empty"); this.setStatus("02", "empty");
} }
} }
@ -371,12 +371,14 @@ export default {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.floatEmpty {
.floatEmpty{
position: absolute; position: absolute;
z-index: 100; z-index: 100;
background: rgba($color: #000000, $alpha: 0.2); background: rgba($color: #000000, $alpha: 0.2);
left: 0; top:0; right: 0; bottom: 0; left: 0;
top: 0;
right: 0;
bottom: 0;
} }
.bottomTabs { .bottomTabs {
@ -524,8 +526,11 @@ export default {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 343px; height: 343px;
margin-top: 20px;
padding: 0 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425860 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425860 100%);
margin-bottom: 30px; margin-bottom: 30px;
--keep-ratio: scaleX(1);
>div { >div {
display: inline-flex; display: inline-flex;

281
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue

@ -2,63 +2,59 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'气象预警信息'"></WgtTitle> <WgtTitle :title="'气象预警信息'"></WgtTitle>
<div class="board"> <div class="board">
<div class="weaterMain" > <div class="weaterMain">
<div class="weaterTitle" > <div class="weaterTitle">
<span class="text">当前气象预警信息数</span> <span class="text">当前气象预警信息数</span>
<span class="num" >113</span> <span class="num">113</span>
</div> </div>
<div > <div>
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> <el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择">
<el-option <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value">
v-for="item in colors"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="warningList" > <div class="warningList">
<div class="itemWarning" v-for="(item,i) in warnings"> <div class="itemWarning" v-for="(item, i) in warnings">
<div class="left-w" > <div class="left-w">
<div class="left-row" > <div class="left-row">
<div class="label" > <div class="label">
预警类型 预警类型
</div> </div>
<div class="value" > <div class="value">
{{ item.class }} {{ item.class }}
</div> </div>
</div> </div>
<div class="left-row" > <div class="left-row">
<div class="label" > <div class="label">
预警等级 预警等级
</div> </div>
<div :class="'value '+item.type" > <div :class="'value ' + item.type">
{{ item.lay }} {{ item.lay }}
</div> </div>
</div> </div>
<div class="left-row" > <div class="left-row">
<div class="label" > <div class="label">
预警范围 预警范围
</div> </div>
<div class="value" > <div class="value">
{{ item.scope }} {{ item.scope }}
</div> </div>
</div> </div>
<div class="left-row" > <div class="left-row">
<div class="label" > <div class="label">
预警发布时间 预警发布时间
</div> </div>
<div class="value" > <div class="value">
{{ item.dateTime }} {{ item.dateTime }}
</div> </div>
</div> </div>
</div> </div>
<div class="right-w" > <div class="right-w">
<div class="right-row" > <div class="right-row">
预警内容: 预警内容:
</div> </div>
<div class="right-text" > <div class="right-text">
{{ item.text }} {{ item.text }}
</div> </div>
</div> </div>
@ -66,58 +62,58 @@
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { color } from 'echarts'; import { color } from 'echarts';
import WgtTitle from '../../../../../widgets/title' import WgtTitle from '../../../../../widgets/title'
export default { export default {
name: 'infoWarning', name: 'infoWarning',
components: { components: {
WgtTitle WgtTitle
}, },
data() { data() {
return { return {
colorSelect:"org", colorSelect: "org",
colors:[ colors: [
{label:'全部',value:"all"}, { label: '全部', value: "all" },
{label:'橙色',value:"org"}, { label: '橙色', value: "org" },
{label:'红色',value:"red"}, { label: '红色', value: "red" },
{label:'蓝色',value:"bule"}, { label: '蓝色', value: "bule" },
], ],
warnings:[ warnings: [
{ {
type:"org", type: "org",
class:"道路结冰", class: "道路结冰",
lay:"橙色", lay: "橙色",
scope:"K100+000", scope: "K100+000",
dateTime:"2023-12-31 13:00:00", dateTime: "2023-12-31 13:00:00",
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
}, },
{ {
type:"org", type: "org",
class:"道路结冰", class: "道路结冰",
lay:"橙色", lay: "橙色",
scope:"K100+000", scope: "K100+000",
dateTime:"2023-12-31 13:00:00", dateTime: "2023-12-31 13:00:00",
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
}, },
{ {
type:"org", type: "org",
class:"道路结冰", class: "道路结冰",
lay:"橙色", lay: "橙色",
scope:"K100+000", scope: "K100+000",
dateTime:"2023-12-31 13:00:00", dateTime: "2023-12-31 13:00:00",
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
}, },
{ {
type:"org", type: "org",
class:"道路结冰", class: "道路结冰",
lay:"橙色", lay: "橙色",
scope:"K100+000", scope: "K100+000",
dateTime:"2023-12-31 13:00:00", dateTime: "2023-12-31 13:00:00",
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号:受降雪和低温影响,我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
} }
] ]
} }
@ -127,7 +123,7 @@ import WgtTitle from '../../../../../widgets/title'
}, },
methods: { methods: {
selectItem(index){ selectItem(index) {
this.selectIndex = index; this.selectIndex = index;
}, },
}, },
@ -139,33 +135,33 @@ import WgtTitle from '../../../../../widgets/title'
}); });
}); });
}, },
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.selectRoad {
.selectRoad{ width: 89px;
width:89px; margin-top: 5px;
margin-top:5px; margin-left: 20px;
margin-left:20px; border: 1px solid #00B3CC;
border:1px solid #00B3CC;
::v-deep{ ::v-deep {
.el-input__inner{ .el-input__inner {
background-color: #064258 !important; background-color: #064258 !important;
border-width: 0px !important; border-width: 0px !important;
} }
} }
} }
.congestion { .congestion {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 600px; height: 600px;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height:100%; height: 100%;
.board{ .board {
height: 690px; height: 690px;
width: 100%; width: 100%;
padding: 0px 0px; padding: 0px 0px;
@ -175,52 +171,52 @@ import WgtTitle from '../../../../../widgets/title'
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top:20px; margin-top: 20px;
.warningList { .warningList {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width:100%; width: 100%;
height:calc(100% - 40px); height: calc(100% - 40px);
>div::after { >div::after {
content: ""; content: "";
top:0; top: 0;
left:-3px; left: -3px;
position: absolute; position: absolute;
width:0; width: 0;
height:0; height: 0;
border-right:6px solid transparent; border-right: 6px solid transparent;
border-left: 6px solid transparent; border-left: 6px solid transparent;
border-bottom:6px solid rgba(55, 231, 255, 1); border-bottom: 6px solid rgba(55, 231, 255, 1);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
>div::before { >div::before {
content: ""; content: "";
bottom:0; bottom: 0;
right:-3px; right: -3px;
position: absolute; position: absolute;
width:0; width: 0;
height:0; height: 0;
border-right:6px solid transparent; border-right: 6px solid transparent;
border-left:6px solid transparent; border-left: 6px solid transparent;
border-bottom:6px solid rgba(55, 231, 255, 1); border-bottom: 6px solid rgba(55, 231, 255, 1);
transform: rotate(135deg); transform: rotate(135deg);
} }
>div { >div {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:138px; height: 138px;
background: #133242; background: #133242;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1;
margin-top:20px; margin-top: 20px;
padding:23px 29px; padding: 23px 29px;
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
@ -228,23 +224,24 @@ import WgtTitle from '../../../../../widgets/title'
>.left-w { >.left-w {
display: inline-flex; display: inline-flex;
width:40%; width: 40%;
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
.left-row { .left-row {
margin:2px; margin: 2px;
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:30px; height: 30px;
flex-direction: row; flex-direction: row;
>.value { >.value {
color:#fff; color: #fff;
} }
.org { .org {
font-size: 12px !important; font-size: 14px !important;
margin-top: 2px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #F4A125 color: #F4A125
@ -254,10 +251,10 @@ import WgtTitle from '../../../../../widgets/title'
} }
>.right-w { >.right-w {
margin-left:30px; margin-left: 30px;
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
.right-row { .right-row {
@ -265,7 +262,7 @@ import WgtTitle from '../../../../../widgets/title'
} }
.right-text { .right-text {
color:#fff; color: #fff;
} }
} }
@ -275,19 +272,19 @@ import WgtTitle from '../../../../../widgets/title'
.weaterMain { .weaterMain {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width:100%; width: 100%;
height: 40px; height: 40px;
.buttons { .buttons {
width:100%; width: 100%;
height:38px; height: 38px;
margin-left:20px; margin-left: 20px;
>div { >div {
display: inline-flex; display: inline-flex;
width:10%; width: 10%;
height:35px; height: 35px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
@ -303,49 +300,50 @@ import WgtTitle from '../../../../../widgets/title'
display: inline-flex; display: inline-flex;
width: 55px; width: 55px;
height: 36px; height: 36px;
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%);
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
z-index:-1; z-index: -1;
cursor: pointer; cursor: pointer;
} }
.redSel::after { .redSel::after {
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%);
} }
.yelSel::after { .yelSel::after {
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%);
} }
.bluSel::after { .bluSel::after {
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%);
} }
.orgSel::after{ .orgSel::after {
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%);
} }
} }
.weaterTitle::after { .weaterTitle::after {
content: ""; content: "";
position: absolute; position: absolute;
top:0px; top: 0px;
left:0px; left: 0px;
width:100%; width: 100%;
height:2px; height: 2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
} }
.weaterTitle::before { .weaterTitle::before {
content: ""; content: "";
position: absolute; position: absolute;
top:38px; top: 38px;
left:0px; left: 0px;
width:100%; width: 100%;
height:2px; height: 2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
} }
@ -355,13 +353,14 @@ import WgtTitle from '../../../../../widgets/title'
display: inline-flex; display: inline-flex;
width: 287px; width: 287px;
height: 38px; height: 38px;
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%); background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left:30px; margin-left: 30px;
; ;
>span.text { >span.text {
display: inline-flex; display: inline-flex;
font-size: 16px; font-size: 16px;
@ -384,11 +383,11 @@ import WgtTitle from '../../../../../widgets/title'
} }
} }
} }
.charts {
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

236
ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue

@ -2,48 +2,30 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'能见度异常信息'"></WgtTitle> <WgtTitle :title="'能见度异常信息'"></WgtTitle>
<div class="board"> <div class="board">
<div class="weaterMain" > <div class="weaterMain">
<el-table <el-table :border="false" :data="tableData" height="670" style="width: 100%">
:border="false" <el-table-column prop="nem" label="" width="30">
:data="tableData"
height="670"
style="width: 100%">
<el-table-column
prop="nem"
label=""
width="30">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="address" label="桩号范围" width="230">
prop="address"
label="桩号范围"
width="230">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="name" label="能见度" class-name="showClass" width="250">
prop="name"
label="能见度"
class-name="showClass"
width="250">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="showClass">{{scope.row.name}}</span> <span class="showClass">{{ scope.row.name }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="date" label="发生时间" width="230">
prop="date"
label="发生时间"
width="230"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Card from "@screen/components/Card1/index.vue" import Card from "@screen/components/Card1/index.vue"
import WgtTitle from '../../../../../widgets/title' import WgtTitle from '../../../../../widgets/title'
export default { export default {
name: 'infoWarning', name: 'infoWarning',
components: { components: {
WgtTitle WgtTitle
@ -54,51 +36,51 @@
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
@ -111,7 +93,7 @@
}, },
methods: { methods: {
selectItem(index){ selectItem(index) {
this.selectIndex = index; this.selectIndex = index;
}, },
}, },
@ -123,65 +105,65 @@
}); });
}); });
}, },
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.showClass {
.showClass { color: #00EBC1;
color:#00EBC1; }
}
::v-deep .el-table .cell { ::v-deep .el-table .cell {
padding-left:0px !important; padding-left: 0px !important;
} }
::v-deep .el-table .el-table__header-wrapper th { ::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important; background-color: #064258 !important;
color:#00D1FF; color: #00D1FF;
border-color: #064258 !important; border-color: #064258 !important;
border:0px !important; border: 0px !important;
font-size:12px !important; font-size: 12px !important;
} }
::v-deep .el-table { ::v-deep .el-table {
border:0px !important; border: 0px !important;
background-color: transparent; background-color: transparent;
font-size:12px !important; font-size: 14px !important;
} }
::v-deep .el-table__body-wrapper { ::v-deep .el-table__body-wrapper {
background-color: #064258; background-color: #064258;
color: #fff; color: #fff;
} }
::v-deep .el-table tr:hover td { ::v-deep .el-table tr:hover td {
background: #1b2528 !important; background: #1b2528 !important;
color:#00D1FF; color: #00D1FF;
} }
::v-deep .el-table tr:nth-child(odd) td{ ::v-deep .el-table tr:nth-child(odd) td {
background-color: #13272F ; background-color: #13272F;
border:0px !important; border: 0px !important;
} }
::v-deep .el-table tr:nth-child(even) td{
border:0px !important; ::v-deep .el-table tr:nth-child(even) td {
} border: 0px !important;
}
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #133242 !important; background-color: #133242 !important;
border-collapse:0; border-collapse: 0;
border:0px !important; border: 0px !important;
background-color: transparent !important; background-color: transparent !important;
} }
.congestion { .congestion {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 600px; height: 600px;
flex-direction: column; flex-direction: column;
.board{ .board {
height: 670px; height: 670px;
width: 100%; width: 100%;
padding: 0px 0px; padding: 0px 0px;
@ -191,28 +173,28 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top:20px; margin-top: 20px;
.warningList { .warningList {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width:100%; width: 100%;
height:calc(100% - 40px); height: calc(100% - 40px);
>div { >div {
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:138px; height: 138px;
background: #133242; background: #133242;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1;
overflow: hidden; overflow: hidden;
margin-top:20px; margin-top: 20px;
padding:23px 29px; padding: 23px 29px;
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
@ -220,19 +202,19 @@
>.left-w { >.left-w {
display: inline-flex; display: inline-flex;
width:40%; width: 40%;
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
.left-row { .left-row {
margin:2px; margin: 2px;
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:30px; height: 30px;
flex-direction: row; flex-direction: row;
>.value { >.value {
color:#fff; color: #fff;
} }
.org { .org {
@ -246,10 +228,10 @@
} }
>.right-w { >.right-w {
margin-left:30px; margin-left: 30px;
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
.right-row { .right-row {
@ -257,7 +239,7 @@
} }
.right-text { .right-text {
color:#fff; color: #fff;
} }
} }
@ -267,17 +249,18 @@
.weaterMain { .weaterMain {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width:100%; width: 100%;
height: 40px; height: 40px;
.buttons { .buttons {
width:100%; width: 100%;
height:38px; height: 38px;
>div { >div {
display: inline-flex; display: inline-flex;
width:10%; width: 10%;
height:35px; height: 35px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
@ -293,48 +276,49 @@
display: inline-flex; display: inline-flex;
width: 55px; width: 55px;
height: 36px; height: 36px;
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%);
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
z-index:-1; z-index: -1;
} }
.redSel::after { .redSel::after {
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%);
} }
.yelSel::after { .yelSel::after {
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%);
} }
.bluSel::after { .bluSel::after {
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%);
} }
.orgSel::after{ .orgSel::after {
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%);
} }
} }
.weaterTitle::after { .weaterTitle::after {
content: ""; content: "";
position: absolute; position: absolute;
top:0px; top: 0px;
left:0px; left: 0px;
width:100%; width: 100%;
height:2px; height: 2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
} }
.weaterTitle::before { .weaterTitle::before {
content: ""; content: "";
position: absolute; position: absolute;
top:38px; top: 38px;
left:0px; left: 0px;
width:100%; width: 100%;
height:2px; height: 2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
} }
@ -344,7 +328,7 @@
display: inline-flex; display: inline-flex;
width: 277px; width: 277px;
height: 38px; height: 38px;
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%); background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
justify-content: center; justify-content: center;
@ -372,11 +356,11 @@
} }
} }
} }
.charts {
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

14
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js

@ -94,8 +94,8 @@ let options = {
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
icon: "circle", icon: "circle",
itemHeight: 6, itemHeight: 8,
itemWidth: 6, itemWidth: 8,
top: "0%", top: "0%",
x: "80%", x: "80%",
textStyle: { textStyle: {
@ -106,7 +106,7 @@ let options = {
{ {
name: "交通特征", name: "交通特征",
itemStyle: { itemStyle: {
color: "#51BFA4", color: "#01DDB7",
}, },
}, },
{ {
@ -118,7 +118,7 @@ let options = {
{ {
name: "拥挤度", name: "拥挤度",
itemStyle: { itemStyle: {
color: "#E2BA74", color: "#EAB63B",
}, },
}, },
], ],
@ -147,7 +147,7 @@ let options = {
}, },
{ {
offset: 1, offset: 1,
color: "#003B4E", // 100% 处的颜色 color: "#34CCF2", // 100% 处的颜色
}, },
], ],
false false
@ -230,7 +230,7 @@ let options = {
}, },
{ {
offset: 1, offset: 1,
color: "#00E4BB53", // 100% 处的颜色 color: "#01DBB6", // 100% 处的颜色
}, },
], ],
false false
@ -312,7 +312,7 @@ let options = {
}, },
{ {
offset: 1, offset: 1,
color: "#003B4E", // 100% 处的颜色 color: "#EAB63B", // 100% 处的颜色
}, },
], ],
false false

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue

@ -356,7 +356,7 @@ export default {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 30px; height: 30px;
font-size: 16px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #30BFEC; color: #30BFEC;

Loading…
Cancel
Save