|
@@ -1,290 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="left-charts">
|
|
|
- <div class="left-chart-item">
|
|
|
- <dv-charts class="item-chart" :option="option" />
|
|
|
- <!-- <div class="user_Overview_nums allnum">
|
|
|
- <dv-digital-flop :config="config" style="width: 100%; height: 100%" />
|
|
|
- </div> -->
|
|
|
- <div class="item-chart-word-num zongshu">总数</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="left-chart-item">
|
|
|
- <dv-charts class="item-chart" :option="option1" />
|
|
|
- <div class="item-chart-word-num zaixianshu">在线数</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="left-chart-item">
|
|
|
- <dv-charts class="item-chart" :option="option2" />
|
|
|
- <div class="item-chart-word-num lixianshu">离线数</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="left-chart-item">
|
|
|
- <dv-charts class="item-chart" :option="option3" />
|
|
|
- <div class="item-chart-word-num gaojingshu">告警数</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-let style = {
|
|
|
- fontSize: 24,
|
|
|
-};
|
|
|
-export default {
|
|
|
- name: "BottomCharts",
|
|
|
- props: {
|
|
|
- data: {
|
|
|
- type: Object,
|
|
|
- default: {},
|
|
|
- },
|
|
|
- },
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- config: {
|
|
|
- number: [100],
|
|
|
- content: "{nt}",
|
|
|
- style: {
|
|
|
- ...style,
|
|
|
- // stroke: "#00fdfa",
|
|
|
- fill: "#00fdfa",
|
|
|
- },
|
|
|
- },
|
|
|
- timer: null,
|
|
|
- equTotalData: {},
|
|
|
- deviceCount: 0,
|
|
|
- deviceOnline: 0,
|
|
|
- un_deviceOnline: 0,
|
|
|
- alarmCount: 0,
|
|
|
- option: {
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: "gauge",
|
|
|
- startAngle: -Math.PI / 2,
|
|
|
- endAngle: Math.PI * 1.5,
|
|
|
- arcLineWidth: 10,
|
|
|
- radius: "80%",
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "itemA",
|
|
|
- value: this.data.deviceCount,
|
|
|
- // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
|
|
|
- gradient: ["#01dcdf"],
|
|
|
- },
|
|
|
- ],
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- dataItemStyle: {
|
|
|
- lineCap: "round",
|
|
|
- },
|
|
|
- details: {
|
|
|
- show: true,
|
|
|
- formatter: "{value}",
|
|
|
- style: {
|
|
|
- fill: "#1ed3e5",
|
|
|
- fontSize: 30,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- option1: {
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: "gauge",
|
|
|
- startAngle: -Math.PI / 2,
|
|
|
- endAngle: Math.PI * 1.5,
|
|
|
- arcLineWidth: 10,
|
|
|
- radius: "80%",
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "itemA",
|
|
|
- value: this.data.deviceOnline,
|
|
|
- // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
|
|
|
- gradient: ["#33faaa"],
|
|
|
- },
|
|
|
- ],
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- dataItemStyle: {
|
|
|
- lineCap: "round",
|
|
|
- },
|
|
|
- details: {
|
|
|
- show: true,
|
|
|
- formatter: "{value}",
|
|
|
- style: {
|
|
|
- fill: "#1ed3e5",
|
|
|
- fontSize: 30,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- option2: {
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: "gauge",
|
|
|
- startAngle: -Math.PI / 2,
|
|
|
- endAngle: Math.PI * 1.5,
|
|
|
- arcLineWidth: 10,
|
|
|
- radius: "80%",
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "itemA",
|
|
|
- value: this.data.un_deviceOnline,
|
|
|
- // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
|
|
|
- gradient: ["#f7ac20"],
|
|
|
- },
|
|
|
- ],
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- dataItemStyle: {
|
|
|
- lineCap: "round",
|
|
|
- },
|
|
|
- details: {
|
|
|
- show: true,
|
|
|
- formatter: "{value}",
|
|
|
- style: {
|
|
|
- fill: "#1ed3e5",
|
|
|
- fontSize: 30,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- option3: {
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: "gauge",
|
|
|
- startAngle: -Math.PI / 2,
|
|
|
- endAngle: Math.PI * 1.5,
|
|
|
- arcLineWidth: 10,
|
|
|
- radius: "80%",
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "itemA",
|
|
|
- value: this.data.alarmCount,
|
|
|
- // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
|
|
|
- gradient: ["#f93496", "#f61967", "#f2053e"],
|
|
|
- },
|
|
|
- ],
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- dataItemStyle: {
|
|
|
- lineCap: "round",
|
|
|
- },
|
|
|
- details: {
|
|
|
- show: true,
|
|
|
- formatter: "{value}",
|
|
|
- style: {
|
|
|
- fill: "#1ed3e5",
|
|
|
- fontSize: 30,
|
|
|
- },
|
|
|
- },
|
|
|
- animationFrame: 10,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.deviceView();
|
|
|
- },
|
|
|
- methods: {},
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-.user_Overview_nums {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- text-align: center;
|
|
|
- line-height: 100px;
|
|
|
- font-size: 22px;
|
|
|
- margin: 50px auto 30px;
|
|
|
- background-size: cover;
|
|
|
- background-position: center center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &.bgdonghua::before {
|
|
|
- animation: rotating 14s linear infinite;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
- .allnum {
|
|
|
- &::before {
|
|
|
- background-image: url("./img/left_top_lan.png");
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-.left-charts {
|
|
|
- width: 100%;
|
|
|
- height: 80%;
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .left-chart-item {
|
|
|
- width: 25%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- .item-chart {
|
|
|
- height: calc(100% - 80px);
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .item-chart-word-num {
|
|
|
- font-size: 20px;
|
|
|
- margin-top: 15px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .zongshu {
|
|
|
- color: rgb(0, 253, 250);
|
|
|
- }
|
|
|
- .zaixianshu {
|
|
|
- color: rgb(7, 247, 168);
|
|
|
- }
|
|
|
- .lixianshu {
|
|
|
- color: rgb(227, 179, 55);
|
|
|
- }
|
|
|
- .gaojingshu {
|
|
|
- color: rgb(245, 2, 61);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|