Xjtj.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 13:42:45
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-10-22 11:36:35
 * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="first-wrapper flex">
    <Title text="巡检统计" />
    <div class="two flex">
      <div class="top">
        <div class="time">
          <span
            v-for="item in ['日', '月', '年']"
            :key="item"
            @click="timeChange(item)"
            :class="{ active: item == yearActive }"
          >
            {{ item }}
          </span>
        </div>

        <div class="countNumbe flex">
          <div
            v-for="item in numData"
            :key="item.name"
            class="countNumbe-item flex"
          >
            <div class="img">
              <img :src="item.icon" alt="" />
            </div>
            <div class="text">
              <div class="name">{{ item.name }}</div>
              <div class="num">{{ item.num }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <Chars :options="options" />
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/views/indexComponents/allComponents/Title";
import Chars from "@/components/allCharsCom/Chars";
import rimg1 from "@/assets/indexImages/rimg1.png";
import rimg2 from "@/assets/indexImages/rimg2.png";
import { getxjtjYMD } from "@/api/indexChars/chars";

export default {
  name: "",
  components: {
    Title,
    Chars,
  },
  data() {
    return {
      yearActive: "年",
      numData: [
        // { icon: rimg1, name: "发现隐患数量", num: 2 },
        // { icon: rimg2, name: "整改隐患数量", num: 1 },
      ],
      options: {
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(19, 135, 167, 1)",
            },
          },
          axisLabel: {
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "value",
          name: "月度巡检统计图",
          nameTextStyle: {
            color: "#ffffff",
            padding: [0, 0, 0, 40],
            fontSize: 15,
          },
          nameGap: 10,
          min: 0,
          max: 250,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(19, 135, 167, 1)",
            },
          },
          axisLabel: {
            color: "#ffffff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(19, 135, 167, .5)",
              type: "dashed",
            },
          },
        },
        grid: {
          left: "10%",
          right: "5%",
          top: "20%",
          bottom: "10%",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 200, 210, 140, 190, 120],
            type: "bar",
            barWidth: 10,

            itemStyle: {
              color: "rgba(45, 207, 255, 1)",
              borderRadius: [0, 3, 3, 0],
            },
          },
        ],
      },
    };
  },
  created() {
    this.getxjtjYMD({ type: "year" });
  },
  methods: {
    getxjtjYMD(query) {
      getxjtjYMD(query).then((res) => {
        if (res.code == 200) {
          const { faxian, zhenggai } = res.data;
          this.numData = [
            { icon: rimg1, name: "发现隐患数量", num: faxian },
            { icon: rimg2, name: "整改隐患数量", num: zhenggai },
          ];
        }
      });
    },
    timeChange(e) {
      if (this.yearActive == e) return;
      this.yearActive = e;
      if (this.yearActive == "日") {
        this.getxjtjYMD({ type: "day" });

        // this.numData = [
        //   { icon: rimg1, name: "发现隐患数量", num: 3 },
        //   { icon: rimg2, name: "整改隐患数量", num: 2 },
        // ];
      } else if (this.yearActive == "月") {
        this.getxjtjYMD({ type: "month" });

        // this.numData = [
        //   { icon: rimg1, name: "发现隐患数量", num: 6 },
        //   { icon: rimg2, name: "整改隐患数量", num: 10 },
        // ];
      } else {
        this.getxjtjYMD({ type: "year" });

        // this.numData = [
        //   { icon: rimg1, name: "发现隐患数量", num: 56 },
        //   { icon: rimg2, name: "整改隐患数量", num: 50 },
        // ];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.first-wrapper {
  width: 100%;
  height: 40%;
  // background: blue;
  flex-direction: column;
  > div {
    // width: 100%;
  }
  .two {
    position: relative;
    flex: 1;
    flex-direction: column;

    // background: wheat;
    .top {
      height: 22%;
      width: 100%;
      // background: red;
      position: relative;
      .time {
        position: absolute;
        top: -43px;
        right: 0;
        font-size: 14px;
        font-weight: 400;
        color: #1387a7;
        > span {
          display: inline-block;
          margin-left: 10px;
          cursor: pointer;
          &.active {
            color: #75e7f8;
          }
        }
      }
      .countNumbe {
        justify-content: space-between;
        align-items: center;
        padding: 0 17px;
        .img {
          margin-right: 11px;
        }
        .text {
          .name {
            color: #2ffae0;
            font-weight: 400;
            font-size: 16px;
          }
          .num {
            font-size: 21px;
            color: #ffffff;
          }
        }
      }
    }
    .bottom {
      flex: 1;
    }
  }
}
</style>