Skip to content

H
holo-web
Commit a9a27aa4 authored by ninglx's avatar ninglx
Browse files
Options

wj-smartcity 信号评价 绿灯有效利用率负值前端处理

parent 3183856c
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 54 deletions
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/mutLineChart.vue
View file @ a9a27aa4
...@@ -188,7 +188,14 @@ export default { ...@@ -188,7 +188,14 @@ export default {
if (!objData[item.metricName]) { if (!objData[item.metricName]) {
objData[item.metricName] = []; objData[item.metricName] = [];
} }
objData[item.metricName].push(item.metricValue || 0); let value = item.metricValue;
if (item.metricName === "绿灯有效利用率") {
if (value < 0) {
value = 0;
}
}
objData[item.metricName].push(value || 0);
// objData[item.metricName].push(item.metricValue || 0);
}); });
const seriesData = []; const seriesData = [];
legendData.forEach((item) => { legendData.forEach((item) => {
......
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/sceneDetail.vue
View file @ a9a27aa4
<template> <template>
<div class="scene-detail"> <div class="scene-detail">
<div class="head-title"> <div class="head-title">
<span class="title">{{activeObj.crossName}}</span> <span class="title">{{ activeObj.crossName }}</span>
<div class="el-icon-close" style="color: white" @click="$emit('update:detailShow', false)"> <div
</div> class="el-icon-close"
style="color: white"
@click="$emit('update:detailShow', false)"
></div>
</div> </div>
<div class="scene-content"> <div class="scene-content">
<div class="left-box"> <div class="left-box">
...@@ -22,22 +25,37 @@ ...@@ -22,22 +25,37 @@
</div> </div>
<div class="kip-detail-item"> <div class="kip-detail-item">
<div class="item-name">方向：</div> <div class="item-name">方向：</div>
<div class="item-value" v-if="detailApiData.dirsName && detailApiData.dirsName.length">{{ detailApiData.dirsName.join("、") }}</div> <div
class="item-value"
v-if="detailApiData.dirsName && detailApiData.dirsName.length"
>
{{ detailApiData.dirsName.join("、") }}
</div>
</div> </div>
<div class="kip-detail-item"> <div class="kip-detail-item">
<div class="item-name">配时方案：</div> <div class="item-name">配时方案：</div>
<div class="item-value" v-if=" <div
detailApiData.patternNames && class="item-value"
detailApiData.patternNames.length v-if="
">{{ detailApiData.patternNames.join("、") }}</div> detailApiData.patternNames && detailApiData.patternNames.length
"
>
{{ detailApiData.patternNames.join("、") }}
</div>
</div> </div>
<div class="kip-detail-item"> <div class="kip-detail-item">
<div class="item-name">路口服务水平：</div> <div class="item-name">路口服务水平：</div>
<div class="item-value">{{ detailApiData.serviceLevel }}</div> <div class="item-value">{{ detailApiData.serviceLevel }}</div>
</div> </div>
<div class="kip-detail-item" v-for="(item, index) in detailApiData.overallMetricsList" :key="index"> <div
class="kip-detail-item"
v-for="(item, index) in detailApiData.overallMetricsList"
:key="index"
>
<div class="item-name">{{ item.metricName }}：</div> <div class="item-name">{{ item.metricName }}：</div>
<div class="item-value">{{ item.metricValue }}{{ item.metricUnit }}</div> <div class="item-value">
{{ item.metricValue }}{{ item.metricUnit }}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -93,7 +111,8 @@ ...@@ -93,7 +111,8 @@
v-for="(head, headIndex) in item.headData" v-for="(head, headIndex) in item.headData"
:key="headIndex" :key="headIndex"
> >
{{ head[tbody.key] }} <!-- {{ head[tbody.key] }} -->
{{ tranverse(tbody, head[tbody.key]) }}
</th> </th>
</tr> </tr>
</tbody> </tbody>
...@@ -187,20 +206,50 @@ export default { ...@@ -187,20 +206,50 @@ export default {
intervalOptions: [{ label: "2023/7/18周三7:00-9:00", value: "1" }], intervalOptions: [{ label: "2023/7/18周三7:00-9:00", value: "1" }],
crossDetailData: [], crossDetailData: [],
dirObj: { dirObj: {
"1": "北进口", 1: "北进口",
"2": "东北进口", 2: "东北进口",
"3": "东进口", 3: "东进口",
"4": "东南进口", 4: "东南进口",
"5": "南进口", 5: "南进口",
"6": "西南进口", 6: "西南进口",
"7": "西进口", 7: "西进口",
"8": "西北进口", 8: "西北进口",
}, },
/**
* UNKNOWN(0, "unknown", "未知"),
L(1, "l", "左转"),
S(2, "s", "直行"),
R(3, "r", "右转"),
U(4, "u", "掉头"),
L_S(5, "l_s", "直左"),
S_R(6, "s_r", "直右"),
L_S_R(7, "l_s_r", "左直右"),
L_R(8, "l_r", "左右"),
L_U(9, "l_u", "左转掉头"),
S_U(10, "s_u", "直行掉头"),
R_U(11, "r_u", "右转掉头"),
L_S_U(12, "l_s_u", "左直掉头"),
U_S_R(13, "u_s_r", "直右掉头"),
L_S_R_U(14, "l_s_r_u", "左直右掉头"),
L_R_U(15, "l_r_u", "左右掉头");
*/
turnObj: { turnObj: {
unknow: "未知",
u: "掉头", u: "掉头",
l: "左转", l: "左转",
s: "直行", s: "直行",
r: "右转", r: "右转",
l_s: "直左",
s_r: "直右",
l_s_r: "左直右",
l_r: "左右",
l_u: "左转掉头",
s_u: "直行掉头",
r_u: "右转掉头",
l_s_u: "左直掉头",
u_s_r: "直右掉头",
l_s_r_u: "左直右掉头",
l_r_u: "左右掉头",
}, },
headData: [], headData: [],
tbodyData: [ tbodyData: [
...@@ -229,17 +278,15 @@ export default { ...@@ -229,17 +278,15 @@ export default {
mutLineChart: () => mutLineChart: () =>
import(/*webpackChunkName:"checkExpendTable" */ "./mutLineChart.vue"), import(/*webpackChunkName:"checkExpendTable" */ "./mutLineChart.vue"),
timeline: (resolve) => timeline: (resolve) => require(["./timeline.vue"], resolve),
require(["./timeline.vue"], resolve),
lineChart: () => lineChart: () =>
import(/*webpackChunkName:"checkExpendTable" */ "./lineChart.vue"), import(/*webpackChunkName:"checkExpendTable" */ "./lineChart.vue"),
checkExpendTable: () => checkExpendTable: () =>
import(/*webpackChunkName:"checkExpendTable" */ "./checkExpendTable.vue"), import(/*webpackChunkName:"checkExpendTable" */ "./checkExpendTable.vue"),
}, },
computed:{ computed: {},
},
mounted() { mounted() {
console.log('this.activeObj',this.activeObj) console.log("this.activeObj", this.activeObj);
if (this.type === 2) { if (this.type === 2) {
this.dateModel = this.detailData.name.split("isCongestion")[0]; this.dateModel = this.detailData.name.split("isCongestion")[0];
} else if (this.type === 1) { } else if (this.type === 1) {
...@@ -251,8 +298,16 @@ export default { ...@@ -251,8 +298,16 @@ export default {
this.getDetailKip(); this.getDetailKip();
}, },
methods: { methods: {
tranverse(tbody, value){
if(tbody.key === '7'){
if(value < 0){
return '--'
}
}
return value
},
getDetailKip() { getDetailKip() {
console.log('getDetailKip hourMinute',this.detailData.xName) console.log("getDetailKip hourMinute", this.detailData.xName);
abnormalDetail({ abnormalDetail({
crossId: this.activeObj.crossId, crossId: this.activeObj.crossId,
hourMinute: this.detailData.xName, hourMinute: this.detailData.xName,
...@@ -271,16 +326,17 @@ export default { ...@@ -271,16 +326,17 @@ export default {
// 获取日期部分 // 获取日期部分
this.dayModel = formatDate(dateTime); this.dayModel = formatDate(dateTime);
// this.dayModel = dateTime.toISOString().split("T")[0]; // this.dayModel = dateTime.toISOString().split("T")[0];
this.detailApiData.overallMetricsList = this.detailApiData.overallMetricsList.map(item => { this.detailApiData.overallMetricsList =
// todo 绿灯有效利用率如果为负值 设置为 ‘--’ this.detailApiData.overallMetricsList.map((item) => {
if(item.metricCode === '7'){ // todo 绿灯有效利用率如果为负值 设置为 ‘--’
if(item.metricValue < 0){ if (item.metricCode === "7") {
item.metricValue = '' if (item.metricValue < 0) {
item.metricUnit = '--' item.metricValue = "";
item.metricUnit = "--";
}
} }
} return item;
return item });
})
this.tbodyData = this.detailApiData.overallMetricsList.map((item) => { this.tbodyData = this.detailApiData.overallMetricsList.map((item) => {
return { return {
name: item.metricName, name: item.metricName,
...@@ -322,7 +378,7 @@ export default { ...@@ -322,7 +378,7 @@ export default {
} else if (type === "lane") { } else if (type === "lane") {
api = metricsLane; api = metricsLane;
} }
console.log('api hourMinute',this.timeModel) console.log("api hourMinute", this.timeModel);
api({ api({
crossId: this.activeObj.crossId, crossId: this.activeObj.crossId,
day: this.dayModel, day: this.dayModel,
...@@ -446,7 +502,7 @@ export default { ...@@ -446,7 +502,7 @@ export default {
margin-top: 10px; margin-top: 10px;
height: 20px; height: 20px;
z-index: 999; z-index: 999;
span{ span {
position: absolute; position: absolute;
top: -50%; top: -50%;
left: 50%; left: 50%;
...@@ -456,19 +512,26 @@ export default { ...@@ -456,19 +512,26 @@ export default {
.head-title { .head-title {
display: flex; display: flex;
align-items: center; align-items: center;
height:43px; height: 43px;
padding: 0 20px; padding: 0 20px;
justify-content: space-between; justify-content: space-between;
background: linear-gradient( 59deg, #0E8DED 0%, #044D85 100%); background: linear-gradient(59deg, #0e8ded 0%, #044d85 100%);
border-image: linear-gradient(140deg, rgba(64, 191, 255, 1), rgba(166, 221, 255, 1), rgba(0, 157, 255, 1), rgba(0, 146, 237, 1)) 1 1; border-image: linear-gradient(
140deg,
rgba(64, 191, 255, 1),
rgba(166, 221, 255, 1),
rgba(0, 157, 255, 1),
rgba(0, 146, 237, 1)
)
1 1;
color: white; color: white;
width: 100%; width: 100%;
.el-icon-close{ .el-icon-close {
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
} }
.el-icon-close:hover{ .el-icon-close:hover {
color:rgba(255,255,255,0.7) color: rgba(255, 255, 255, 0.7);
} }
.title { .title {
font-size: 20px; font-size: 20px;
...@@ -504,7 +567,7 @@ export default { ...@@ -504,7 +567,7 @@ export default {
// width: 128px; // width: 128px;
position: absolute; position: absolute;
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(31,147,255,0.16); border: 1px solid rgba(31, 147, 255, 0.16);
background: #0c3257; background: #0c3257;
table { table {
width: 100%; width: 100%;
...@@ -585,7 +648,7 @@ export default { ...@@ -585,7 +648,7 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient( 180deg, #0E8DED 0%, #044D85 100%); background: linear-gradient(180deg, #0e8ded 0%, #044d85 100%);
.name { .name {
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
...@@ -594,7 +657,7 @@ export default { ...@@ -594,7 +657,7 @@ export default {
} }
.date { .date {
font-size: 14px; font-size: 14px;
color: rgba(255,255,255,0.7); color: rgba(255, 255, 255, 0.7);
} }
} }
.kip-detail { .kip-detail {
...@@ -603,22 +666,22 @@ export default { ...@@ -603,22 +666,22 @@ export default {
padding: 10px; padding: 10px;
background-color: #0d2d51; background-color: #0d2d51;
.kip-detail-item{ .kip-detail-item {
height: 36px; height: 36px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
.item-name{ .item-name {
width: 50%; width: 50%;
color: rgba(255,255,255,0.7); color: rgba(255, 255, 255, 0.7);
text-align: right; text-align: right;
} }
.item-value{ .item-value {
width: 50%; width: 50%;
color: white; color: white;
} }
} }
.kip-detail-item:nth-child(odd){ .kip-detail-item:nth-child(odd) {
background-color: #0c375d; background-color: #0c375d;
} }
//margin: 30px 0 10px 30px; //margin: 30px 0 10px 30px;
...@@ -642,7 +705,7 @@ export default { ...@@ -642,7 +705,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
label{ label {
margin-bottom: 0; margin-bottom: 0;
} }
} }
...@@ -672,7 +735,7 @@ export default { ...@@ -672,7 +735,7 @@ export default {
} }
} }
} }
.content-bottom{ .content-bottom {
height: 300px; height: 300px;
padding: 0 20px 20px 20px; padding: 0 20px 20px 20px;
} }
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue
View file @ a9a27aa4
...@@ -257,7 +257,13 @@ export default { ...@@ -257,7 +257,13 @@ export default {
if (!objData[item.scopeName]) { if (!objData[item.scopeName]) {
objData[item.scopeName] = []; objData[item.scopeName] = [];
} }
objData[item.scopeName].push(item.value || 0); let value = item.value;
if (this.indexModel === "绿灯有效利用率") {
if (value < 0) {
value = 0;
}
}
objData[item.scopeName].push(value || 0);
}); });
const seriesData = []; const seriesData = [];
let colors = [ let colors = [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment