王钦
2 years ago
24 changed files with 711 additions and 82 deletions
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<div class="early_warning"> |
||||
|
<p @click="onShowCtt"> |
||||
|
<i class="el-icon-message-solid" v-if="isShowCtt"></i> |
||||
|
<i class="el-icon-bell" v-else></i> |
||||
|
</p> |
||||
|
<Dialog v-model="isShowCtt" title="事件预警" width="600px" top="100px" right="30px" noneMask> |
||||
|
<WarningList></WarningList> |
||||
|
</Dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import WarningList from "./WarningList.vue"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
isShowCtt:false |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Dialog, WarningList |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
methods: { |
||||
|
onShowCtt(){ |
||||
|
this.isShowCtt = !this.isShowCtt; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.early_warning{ |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,47 @@ |
|||||
|
<template> |
||||
|
<div class="warning_list"> |
||||
|
<el-tabs v-model="activeTab" @tab-click="onChangeTab"> |
||||
|
<el-tab-pane label="告警事件" name="first">用户管理</el-tab-pane> |
||||
|
<el-tab-pane label="待确认事件" name="second">配置管理</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import request from "@/utils/request"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
activeTab:"first" |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
methods: { |
||||
|
onChangeTab(tab, event){ |
||||
|
console.log(tab, event); |
||||
|
this.getMainData(); |
||||
|
}, |
||||
|
getMainData(){ |
||||
|
request({ |
||||
|
// url: `/business/dcBatchFunctionsJobGroup`, |
||||
|
url: `/perceivedEvents/warning/perceivedEventsList`, |
||||
|
method: "GET", |
||||
|
params:{} |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return; |
||||
|
console.log( result.data , "刚发的刚发的发多少++++"); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.warning_list{ |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,162 @@ |
|||||
|
/* 数据 */ |
||||
|
let nameList = [ |
||||
|
"1月", |
||||
|
"2月", |
||||
|
"3月", |
||||
|
"4月", |
||||
|
"5月", |
||||
|
"6月", |
||||
|
"7月", |
||||
|
"8月", |
||||
|
"9月", |
||||
|
"10月", |
||||
|
"11月", |
||||
|
"12月", |
||||
|
]; // 类别
|
||||
|
let valueList = [ |
||||
|
800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, |
||||
|
]; // 人数
|
||||
|
// var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
|
||||
|
/* 数据整合 */ |
||||
|
let dataList = []; |
||||
|
nameList.map((item, index) => { |
||||
|
if (index === 4) { |
||||
|
dataList.push({ |
||||
|
name: item, |
||||
|
value: valueList[index], |
||||
|
itemStyle: { |
||||
|
color: { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#FFB904", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#FF6969", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
global: false, // 缺省为 false
|
||||
|
}, |
||||
|
borderRadius: 6, |
||||
|
}, |
||||
|
label: { show: false }, |
||||
|
}); |
||||
|
} else { |
||||
|
dataList.push({ |
||||
|
name: item, |
||||
|
value: valueList[index], |
||||
|
itemStyle: { |
||||
|
borderRadius: 6, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
var options = { |
||||
|
grid: { |
||||
|
top: "15%", //上边距
|
||||
|
right: "5px", //右边距
|
||||
|
left: "30px", //左边距
|
||||
|
bottom: "2%", //下边距
|
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + " %"; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: nameList, |
||||
|
axisTick: { |
||||
|
show: false, //隐藏X轴刻度
|
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(49, 217, 255, 0.8)", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
color: "#fff", |
||||
|
fontSize: "10px", |
||||
|
fontFamily: "Source Han Sans CN-Regular", |
||||
|
interval: 0, |
||||
|
rotate: 20, |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: "value", |
||||
|
name: "（%）", |
||||
|
splitNumber: 5, |
||||
|
nameTextStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 10, |
||||
|
align: "right", |
||||
|
// fontFamily: "Source Han Sans CN-Regular",
|
||||
|
// align: "left",
|
||||
|
// verticalAlign: "center",
|
||||
|
}, |
||||
|
axisLabel: { |
||||
|
fontSize: "10px", |
||||
|
color: "#fff", |
||||
|
fontFamily: "HarmonyOS Sans-Regular", |
||||
|
// formatter:function(value,index){
|
||||
|
// return yList[index]
|
||||
|
// }
|
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(49, 217, 255, 0.5)", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "bar", |
||||
|
data: [10, 20, 10, 30, 25, 11, 20], |
||||
|
z: 4, |
||||
|
itemStyle: { |
||||
|
color: { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#06D7B1", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#80F1BB", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
global: false, // 缺省为 false
|
||||
|
}, |
||||
|
borderRadius: [4, 4, 0, 0], |
||||
|
}, |
||||
|
barWidth: 10, |
||||
|
label: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
export default options; |
||||
@ -0,0 +1,144 @@ |
|||||
|
<template> |
||||
|
<div class="congestion"> |
||||
|
<WgtTitle title="设备在线率柱状图"></WgtTitle> |
||||
|
<div class="board" ref="box"> |
||||
|
<Empty v-if="isEmpty" text="暂无数据..."></Empty> |
||||
|
<div ref="barCharts" v-else style="width: 100%; height: 100%"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "../../../../perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartOptions from "./assets/barCharts"; |
||||
|
|
||||
|
export default { |
||||
|
name: "OnLineBarCharts", |
||||
|
components: { |
||||
|
WgtTitle, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isEmpty: true, |
||||
|
}; |
||||
|
}, |
||||
|
props: { |
||||
|
dataList: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
created() {}, |
||||
|
methods: {}, |
||||
|
watch: { |
||||
|
dataList: { |
||||
|
handler(newD, oldD) { |
||||
|
if (!newD || newD.length <= 0) { |
||||
|
this.isEmpty = true; |
||||
|
return; |
||||
|
} |
||||
|
let xData = []; |
||||
|
let valueData = []; |
||||
|
console.log("newD", newD); |
||||
|
newD.forEach((element) => { |
||||
|
xData.push(element.title); |
||||
|
valueData.push(+element.pctOnl.replace("%", "")); |
||||
|
}); |
||||
|
// newD.forEach((element) => { |
||||
|
// value.push(+element.pctOnl.replace("%", "")); |
||||
|
// indicator.push({ name: element.title, max: 100 }); |
||||
|
// toolTip += `<div style="display:flex; justify-content:space-between; line-height:2;"> |
||||
|
// <p>${element.title}</p> |
||||
|
// <p style="font-weight:bold; margin-left:30px">${element.pctOnl}</p> |
||||
|
// </div>`; |
||||
|
// }); |
||||
|
// chartsStatistics.radar.indicator = indicator; |
||||
|
// chartsStatistics.series[0].data = [ |
||||
|
// { |
||||
|
// value: value, |
||||
|
// name: "设备在线率", |
||||
|
// }, |
||||
|
// ]; |
||||
|
// chartsStatistics.tooltip.formatter = (params) => { |
||||
|
// return toolTip; |
||||
|
// }; |
||||
|
this.isEmpty = false; |
||||
|
chartOptions.xAxis.data = xData; |
||||
|
chartOptions.series[0].data = valueData; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(this.$refs["barCharts"]); |
||||
|
myChart.setOption(chartOptions); |
||||
|
chartOptions.counterReset(); |
||||
|
}); |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.congestion { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.board { |
||||
|
position: relative; |
||||
|
height: 510px; |
||||
|
width: 100%; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(6, 66, 88, 0) 0%, |
||||
|
rgba(6, 66, 88, 0.4) 100% |
||||
|
); |
||||
|
// border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 1; |
||||
|
// border: 1px solid; |
||||
|
// border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.ball { |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.ballAnimation { |
||||
|
transform: translate(0px, -10px); |
||||
|
animation: mymove 2s infinite ease-in-out alternate; |
||||
|
|
||||
|
&.level_0 { |
||||
|
animation-delay: 0s; |
||||
|
} |
||||
|
|
||||
|
&.level_1 { |
||||
|
animation-delay: 0.6s; |
||||
|
} |
||||
|
|
||||
|
&.level_2 { |
||||
|
animation-delay: 1.4s; |
||||
|
} |
||||
|
|
||||
|
&.level_3 { |
||||
|
animation-delay: 1.8s; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes mymove { |
||||
|
0% { |
||||
|
transform: translate(0px, -10px); |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: translate(0px, 10px); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue