报警信息80%

src/views/Alarm/Alarm.vue

@@ -1,13 +1,192 @@
 <template>
-  <div>报警信息</div>
+  <div class="alarm">
+    <div class="alarm-top">
+      <div class="alarm-top-left">
+        <div class="alarm-divide line">
+          <div class="alarm-title">
+            <div class="alarm-title-left"></div>
+            <div class="alarm-title-center">今日报警</div>
+            <div class="alarm-title-right"></div>
+          </div>
+          <div class="alarm-content">
+            <chart-pie></chart-pie>
+          </div>
+        </div>
+        <div class="alarm-divide">
+          <div class="alarm-title">
+            <div class="alarm-title-left"></div>
+            <div class="alarm-title-center">报警分布</div>
+            <div class="alarm-title-right"></div>
+          </div>
+          <div class="alarm-content">
+            <alarm-bar></alarm-bar>
+          </div>
+        </div>
+      </div>
+      <div class="alarm-top-center">
+        <div class="alarm-title">
+          <div class="alarm-title-left"></div>
+          <div class="alarm-title-center">场区概况</div>
+          <div class="alarm-title-right"></div>
+        </div>
+        <div class="alarm-content">
+          <img src="../../assets/Alarm/111.png" width="100%" alt="">
+        </div>
+      </div>
+      <div class="alarm-top-left">
+        <div class="alarm-divide">
+          <div class="alarm-title">
+            <div class="alarm-title-left"></div>
+            <div class="alarm-title-center">事件提醒</div>
+            <div class="alarm-title-right"></div>
+          </div>
+          <div class="alarm-content">
+            <cost-pie :pieData="pieData"></cost-pie>
+          </div>
+        </div>
+        <div class="alarm-divide">
+          <div class="alarm-title">
+            <div class="alarm-title-left"></div>
+            <div class="alarm-title-center">事件分布</div>
+            <div class="alarm-title-right"></div>
+          </div>
+          <div class="alarm-content">
+            <alarm-bar :bar-data="barData"></alarm-bar>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import ChartPie from "@/views/Alarm/chart/ChartPie";
+import AlarmBar from "@/views/Alarm/chart/AlarmBar";
+import CostPie from "@/views/Alarm/chart/CostPie";
 export default {
-name: "Alarm"
+  name: "Alarm",
+  components: {
+    ChartPie,
+    AlarmBar,
+    CostPie
+  },
+  data() {
+    return {
+      barData: {
+        id: 1,
+        salvProName: ['死猪运输', '车辆洗消', '人员违规', '猪只出售'],
+        salvProValue: [489, 301, 315, 341]
+      },
+      pieData: [
+        {
+          name: '死猪运输',
+          value: 42
+        },
+        {
+          name: '车辆洗消',
+          value: 26
+        },
+        {
+          name: '人员违规',
+          value: 20
+        },
+        {
+          name: '猪只出售',
+          value: 12
+        },
+      ]
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+  .alarm {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 0 0 0;
+  }
+  .alarm-top {
+    width: 100%;
+    height: 550px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .alarm-top-left {
+    width: 405px;
+    height: 100%;
+  }
+  .alarm-top-center {
+    flex: 1;
+    margin: 0 20px;
+  }
+  .alarm-divide {
+    width: 100%;
+    height: 50%;
+  }
+  .alarm-title {
+    width: 100%;
+    height: 26px;
+    display: flex;
+  }
+  .alarm-title-left {
+    flex: 1;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1717.svg") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .alarm-title-left:before {
+    content: '';
+    height: 85%;
+    border: 2px solid #66FFFF;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .alarm-title-center {
+    width: 120px;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
+    background-size: 100% 100%;
+    line-height: 26px;
+    color: white;
+    font-size: 16px;
+  }
+  .alarm-title-right {
+    flex: 1;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1718.svg") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .alarm-title-right:after {
+    content: '';
+    height: 85%;
+    border: 2px solid #66FFFF;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .alarm-content {
+    width: 100%;
+    height: calc(100% - 26px);
+  }
+  .line {
+    transition: all 1s ease-out;
+    z-index: 999;
+  }
+  .line:hover {
+    transform-origin: 0 0;
+    transform: scale(1.5);
+  }
+  /*@keyframes scale {*/
+  /*  0% {*/
+  /*    transform: translate(40px);*/
+  /*  }*/
+  /*  100% {*/
+  /*    transform: scale(1.5);*/
+  /*  }*/
+  /*}*/
 </style>

src/views/Alarm/chart/AlarmBar.vue

@@ -0,0 +1,133 @@
+<template>
+  <div :id="'alarm-bar-'+barData.id" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+import echarts from 'echarts';
+export default {
+  name: "AlarmBar",
+  props: {
+    barData: {
+      type: Object,
+      default: function () {
+        return {
+          id: 0,
+          salvProName: ["一级","二级","三级"],
+          salvProValue: [239,181,154]
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let that = this;
+      let options = {
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          top: '2%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none'
+          },
+          formatter: function(params) {
+            return params[0].name  + ' : ' + params[0].value
+          }
+        },
+        xAxis: {
+          show: false,
+          type: 'value'
+        },
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            },
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          data: that.barData.salvProName
+        }, {
+          type: 'category',
+          inverse: true,
+          axisTick: 'none',
+          axisLine: 'none',
+          show: true,
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+              fontSize: '12'
+            },
+          },
+          data: that.barData.salvProValue
+        }],
+        series: [{
+          name: '值',
+          type: 'bar',
+          zlevel: 1,
+          itemStyle: {
+            normal: {
+              barBorderRadius: 30,
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: '#3498DB'
+              }, {
+                offset: 1,
+                color: '#3498DB'
+              }]),
+            },
+          },
+          barWidth: 20,
+          data: that.barData.salvProValue
+        },
+          {
+            name: '背景',
+            type: 'bar',
+            barWidth: 20,
+            barGap: '-100%',
+            data: [],
+            itemStyle: {
+              normal: {
+                color: 'rgba(24,31,68,1)',
+                barBorderRadius: 30,
+              }
+            },
+          },
+        ]
+      }
+      this.myChart.setOption(options);
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('alarm-bar-' + this.barData.id));
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/chart/ChartPie.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="chartPie" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartPie",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        // title: {
+        //   text: '报警总量',
+        //   x: 20,
+        //   y: 20
+        // },
+        grid: {
+          x: 100
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: function ({name, value, percent}) {
+            return name + '：' + value + '头&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
+          }
+        },
+        legend: {
+          top: '25%',
+          left: '55%',
+          orient: 'vertical',
+          icon: "circle",
+          selectedMode: false, // 取消右侧项选中
+          itemGap: 20, // 各项间隔
+          textStyle: {
+            fontSize: 15,
+            color: '#666'
+          },
+          formatter: function (name) {
+            var legendIndex = 0;
+            var clientLabels = [
+              { name: '环境报警', percent: parseFloat(0.16)*100 + '%', number: 2 },
+              { name: '断电报警', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+              { name: '人员违规', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+              { name: '环境监测', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+              { name: '污水排放', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+              { name: '设备异常', percent:  parseFloat(0.16)*100 + '%', number: 2 },
+            ]
+            clientLabels.forEach(function (value, i) {
+              if (value.name == name) {
+                legendIndex = i;
+              }
+            });
+            return name + " (" + clientLabels[legendIndex].percent + ', ' + clientLabels[legendIndex].number + '条' + ") ";
+          }
+        },
+        graphic: [
+          {
+            type: 'text',
+            left: '27%',
+            top: '43%',
+            style: {
+              text: '报警总量',
+              fontSize: 15,
+              fill: 'rgb(192, 188, 189)'
+            }
+          },
+          {
+            type: 'text',
+            left: '25%',
+            top: '53%',
+            style: {
+              text: 100 + '条',
+              fontSize: 22,
+              fontWeight: 700
+            }
+          }
+        ],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['60%', '80%'], // 半径
+            center: ['30%', '55%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              // position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '40',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
+                  return colorList[colors.dataIndex]
+                },
+                borderWidth: 5, // 设置各项空隙
+                borderColor: '#fff'
+              }
+            },
+            data: [
+              { value: 16, name: '环境报警' },
+              { value: 16, name: '断电报警' },
+              { value: 16, name: '人员违规' },
+              { value: 16, name: '环境监测' },
+              { value: 16, name: '污水排放' },
+              { value: 16, name: '设备异常' },
+            ]
+          }
+        ]
+      };
+
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartPie'));
+    this.init()
+    let that = this;
+    window.addEventListener("resize", function () {
+      that.myChart.resize()
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/chart/CostPie.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="costPie" style="width: 100%; height: 100%;"></div>
+</template>
+<script>
+export default {
+  props: {
+    pieData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        grid: {
+          x: 100
+        },
+        // legend: {
+        //   top: '25%',
+        //   left: '75%',
+        //   orient: 'vertical',
+        //   icon: "circle",
+        //   selectedMode: false, // 取消右侧项选中
+        //   itemGap: 20, // 各项间隔
+        //   textStyle: {
+        //     fontSize: 15,
+        //     color: '#666'
+        //   },
+        // },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: '70%', // 半径
+            center: ['50%', '55%'],
+            avoidLabelOverlap: false,
+            labelLine: {
+              show: true
+            },
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
+                  return colorList[colors.dataIndex]
+                },
+                label: {
+                  formatter: '{b}: {c}%'
+                }
+              },
+              label: {
+                show: false
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  formatter: '{b}: {c}%',
+                  textStyle: {
+                    fontSize: '15',
+                  }
+                },
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+            },
+            data: this.pieData
+          }
+        ]
+      };
+
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('costPie'));
+    this.init()
+  },
+  watch: {
+    data(value) {
+      console.log('成本分析环形图数据', value)
+      this.init()
+    }
+  }
+}
+</script>
+<style scoped>
+  #costPie {
+    width: 100%;
+    height: 100%;
+  }
+</style>>