illegaltrend.vue

<template>
  <div>
    <div class="chart-header-box">
      <el-col :span="6" class="header-title">违法事件发生趋势</el-col>
      <div class="sel-box">
        <span class="header-label">违法</span>
        <div class="header-select">
          <el-select v-model="illtype" @change="getTrafficHour">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in illageList"
              :key="item.value"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <span class="header-label">事件</span>
        <div class="header-select">
          <el-select v-model="eventtype" @change="getTrafficHour">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in eventList"
              :key="item.value"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <span class="header-label">重点车辆</span>
        <div class="header-select">
          <el-select v-model="special_type" @change="getTrafficHour">
            <el-option value label="全部"></el-option>
            <el-option value="1" label="车辆运输车"></el-option>
            <el-option value="2" label="危险品运输车"></el-option>
            <el-option value="3" label="救护车"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div id="illtrendchart" class="illtrendchart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      illtype: "",
      eventtype: "",
      special_type: "",
      options: [],
      illageList: [],
      eventList: []
    };
  },
  methods: {
    initchart(cdata) {
      let xData = [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24"
      ];
      let maychart = this.$echarts.init(
        document.getElementById("illtrendchart")
      );
      var color = ["rgba(59, 184, 255", "rgba(116, 96, 238"];
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          right: "10%",
          y: "0px",
          itemWidth: 5,
          itemHeight: 5,
          textStyle: {
            color: "#8C8C8C",
            fontSize: 12
          },
          icon: "circle",
          data: ["违法", "事件", "重点车辆"]
        },
        grid: {
          top: "9%",
          left: "3%",
          right: "10%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D9D9D9",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666666",
                fontSize: 14
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 6,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#666",
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D9D9D9",
                width: 1,
                type: "solid"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#E5E5E5",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: "违法",
            type: "line",
            data: (function() {
              let d = [];
              cdata.illegal.map(ele => {
                for (let i = 0; i < xData.length; i++) {
                  if (ele.hour == xData[i]) {
                    d.push(ele.total_num);
                  }
                }
              });
              return d;
            })(),
            itemStyle: {
              normal: {
                color: "#3BB8FF"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "#3BB8FF",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[1] + ", 0.3)"
                    },
                    {
                      offset: 0.8,
                      color: color[1] + ", 0)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            symbol: "circle",
            symbolSize: 5
          },
          {
            name: "事件",
            type: "line",
            data: (function() {
              let d = [];
              cdata.event_type.map(ele => {
                for (let i = 0; i < xData.length; i++) {
                  if (ele.hour == xData[i]) {
                    d.push(ele.total_num);
                  } else {
                    d.push(0);
                  }
                }
              });
              return d;
            })(),
            itemStyle: {
              normal: {
                color: "#3BB7FF"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            }
          },
          {
            name: "重点车辆",
            type: "line",
            data: (function() {
              let d = [];
              cdata.key_vehicle.map(ele => {
                for (let i = 0; i < xData.length; i++) {
                  if (ele.hour == xData[i]) {
                    d.push(ele.total_num);
                  } else {
                    d.push(0);
                  }
                }
              });
              return d;
            })(),
            itemStyle: {
              normal: {
                color: "#87D14B"
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            }
          }
        ]
      };
      maychart.setOption(option);
    },
    getillageList() {
      this.illageList = JSON.parse(localStorage.getItem("违法类型"));
    },
    getTrafficHour() {
      let date = new Date();
      let Y = date.getFullYear();
      let M = date.getMonth() > 9 ? date.getMonth() : `0${date.getMonth() + 1}`;
      let D = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`;
      let h = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`;
      let m =
        date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`;
      let s = date.getSeconds();
      let startDate = `${Y}/${M}/${D} 00:00:00`;
      let curDate = `${Y}/${M}/${D} ${h}:${m}:${s}`;
      let data = {
        illegal_type: this.illtype,
        event_type: this.eventtype,
        key_vehicle_type: this.special_type,
        start_dt: this.setUtcTime(startDate),
        end_dt: this.setUtcTime(curDate),
      };
      this.$api.show.getTrafficHour(data).then(res => {
        console.log('违法事件趋势',res);
        this.initchart(res);
      });
    },

    getEvents() {
      this.$api.show.getEventType().then(res => {
        this.eventList = res.list_data;
      });
    }
  },
  created() {},
  mounted() {
    this.getillageList();
    this.getTrafficHour();
    this.getEvents();
  }
};
</script>

<style lang="stylus" scoped>
.chart-header-box {
  overflow: hidden;
  font-size: 14px;
  .sel-box{
    float right;
    margin-right 20px
  }
}

.header-title {
  padding 5px 10px
  line-height: 3vh;
  color #000;
}

.illtrendchart {
  height: 30vh;
  width: 35vw;
}

.header-label {
  font-size: 12px;
  line-height: 3vh;
  float: left;
  margin:6px 0 0px 15px;
}

.header-select {
  width: 4.5vw;
  margin: 8px 0.5vw 0 0.2vw;
  float: left;
}
</style>