daofu-large-screen/src/views/data-statistics/right-side/components/early-warning.vue

<!-- 预警分析 -->
<template>
  <div class="side-bg body_body">
    <TitleC title="预警分析"></TitleC>
    <div class="chartBody">
      <div class="chart-wrapper">
        <div class="container" ref="tenementRef"></div>
      </div>
      <!-- <div class="screenTime">
        <span>时间筛选</span>
        <img src="@/assets/images/data-statistics/left/screenIcon.png" alt="" />
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
export default defineComponent({
  name: "WorkSituation",
});
</script>
<script setup lang='ts'>
import * as echarts from "echarts";
import { rkStatByType } from "@/api/statistics";
//工作类型折线图
const tenementRef = ref();
let jobTypeOption = {
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["待完成", "已完成"],
    top: "top",
    left: "center",
    orient: "horizontal",
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 15,
    borderRadius: 0,
    textStyle: {
      color: "#D0DEEE",
      fontFamily: "Source Han Sans CN, Source Han Sans CN",
      fontSize: 15,
      fontWeight: 400,
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    // boundaryGap: false,
    data: [],
  },
  yAxis: [
    {
      type: "value",
      name: "数量",
      nameTextStyle: {
        //y轴上方单位的颜色
        color: "#6C8097",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#6C8097",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#6C8097",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "rgb(139, 143, 147)",
        textStyle: {
          fontSize: 14,
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "数量",
      type: "line",
      data: [],
      symbolSize: 10,
      itemStyle: {
        color: "#FFFFFF", // 折线点的颜色
        shadowColor: "#fff",
        shadowBlur: 15,
        borderColor: "#aaa",
      },
    },
  ],
};
//工作类型折线图数据处理
const getrkStatByType = () => {
  let params = {
    startTime: "",
    endTime: "",
  };
  rkStatByType(params).then((res: any) => {
    jobTypeOption.xAxis.data = [];
    jobTypeOption.series[0].data = [];
    res.data.forEach((item) => {
      jobTypeOption.xAxis.data.push(item.typeName);
      jobTypeOption.series[0].data.push(item.typeCount);
    });
    const tenementChart = echarts.init(tenementRef.value);
    tenementChart.setOption(jobTypeOption, true);
  });
};
onMounted(() => {
  getrkStatByType();
});
</script>

<style lang="scss" scoped>
.time {
  font-size: 12px;
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  color: #159aff;
}
::v-deep .el-input__inner {
  color: white !important;
}
.module_top_title_con {
  overflow: hidden;
  max-height: 70px;
  overflow-y: scroll;
}
.module_top_title_con::-webkit-scrollbar {
  display: none;
}
.body_body {
  height: 320px;
  background-color: rgba(0, 61, 123, 0.353) !important;
  border-radius: 0 0 10px 10px;
}
.chart-wrapper {
  margin-top: 10px;
  flex: 1;
  height: 180px;
  position: relative;

  .container {
    flex: 1;
    width: 600px;
    margin-top: -10px;
    height: 230px;
  }
  > div:nth-child(2) {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 62px;
    left: 48px;
    > div:nth-child(1) {
      font-size: 20px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #d0deee;
    }
    > div:nth-child(2) {
      width: 70px;
      height: 2px;
      background-color: #63717b;
    }
    > div:nth-child(3) {
      font-size: 10px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #d0deee;
    }
  }
  > img:nth-of-type(1) {
    position: absolute;
    left: 29px;
    top: 35px;
    width: 112px;
    height: 112px;
  }
  > img:nth-of-type(2) {
    position: absolute;
    left: 2px;
    top: 7px;
    width: 165px;
    height: 165px;
  }
}
.chartBody {
  margin-top: 10px;
  position: relative;
}
.screenTime {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 15px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #d0deee;
  display: flex;
  align-items: center;
  > img {
    width: 15px;
    height: 14px;
    margin-left: 6px;
  }
}
</style>
<style>
.riskPool_tip {
  max-width: 200px !important;
}
</style>