frontend/src/views/stritl/index.vue

<template>
  <div class="stritleEchartsPage">
    <div class="echart-top">
      <el-card class="box-card">
        <h3>装置数量统计</h3>
        <div class="bottomM">
          <div class="infoBox">
            <p>
              <span>装置总数</span>
              <span>260</span>
            </p>
            <p>
              <span>在线数量</span>
              <span>4</span>
            </p>
            <p>
              <span>离线率</span>
              <span>99.85%</span>
            </p>
            <p>
              <span>在线率</span>
              <span>0.15%</span>
            </p>
          </div>
        </div>
        <!-- <div id="echart1" style="width: 100%; height: 100%"></div> -->
      </el-card>
      <el-card class="box-card">
        <h3>装置在线统计</h3>
        <div id="echart2" style="width: 100%; height: 100%"></div>
      </el-card>
    </div>
    <div class="echart-top">
      <el-card class="box-card">
        <h3>隐患数量统计</h3>
        <div class="dateBox">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changedate"
            :picker-options="morepickerOptions"
          >
          </el-date-picker>
        </div>
        <div id="echart3" style="width: 100%; height: 100%"></div>
      </el-card>
      <el-card class="box-card">
        <h3>隐患分类统计</h3>
        <div class="dateBox">
          <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="singpickerOptions"
          >
          </el-date-picker>
        </div>
        <div id="echart4" style="width: 100%; height: 100%"></div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getTermStatistics } from "@/utils/api/index";
export default {
  name: "",
  data() {
    return {
      termDataNum: "",
      value1: "",
      value2: "",
      morepickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      singpickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      myChart2: "",
      myChart3: "",
      myChart4: "",
    };
  },
  mounted() {
    this.getTermData();
    this.init();
    console.log(this.value1);
  },
  watch: {
    "$store.state.collapse"(val) {
      console.log(val);
      setTimeout(() => {
        //echarts得重绘方法
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
        this.myChart4.resize();
      }, 300);
    },
  },
  methods: {
    changedate() {
      console.log(this.value1);
    },
    getTermData() {
      getTermStatistics()
        .then((res) => {
          console.log(res);
          this.termDataNum = res.data;
        })
        .catch((err) => {});
    },
    init() {
      this.getEchart2();
      this.getEchart3();
      this.getEchart4();
    },

    getEchart2() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart2")).dispose();
        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
        let option = {
          // title: {
          //   text: "装置在线统计",
          // },
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,

              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
                formatter: "{b}\n{d}%",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 26,
                  fontWeight: "bold",
                  formatter: "{b}\n{d}%",
                },
              },
              labelLine: {
                show: true,
              },
              data: [
                { value: 1048, name: "在线" },
                { value: 735, name: "离线" },
              ],
            },
          ],
        };
        this.myChart2.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart2.resize();
        });
      });
    },

    getEchart3() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart3")).dispose();
        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
        let option = {
          // title: {
          //   text: "隐患分类统计",
          // },
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: { type: "value" },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: "bar",
              showBackground: true,
              backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
            },
          ],
        };
        this.myChart3.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart3.resize();
        });
      });
    },
    getEchart4() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart4")).dispose();
        this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
        let option = {
          // title: {
          //   text: "隐患分类统计",
          // },
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: { type: "value" },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: "bar",
              showBackground: true,
              backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
            },
          ],
        };
        this.myChart4.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart4.resize();
        });
      });
    },
  },
};
</script>
<style lang="less">
.stritleEchartsPage {
  height: calc(100% - 32px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .echart-top {
    display: flex;
    height: 48%;
    justify-content: space-between;
    .el-card {
      width: 49%;
      height: 100%;
      .el-card__body {
        height: calc(100% - 40px);
        position: relative;
      }
    }
    .box-card {
      h3 {
        font-size: 18px;
        color: #333;
        line-height: 32px;
      }
      .bottomM {
        .infoBox {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          margin-top: 32px;
          p {
            width: 40%;
            height: 88px;
            text-align: center;
            margin: 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            span {
              color: #333;
              font-size: 16px;
              &:last-child {
                font-size: 20px;
                margin-top: 5px;
                font-weight: bold;
              }
            }
            &:first-child {
              //background: url("../../assets/img/border-blue.png");
              background: linear-gradient(
                to bottom,
                rgb(22, 158, 140, 0.3) 0%,
                rgba(255, 255, 255, 0.1) 30%,
                rgba(255, 255, 255, 0.1) 40%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0.1) 60%,
                rgba(255, 255, 255, 0.1) 70%,
                rgb(22, 158, 140, 0.3) 100%
              );
            }
            &:nth-child(2) {
              background: url("../../assets/img/border-green.png");

              background: linear-gradient(
                to bottom,
                rgb(0, 234, 27, 0.3) 0%,
                rgba(255, 255, 255, 0.1) 30%,
                rgba(255, 255, 255, 0.1) 40%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0.1) 60%,
                rgba(255, 255, 255, 0.1) 70%,
                rgb(0, 234, 27, 0.3) 100%
              );
            }
            &:nth-child(3) {
              background: url("../../assets/img/border-yellow.png");
              background: linear-gradient(
                to bottom,
                rgb(207, 222, 44, 0.3) 0%,
                rgba(255, 255, 255, 0.1) 30%,
                rgba(255, 255, 255, 0.1) 40%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0.1) 60%,
                rgba(255, 255, 255, 0.1) 70%,
                rgb(207, 222, 44, 0.3) 100%
              );
            }
            &:nth-child(4) {
              background: url("../../assets/img/border-gray.png");
              background: linear-gradient(
                to bottom,
                rgb(84, 112, 198, 0.3) 0%,
                rgba(255, 255, 255, 0.1) 30%,
                rgba(255, 255, 255, 0.1) 40%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0.1) 60%,
                rgba(255, 255, 255, 0.1) 70%,
                rgb(84, 112, 198, 0.3) 100%
              );
            }
          }
        }
      }
      .dateBox {
        position: absolute;
        top: 20px;
        right: 20px;
      }
    }
  }
}
</style>