You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
656 lines
15 KiB
Vue
656 lines
15 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="centerImg"></div>
|
|
<div>
|
|
<div class="menu menuClick" style="left: 2%">
|
|
<span>
|
|
监控主页
|
|
</span>
|
|
</div>
|
|
<div class="menu" style="left: 9%">
|
|
<el-dropdown trigger="click">
|
|
<span class="el-dropdown-link">
|
|
智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
|
<el-dropdown-item>双皮奶</el-dropdown-item>
|
|
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<div class="menu" style="left: 16%">
|
|
<span>
|
|
设备监测
|
|
</span>
|
|
</div>
|
|
<div class="menu" style="left: 23%">
|
|
<span>
|
|
传感器汇总
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Chart ref="chart1" class="chart1"></Chart>
|
|
<div class="chart1Right">
|
|
<p style="color: #2ff;">电流互感器</p>
|
|
<p style="color: #f22;">电压互感器</p>
|
|
<p style="color: #f2f;">变压器</p>
|
|
<p style="color: #1f1;">电容电抗器</p>
|
|
</div>
|
|
<div class="chart1Table">
|
|
<div style="background-color: #094170">
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
名称
|
|
</div>
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
监控数量
|
|
</div>
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
报警数量
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="chart1TableOption"
|
|
:data="chart1Data"
|
|
class="case-item"
|
|
style="height: 84%;overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in chart1Data"
|
|
:key="index"
|
|
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
<div
|
|
class="scrollTable">
|
|
{{ item.name }}
|
|
</div>
|
|
<div
|
|
class="scrollTable">
|
|
{{ item.value2 }}
|
|
</div>
|
|
<div
|
|
class="scrollTable">
|
|
{{ item.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<Chart ref="chart2" class="chart2"></Chart>
|
|
<div class="chart2Table">
|
|
<div style="background-color: #094170">
|
|
<div class="scrollTable" style="font-weight: bold;width: 50%">
|
|
名称
|
|
</div>
|
|
<div class="scrollTable" style="font-weight: bold;width: 50%">
|
|
数量
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="chart1TableOption"
|
|
:data="chart2Data"
|
|
class="case-item"
|
|
style="height: 84%;overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in chart2Data"
|
|
:key="index"
|
|
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
<div class="scrollTable" style="width: 50%">
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="scrollTable" style="width: 50%">
|
|
{{ item.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<div>
|
|
<div class="centerInfo">传感器数量</div>
|
|
<div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">978</div>
|
|
<div class="centerInfo" style="left: 56%">监控单元数量</div>
|
|
<div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">978</div>
|
|
</div>
|
|
<div class="inTransit">在运： <span style="color: #00f6ff">{{ inTransitNum }}</span></div>
|
|
<Chart ref="chart3" class="chart3"></Chart>
|
|
<div class="table1">
|
|
<div style="background-color: #094170">
|
|
<div class="scrollTable" style="font-weight: bold;width: 25%">
|
|
告警编号
|
|
</div>
|
|
<div class="scrollTable" style="font-weight: bold;width: 25%">
|
|
告警类型
|
|
</div>
|
|
<div class="scrollTable" style="font-weight: bold;width: 25%">
|
|
告警位置
|
|
</div>
|
|
<div class="scrollTable" style="font-weight: bold;width: 25%">
|
|
操作
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="chart1TableOption"
|
|
:data="table1Data"
|
|
class="case-item"
|
|
style="height: calc(100% - 33px);overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in table1Data"
|
|
:key="index"
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
<div class="scrollTable" style="width: 25%">
|
|
{{ item.no }}
|
|
</div>
|
|
<div class="scrollTable" style="width: 25%">
|
|
{{ item.type }}
|
|
</div>
|
|
<div class="scrollTable" style="width: 25%">
|
|
{{ item.location }}
|
|
</div>
|
|
<div class="scrollTable" style="width: 25%">
|
|
<el-button size="mini" type="primary">操作</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chart from "@/components/Charts/Chart";
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import * as echarts from 'echarts';
|
|
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
data() {
|
|
return {
|
|
chart1Option: {
|
|
tooltip: {},
|
|
angleAxis: {
|
|
max: 100,
|
|
clockwise: true,
|
|
show: false,
|
|
},
|
|
radiusAxis: {
|
|
type: "category",
|
|
show: true,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
polar: {
|
|
center: ["40%", "50%"],
|
|
radius: "100%", //图形大小
|
|
},
|
|
},
|
|
chart1Color: ['#2ff', '#f22', '#f2f', '#1f1'],
|
|
chart1Data: [
|
|
{
|
|
value: 12,
|
|
value2: 100,
|
|
name: '电流互感器',
|
|
},
|
|
{
|
|
value: 23,
|
|
value2: 100,
|
|
name: '电压互感器',
|
|
},
|
|
{
|
|
value: 34,
|
|
value2: 100,
|
|
name: '变压器',
|
|
},
|
|
{
|
|
value: 45,
|
|
value2: 100,
|
|
name: '电容电抗器',
|
|
}
|
|
],
|
|
chart1TableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 0,
|
|
},
|
|
chart2Data: [
|
|
{
|
|
value: 111,
|
|
name: '无源温度传感器',
|
|
},
|
|
{
|
|
value: 111,
|
|
name: '有源温度传感器',
|
|
},
|
|
{
|
|
value: 111,
|
|
name: '烟雾传感器',
|
|
},
|
|
{
|
|
value: 111,
|
|
name: '温湿度传感器',
|
|
},
|
|
{
|
|
value: 111,
|
|
name: 'CO传感器',
|
|
}
|
|
],
|
|
chart2Option: {
|
|
color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
|
|
legend: {
|
|
orient: "vertical",
|
|
x: "right",
|
|
y: "center",
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b} : ({d}%)",
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["45%", "76%"],
|
|
center: ["35%", "50%"],
|
|
encode: {
|
|
itemName: "group",
|
|
value: "占比",
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
opacity: '0.8'
|
|
}
|
|
},
|
|
{
|
|
type: "pie",
|
|
radius: ["75%", "90%"],
|
|
center: ["35%", "50%"],
|
|
encode: {
|
|
itemName: "group",
|
|
value: "占比",
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
inTransitNum: 1999,
|
|
chart3Data: [
|
|
{
|
|
date: '10-01',
|
|
value: '100',
|
|
},
|
|
{
|
|
date: '10-02',
|
|
value: '200',
|
|
},
|
|
{
|
|
date: '10-03',
|
|
value: '100',
|
|
},
|
|
{
|
|
date: '10-04',
|
|
value: '300',
|
|
},
|
|
{
|
|
date: '10-05',
|
|
value: '200',
|
|
},
|
|
],
|
|
chart3Option: {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "middle",
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
height: "80%",
|
|
containLabel: true,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#ccc3",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#ccc",
|
|
},
|
|
},
|
|
nameTextStyle: {
|
|
color: "#999",
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
table1Data: [
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
{
|
|
no: '001',
|
|
type: '高温警告',
|
|
location: '车间',
|
|
},
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
let option1 = {
|
|
...this.chart1Option,
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
data: this.chart1Data.map((e, i) => {
|
|
return {
|
|
value: (e.value / e.value2) * 100,
|
|
name: e.name,
|
|
itemStyle: {
|
|
color: this.chart1Color[i]
|
|
}
|
|
}
|
|
}),
|
|
showBackground: true,
|
|
coordinateSystem: "polar",
|
|
roundCap: true,
|
|
barWidth: 8,
|
|
},
|
|
]
|
|
}
|
|
this.$refs.chart1.setData(option1)
|
|
let chart2Num = eval(this.chart2Data.map(e => e.value).join("+"));
|
|
let option2 = {
|
|
...this.chart2Option,
|
|
dataset: {
|
|
source: [
|
|
["group", "占比"],
|
|
...this.chart2Data.map(e => [e.name, (e.value / chart2Num) * 100])
|
|
],
|
|
}
|
|
}
|
|
this.$refs.chart2.setData(option2)
|
|
let option3 = {
|
|
...this.chart3Option,
|
|
xAxis: {
|
|
boundaryGap: false,
|
|
type: "category",
|
|
data: this.chart3Data.map(e => e.date),
|
|
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#ccc3",
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#999",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "line",
|
|
data: this.chart3Data.map(e => e.value),
|
|
color: "#00dae0",
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#00dae033",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(0,202,149,0)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(0,202,149, 0.9)",
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}
|
|
this.$refs.chart3.setData(option3)
|
|
},
|
|
methods: {}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.container {
|
|
background-image: url("~@/assets/board/index/bg.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: calc(100vh);
|
|
position: relative;
|
|
}
|
|
|
|
.centerImg {
|
|
background-image: url("~@/assets/board/index/container.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
width: 45vw;
|
|
height: 20vw;
|
|
top: 60%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.menu {
|
|
background-image: url("~@/assets/board/common/subheadClick1.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
width: 8vw;
|
|
height: 1.66vw;
|
|
top: 3.8%;
|
|
line-height: 1.66vw;
|
|
font-size: 0.8vw;
|
|
color: #d4d4d4;
|
|
text-align: center;
|
|
}
|
|
|
|
.menu .el-dropdown {
|
|
font-size: 0.8vw;
|
|
color: #d4d4d4;
|
|
}
|
|
|
|
.menuClick {
|
|
background-image: url("~@/assets/board/common/subheadClick.png");
|
|
color: #f3f3f3;
|
|
}
|
|
|
|
.scrollTable {
|
|
color: rgb(185, 186, 192);
|
|
margin: auto 0px;
|
|
padding: 4px 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 33%;
|
|
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
width: 20%;
|
|
height: 21%;
|
|
top: 16%;
|
|
left: 3%;
|
|
}
|
|
|
|
.chart1Right {
|
|
background-image: url("~@/assets/board/common/bg1.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 12px;
|
|
position: absolute;
|
|
top: 17%;
|
|
left: 18%;
|
|
}
|
|
|
|
.chart1Table {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 2.8%;
|
|
width: 21%;
|
|
height: 14%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
width: 20%;
|
|
height: 21%;
|
|
top: 58.5%;
|
|
left: 3%;
|
|
}
|
|
|
|
.chart2Table {
|
|
position: absolute;
|
|
top: 81%;
|
|
left: 2.8%;
|
|
width: 21%;
|
|
height: 15%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.centerInfo {
|
|
position: absolute;
|
|
width: 7%;
|
|
top: 17.5%;
|
|
left: 32.7%;
|
|
font-size: 1.4vw;
|
|
text-align: center;
|
|
transform: translateX(-50%);
|
|
color: #01c7fd;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.inTransit {
|
|
position: absolute;
|
|
top: 16%;
|
|
left: 87%;
|
|
transform: translateX(-50%);
|
|
font-size: 1.2vw;
|
|
color: rgb(30, 158, 223);
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
width: 21%;
|
|
height: 22%;
|
|
top: 21.5%;
|
|
left: 76.1%;
|
|
}
|
|
|
|
.table1 {
|
|
position: absolute;
|
|
width: 21%;
|
|
height: 50%;
|
|
top: 45.5%;
|
|
left: 76.3%;
|
|
}
|
|
</style>
|