✨ feat(dashboard): 大屏素材准备
This commit is contained in:
砂糖
299
klp-ui/src/views/dashboard/indexs/right-top.vue
Normal file
299
klp-ui/src/views/dashboard/indexs/right-top.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 14:13:04
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-27 15:04:49
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
|
||||
-->
|
||||
<template>
|
||||
<Echart
|
||||
id="rightTop"
|
||||
:options="option"
|
||||
class="right_top_inner"
|
||||
v-if="pageflag"
|
||||
ref="charts"
|
||||
/>
|
||||
<Reacquire v-else @onclick="getData" style="line-height: 200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from "api/modules";
|
||||
import {graphic} from "echarts"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
pageflag: false,
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData();
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
// this.pageflag =false
|
||||
currentGET("big4").then((res) => {
|
||||
if (!this.timer) {
|
||||
console.log("报警次数", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data;
|
||||
this.$nextTick(() => {
|
||||
this.init(res.data.dateList, res.data.numList, res.data.numList2),
|
||||
this.switper();
|
||||
});
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return;
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData();
|
||||
};
|
||||
this.timer = setInterval(
|
||||
looper,
|
||||
this.$store.state.setting.echartsAutoTime
|
||||
);
|
||||
let myChart = this.$refs.charts.chart;
|
||||
myChart.on("mouseover", (params) => {
|
||||
this.clearData();
|
||||
});
|
||||
myChart.on("mouseout", (params) => {
|
||||
this.timer = setInterval(
|
||||
looper,
|
||||
this.$store.state.setting.echartsAutoTime
|
||||
);
|
||||
});
|
||||
},
|
||||
init(xData, yData, yData2) {
|
||||
this.option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: false, // 不留白，从原点开始
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
// show:false,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: true,
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "28px",
|
||||
containLabel: true,
|
||||
borderColor: "#1F63A3",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警1次数",
|
||||
color: "rgba(252,144,16,.7)",
|
||||
areaStyle: {
|
||||
//右，下，左，上
|
||||
color: new graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(252,144,16,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(252,144,16,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#FC9010",
|
||||
backgroundColor: "rgba(252,144,16,0.1)",
|
||||
borderRadius: 6,
|
||||
padding: [7, 14],
|
||||
borderWidth: 0.5,
|
||||
borderColor: "rgba(252,144,16,.5)",
|
||||
formatter: "报警1：{c}",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: "#FC9010",
|
||||
shadowColor: "#FC9010",
|
||||
shadowBlur: 8,
|
||||
},
|
||||
label: {
|
||||
formatter: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
data: yData2,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警2次数",
|
||||
color: "rgba(9,202,243,.7)",
|
||||
areaStyle: {
|
||||
//右，下，左，上
|
||||
color: new graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(9,202,243,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(9,202,243,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#09CAF3",
|
||||
backgroundColor: "rgba(9,202,243,0.1)",
|
||||
|
||||
borderRadius: 6,
|
||||
borderColor: "rgba(9,202,243,.5)",
|
||||
padding: [7, 14],
|
||||
formatter: "报警2：{c}",
|
||||
borderWidth: 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: "#09CAF3",
|
||||
shadowColor: "#09CAF3",
|
||||
shadowBlur: 8,
|
||||
},
|
||||
label: {
|
||||
formatter: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.right_top_inner {
|
||||
margin-top: -8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user