qd-changjing/src/views/pages/areaMonitor/components/VideoListRight.vue

<template>
  <div class="box">
    <header>
      <div class="title">决策建议</div>
    </header>
    <div class="list1">
      <el-date-picker
        v-model="daterange"
        type="daterange"
        value-format="yyyy-MM-dd"
        :range-separator="$t('datePicker.range')"
        :start-placeholder="$t('datePicker.start')"
        :end-placeholder="$t('datePicker.end')"
      >
      </el-date-picker>
      <!--人员聚集高发区域Top5-->
      <div class="list1-people">
        <div class="people-left">
          <div class="inner-title">人员聚集高发区域Top5</div>
          <div class="left-list" v-for="item in top5AreaList">
            <div class="left-list1">{{ item.title }}</div>
            <div
              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
              @click="chooseSelectArea(item)"
            >
              {{ item.areaName }}
            </div>
            <div class="left-list3">{{ item.num }}</div>
          </div>
        </div>
        <div class="people-right">
          <div class="inner-title">高发事件Top5</div>
          <div class="top5EventStyle" id="top5-event-chart"></div>
        </div>
      </div>
    </div>
    <!--相关性分析-->
    <div class="list2">
      <div class="inner-title">
        相关性分析
        <span
          style="
            font-size: 14px;
            margin-left: 8px;
            padding: 2px 20px;
            background: #015478;
            border-radius: 4px;
          "
          >分析过程</span
        >
      </div>
      <div class="list2-conclusion">
        结论：<span>{{ relevanceName1 }}</span
        >、<span>{{ relevanceName2 }}</span
        >、<span>{{ relevanceName1 }}</span> 与<span>{{ areaName }}</span
        >人员聚集较强相关。
      </div>
      <div class="relevanceChart" id="relevance-chart"></div>
    </div>
    <!--管理力量分析建议-->
    <div class="list3">
      <div class="inner-title">管理力量分析建议</div>
      <div class="list3-analysis">
        <div class="analysis-item">
          <div class="item-div">
            <div>管理人员</div>
            <div>{{ analysis.manageNum }}人</div>
          </div>
        </div>
        <div class="analysis-item">
          <div class="item-div">
            <div>环卫人员</div>
            <div>{{ analysis.sanitationNum }}人</div>
          </div>
        </div>

        <div class="analysis-item">
          <div class="item-div">
            <div>垃圾运送</div>
            <div>{{ analysis.garbageNum }}次/天</div>
          </div>
        </div>
        <div class="analysis-item">
          <div class="item-div">
            <div>机械化作业</div>
            <div>{{ analysis.mechanNum }}次/天</div>
          </div>
        </div>
      </div>
      <div class="analysis-advice">
        <span style="font-size: 14px; color: #fff">决策建议：</span>
        预测<span
          style="
            font-size: 14px;
            color: rgb(0 255 255);
            cursor: pointer;
            text-decoration: underline;
          "
          >{{ analysis.area }}</span
        >
        下周人流量较高，建议增加环卫人员数量、垃圾收运频次
      </div>
    </div>
  </div>
</template>
  <script>
import bus from "@/views/layout/bus";
import * as echarts from "echarts";
export default {
  data() {
    return {
      daterange: null,
      dataForm: {
        title: "",
        startDate: "",
        endDate: "",
      },
      //人员聚集高发区域TOP5list
      top5AreaList: [],
      //选中的高发区域
      selectArea: "",
      //相关性
      relevanceName1: "垃圾桶满溢",
      relevanceName2: "路面不洁",
      relevanceName3: "违规停车",
      areaName: "第一海水浴场",
      //管理力量分析
      analysis: {
        manageNum: 3,
        sanitationNum: 14,
        garbageNum: 2,
        mechanNum: 1,
        advice: "",
        area: "第一海水浴场",
      },
    };
  },
  components: {},
  created() {},
  mounted() {
    //获取高发区域
    this.getTop5Area();
    //获取高发事件
    this.getTop5EventCharts();
    //获取相关性分析
    this.getRelevanceCharts();
  },
  methods: {
    //选择选中的高发区域
    chooseSelectArea(item) {
      this.selectArea = item.areaId;
    },
    //获取高发区域
    getTop5Area() {
      this.top5AreaList = [
        {
          title: "TOP1",
          areaName: "第一海水浴场",
          areaId: "1",
          num: "223",
        },
        {
          title: "TOP2",
          areaName: "石老人海水浴场",
          areaId: "2",
          num: "123",
        },
        {
          title: "TOP3",
          areaName: "金沙滩海水浴场",
          areaId: "3",
          num: "111",
        },
        {
          title: "4",
          areaName: "第一海水浴场",
          areaId: "4",
          num: "65",
        },
        {
          title: "5",
          areaName: "第一海水浴场",
          areaId: "5",
          num: "32",
        },
      ];
    },
    //获取高发事件
    getTop5EventCharts() {
      let eventChart = echarts.init(
        document.getElementById("top5-event-chart")
      );
      let option = {
        backgroundColor: "rgba(32, 33, 36,.7)",
        grid: {
          top: "20px",
          left: "40px",
          bottom: "20px",
        },
        tooltip: {
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: "axis",
          backgroundColor: "rgba(32, 33, 36,.7)",
          borderColor: "rgba(32, 33, 36,0.20)",
          borderWidth: 1,
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
          shadowStyle: {
            color: "rgba(74, 211, 164, 0.15)",
            width: "20",
          },
        },
        xAxis: {
          type: "category",
          data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
          axisLine: {
            show: false, // 不显示坐标轴线
            lineStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisTick: {
            show: false, // 隐藏坐标轴的刻度线
            alignWithLabel: true, // 图形于标题居中
            inside: true, // 刻度线是指向内部还是外部
            length: 0, // x轴上指向标题刻度线的长度
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, // 隐藏坐标轴的刻度线
            alignWithLabel: true, // 图形于标题居中
            inside: true, // 刻度线是指向内部还是外部
            length: 0, // x轴上指向标题刻度线的长度
          },
          axisLabel: {
            textStyle: {
              color: "#fff", // 坐标轴文字颜色
              fontSize: 10, // 坐标轴文字大小
            },
          },
          splitLine: {
            lineStyle: {
              // 直线指示器样式设置
              color: "#48b",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            data: [250, 200, 150, 110, 100, 50],
            type: "bar",
            itemStyle: {
              normal: {
                //这里是重点
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    { offset: 1, color: "#FFDD53" },
                    { offset: 0, color: "#FF515A" },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      eventChart.setOption(option);
    },
    //获取相关性分析
    getRelevanceCharts() {
      let eventChart = echarts.init(document.getElementById("relevance-chart"));
      let option = {
        backgroundColor: "rgba(32, 33, 36,.7)",
        grid: {
          top: "20px",
          right: "40px",
          left: "40px",
          bottom: "20px",
        },

        tooltip: {
          data: ["1", "2", "3", "4"],
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: "axis",
          backgroundColor: "rgba(32, 33, 36,.7)",
          borderColor: "rgba(32, 33, 36,0.20)",
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: "#fff",
            fontSize: "12",
          },
          shadowStyle: {
            color: "rgba(74, 211, 164, 0.15)",
            width: "20",
          },
        },
        xAxis: {
          type: "category",
          data: ["11.04", "11.05", "11.06", "11.07", "11.08", "11.09", "11.10"],
          axisLine: {
            show: false, // 不显示坐标轴线
            lineStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisTick: {
            show: false, // 隐藏坐标轴的刻度线
            alignWithLabel: true, // 图形于标题居中
            inside: true, // 刻度线是指向内部还是外部
            length: 0, // x轴上指向标题刻度线的长度
          },
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false, // 隐藏坐标轴的刻度线
              alignWithLabel: true, // 图形于标题居中
              inside: true, // 刻度线是指向内部还是外部
              length: 0, // x轴上指向标题刻度线的长度
            },
            axisLabel: {
              textStyle: {
                color: "#fff", // 坐标轴文字颜色
                fontSize: 10, // 坐标轴文字大小
              },
            },
            splitLine: {
              show: false, // 隐藏坐标轴的刻度线
              lineStyle: {
                // 直线指示器样式设置
                color: "#48b",
                width: 1,
                type: "solid",
              },
            },
          },
          {
            type: "value",
            axisTick: {
              show: false, // 隐藏坐标轴的刻度线
              alignWithLabel: true, // 图形于标题居中
              inside: true, // 刻度线是指向内部还是外部
              length: 0, // x轴上指向标题刻度线的长度
            },
            axisLabel: {
              textStyle: {
                color: "#fff", // 坐标轴文字颜色
                fontSize: 10, // 坐标轴文字大小
              },
            },
            splitLine: {
              lineStyle: {
                // 直线指示器样式设置
                color: "#48b",
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "人员数量",
            data: [14, 10, 4, 11, 10, 12, 6, 13],
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    { offset: 0, color: "#00DCFB" },
                    { offset: 1, color: "#14566B" },
                  ],
                  false
                ),
              },
            },
          },
          {
            name: "路面不洁",
            type: "line",
            yAxisIndex: 1,
            data: [150, 165, 160, 150, 130, 140, 160],
            itemStyle: {
              normal: {
                color: "#faa12f", //圆点颜色
                borderColor: "rgba(251,222,153,0.5)",
                borderWidth: 4,
                lineStyle: {
                  //折线颜色大小
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: "#faa12f",
                  width: 1,
                  borderColor: "#faa12f", //拐点边框颜色
                },
              },
            },
          },
          {
            name: "违规停车",
            type: "line",
            yAxisIndex: 1,
            data: [140, 155, 126, 172, 130, 120, 150],
            itemStyle: {
              normal: {
                color: "#eff20c", //圆点颜色
                borderColor: "rgba(251,222,153,0.5)",
                borderWidth: 4,
                lineStyle: {
                  //折线颜色大小
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: "#eff20c",
                  width: 1,
                  borderColor: "#b5d816", //拐点边框颜色
                },
              },
            },
          },
          {
            name: "垃圾桶满溢",
            type: "line",
            yAxisIndex: 1,
            data: [170, 155, 110, 120, 110, 120, 110],
            itemStyle: {
              normal: {
                color: "#08e715", //圆点颜色
                borderColor: "rgba(251,222,153,0.5)",
                borderWidth: 4,
                lineStyle: {
                  //折线颜色大小
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: "#08e715",
                  width: 1,
                  borderColor: "#147f1a", //拐点边框颜色
                },
              },
            },
          },
        ],
      };
      eventChart.setOption(option);
    },
  },
  watch: {
    daterange(val) {
      if (val == null) {
        this.dataForm.startDate = null;
        this.dataForm.endDate = null;
      } else {
        this.dataForm.startDate = val[0];
        this.dataForm.endDate = val[1];
      }
    },
  },
};
</script>
  <style lang='scss' scoped>
@font-face {
  font-family: "Tensentype-ZhiHeiJ-W5";
  src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
}
@font-face {
  font-family: "DIN-Bold";
  src: url("../../../../assets/construction/DIN-Bold.otf");
}
.box {
  position: relative;

  ::v-deep .el-input__inner {
    margin-top: 7px;
    width: 96%;
    margin-left: 2%;
    height: 22px;
    line-height: 22px;
    border-radius: 1px;
    background: #9000;
    border-color: #107bb0;
    box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
    color: #ffffff;
  }
  ::v-deep .el-date-editor .el-range__icon {
    line-height: 14px;
    color: #ffffff;
  }
  ::v-deep .el-date-editor .el-range-separator {
    line-height: 14px;
    color: #ffffff;
  }
  ::v-deep .el-date-editor .el-range-input {
    background: #9000;
    color: #ffffff;
    font-size: 12px;
  }
  .inner-title {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    // background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%);
  }
  .list1 {
    width: 100%;
    .list1-people {
      width: 100%;

      display: table;
      .people-left {
        width: 50%;
        height: 140px;
        display: table-cell;
        .left-list {
          text-align: center;
          color: #fff;
          width: 100%;
          height: 24px;
          margin-left: 10px;
          margin-top: 5px;
          .left-list1 {
            font-size: 12x;
            float: left;
            width: 20%;
          }
          .left-list2 {
            cursor: pointer;
            font-size: 14px;
            float: left;
            width: 50%;
            &:hover {
              color: rgb(0 255 255);
            }
          }
          .active-item {
            font-size: 14px;
            float: left;
            width: 50%;
            color: rgb(0 255 255);
            font-weight: bold;
            text-decoration: underline;
          }
          .left-list3 {
            font-size: 14px;
            float: left;
            width: 24%;
          }
        }
      }
      .people-right {
        width: 50%;
        height: 140px;
        display: table-cell;
        .top5EventStyle {
          float: left;
          margin-right: 10px;
          margin-left: 0px;
          width: 100%;
          height: 140px;
        }
      }
    }
  }
  .list2 {
    width: 100%;
    .list2-conclusion {
      color: #fff;
      border-color: #107bb0;
      box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
      margin: 10px;
      padding: 0px 3px;
      font-size: 14px;
      span {
        font-size: 14px;
        color: rgb(0 255 255);
      }
    }
    .relevanceChart {
      margin-left: 10px;
      height: 160px;
      margin-right: 10px;
    }
  }
  .list3 {
    width: 100%;
    .list3-analysis {
      display: table;
      width: 98%;
      margin-left: 10px;

      .analysis-item {
        text-align: center;
        display: table-cell;
        width: 25%;
        color: #fff;
        .item-div {
          //  background: #5f676c;
          background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
          margin: 10px 10px;
        }
      }
    }
    .analysis-advice {
      color: rgb(0 255 255);
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .list4 {
    width: 100%;
  }
  header {
    width: 100%;
    height: 44px;
    background: url(../../../../assets/construction/subTitle.png) no-repeat
      center;
    text-align: center;
    .title {
      font-size: 26px;
      font-weight: bold;
      background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "Tensentype-ZhiHeiJ-W5";
    }
    .title::before {
      content: "事件感知";
      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
      position: absolute;
      z-index: -1;
    }
  }
}
</style>