样式修改

shuishen

2021-04-08 a4e06ccd3cd976fbe4eef99e188d42ec9f3ad054

 src/views/supervisoryConsole/data.vue

@@ -22,49 +22,41 @@
            <div class="info-active-top">
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(0)"
                    class="dashboard_alarm ng-binding"
                    >预警</span
                  >
                  <span class="dashboard_alarm ng-binding">预警</span>
                </div>
                <div><span class="ng-binding">3</span></div>
                <div class="ng-binding">占比&nbsp;1.8%</div>
                <div>
                  <span class="ng-binding">{{ yj }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ yjper }}</div>
              </div>
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(4)"
                    class="dashboard_malfunction ng-binding"
                    >故障</span
                  >
                  <span class="dashboard_malfunction ng-binding">故障</span>
                </div>
                <div><span class="ng-binding">25</span></div>
                <div class="ng-binding">占比&nbsp;15%</div>
                <div>
                  <span class="ng-binding">{{ gz }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ gzper }}</div>
              </div>
            </div>
            <div class="info-active-bottom">
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(1)"
                    class="dashboard_normal ng-binding"
                    >正常</span
                  >
                  <span class="dashboard_normal ng-binding">正常</span>
                </div>
                <div><span class="ng-binding">125</span></div>
                <div class="ng-binding">占比&nbsp;75%</div>
                <div>
                  <span class="ng-binding">{{ zx }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ zxper }}</div>
              </div>
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(3)"
                    class="dashboard_inactive ng-binding"
                    >掉线</span
                  >
                  <span class="dashboard_inactive ng-binding">掉线</span>
                </div>
                <div><span class="ng-binding">15</span></div>
                <div class="ng-binding">占比&nbsp;10%</div>
                <div>
                  <span class="ng-binding">{{ dx }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ dxper }}</div>
              </div>
            </div>
          </div>
@@ -87,7 +79,7 @@
            :data="tableData"
            stripe
            style="width: 100%; margin: 10px"
            max-height="352px"
            max-height="380px"
            :resizable="false"
          >
            <el-table-column prop="waringType" label="警情类型" width="100">
@@ -124,16 +116,12 @@
          <div class="alarm-bar">
            <div class="alarm-bar-title">
              <div class="title-left ng-binding">日累计预警事件数</div>
              <div class="title-right week ng-scope" ng-if="$ctrl.barRate >= 1">
              <div class="title-right week">
                <span class="ng-binding">0</span
                ><span class="ng-binding">1.00</span>
              </div>
            </div>
            <div
              class="week-alarm-bar ng-isolate-scope"
              data="$ctrl.weekAlarm"
              alarm-bar="alarmBarEvent(chart)"
            ></div>
            <div class="week-alarm-bar" id="day_warn_echarts"></div>
          </div>
          <div class="border-line"></div>
          <div class="alarm-line">
@@ -141,22 +129,12 @@
              <div class="title-left change-flex-alarm ng-binding">
                日累计预警设备数
              </div>
              <!-- ngIf: $ctrl.deviceRate >= 1 -->
              <div
                class="title-right week ng-scope"
                ng-if="$ctrl.deviceRate >= 1"
              >
              <div class="title-right week">
                <span class="ng-binding">0</span
                ><span class="ng-binding">1.00</span>
              </div>
              <!-- end ngIf: $ctrl.deviceRate >= 1 -->
              <!-- ngIf: $ctrl.deviceRate < 1 -->
            </div>
            <div
              class="week-device-line ng-isolate-scope"
              data="$ctrl.weekDevice"
              device-line="deviceLineEvent(chart)"
            ></div>
            <div class="week-device-line" id="day_equipment_echarts"></div>
          </div>
        </div>
      </div>
@@ -165,12 +143,25 @@
</template>

<script>
import { getList } from "@/api/supervisory/data";
import {
  getList,
  getEquipmentList,
  getDayWarnList,
  getEquipment,
} from "@/api/supervisory/data";

export default {
  data() {
    return {
      tableData: [],
      dx: null,
      zx: null,
      gz: null,
      yj: null,
      dxper: null,
      zxper: null,
      gzper: null,
      yjper: null,
    };
  },
  created() {
@@ -190,34 +181,64 @@
        });
      });
    });

    getEquipmentList().then((res) => {
      that.drawLine(res.data.data);
    });

    getDayWarnList().then((res) => {
      that.drawPillar(res.data.data);
    });

    getEquipment().then((res) => {
      console.log(res.data.data, 123);

      var total = 0;

      total += res.data.data.zx;
      total += res.data.data.dx;
      total += res.data.data.gz;

      console.log(total, 45);

      that.dx = res.data.data.dx;
      that.zx = res.data.data.zx;
      that.gz = res.data.data.gz;
      that.yj = res.data.data.yj;
      that.dxper = ((res.data.data.dx / total) * 100).toFixed(2) + "%";
      that.zxper = ((res.data.data.zx / total) * 100).toFixed(2) + "%";
      that.gzper = ((res.data.data.gz / total) * 100).toFixed(2) + "%";
      that.yjper = ((res.data.data.yj / total) * 100).toFixed(2) + "%";

      that.drawPie();
    });
  },
  mounted() {
    this.drawPie();
  },
  mounted() {},
  methods: {
    drawPie() {
      var that = this;
      var myChart = this.$echarts.init(
        document.getElementById("base_information_pie_echarts")
      );

      var m2R2Data = [
        {
          value: 125,
          value: that.zx,
          legendname: "正常",
          name: "正常",
          itemStyle: { color: "#29c194" },
        },
        {
          value: 25,
          value: that.gz,
          legendname: "故障",
          name: "故障",
          itemStyle: { color: "#b6b6b6" },
        },
        {
          value: 15,
          value: that.dx,
          legendname: "掉线",
          name: "掉线",
          itemStyle: { color: "#6d5eac" },
          itemStyle: { color: "#F48F57" },
        },
      ];

@@ -250,8 +271,6 @@
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
@@ -267,7 +286,6 @@
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["66%", "86%"],
@@ -289,6 +307,164 @@
      };
      myChart.setOption(option);
    },

    drawLine(result) {
      var myChart = this.$echarts.init(
        document.getElementById("day_equipment_echarts")
      );

      var xData = [];
      var yData = [];

      result.forEach((item) => {
        xData.push(item.time.substr(5));
        yData.push(item.Coun);
      });

      var option = {
        color: "#A58ABF",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: false,
            },
            lineStyle: {
              width: 0,
            },
          },
          formatter: function (parms) {
            var str =
              parms[0].axisValue +
              "</br>" +
              parms[0].marker +
              "设备数：" +
              parms[0].value;
            return str;
          },
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderWidth: 0,
        },
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#F0F0F0",
            },
          },
          axisLabel: {
            color: "#6E6E6E",
          },
        },
        yAxis: {
          type: "value",
          show: false,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          // boundaryGap: [0, "40%"],
        },
        series: [
          {
            type: "line",
            smooth: 0.8,
            // symbol: "none",
            data: yData,
            areaStyle: {},
          },
        ],
      };
      myChart.setOption(option);
    },

    drawPillar(data) {
      var myChart = this.$echarts.init(
        document.getElementById("day_warn_echarts")
      );

      var xData = [];
      var yData = [];

      data.times.forEach((item) => {
        xData.push(item.substr(5));
      });

      data.dataList.forEach((item) => {
        if (item.name == "一键求助") {
          yData = item.alarmData;
        }
      });

      var option = {
        color: "#F34A4A",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: false,
            },
            lineStyle: {
              width: 0,
            },
          },
          formatter: function (parms) {
            var str =
              parms[0].axisValue +
              "</br>" +
              parms[0].marker +
              "事件数：" +
              parms[0].value;
            return str;
          },
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderWidth: 0,
        },
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#F0F0F0",
            },
          },
          axisLabel: {
            color: "#6E6E6E",
          },
        },
        yAxis: {
          type: "value",
          show: false,
          boundaryGap: [0, "40%"],
        },
        series: [
          {
            data: yData,
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
@@ -299,7 +475,7 @@
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 0px !important;
  height: 96% !important;
  height: 100% !important;
  font-size: 14px;
  &:nth-child(2) {
    padding-left: 10px;
@@ -355,7 +531,7 @@
            background-color: #29c093;
          }
          &:nth-child(3)::before {
            background-color: #6d5eac;
            background-color: #F48F57;
          }
          &:nth-child(4)::before {
            background-color: #dfdfdf;
@@ -416,20 +592,20 @@
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(1) span {
            border: 1px solid #6d5eac;
            color: #6d5eac;
            border: 1px solid #F48F57;
            color: #F48F57;
          }
          .active-list:nth-child(1) > div:nth-child(1) span:hover {
            background: rgba(41, 192, 147, 0.15);
          }
          .active-list:nth-child(2) > div:nth-child(1) span:hover {
            background: #e9e7f3;
            background: #f3ab8448;
          }
          .active-list:nth-child(1) > div:nth-child(2) span {
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(2) span {
            color: #6d5eac;
            color: #F48F57;
          }
        }
        .info-active-top,
@@ -526,13 +702,13 @@
        display: flex;
        margin-top: 44px;
        height: calc(100% - 54px);
        background: pink;
        // background: pink;
      }
      .week-device-line {
        display: flex;
        margin-top: 44px;
        height: calc(100% - 54px);
        background: orange;
        // background: orange;
      }
    }
    .border-line {