新需求

zxl

5 天以前 29ea0fd5d04dbaac800f211e0ac7701de0a7f3f4

 src/views/home/data-video/index.vue

@@ -10,10 +10,16 @@
              </el-option>
            </el-select>
          </div>
          <div >
          <div style="margin-right: 20px" >
            <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="选择月份"
                            @change="dateChange">
            </el-date-picker>
          </div>
          <div >
            <el-select v-model="params.area" placeholder="区县" @change="getChart"  clearable>
              <el-option v-for="item in areaOption" :key="item.label" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-container">
@@ -27,8 +33,7 @@
<script>
import * as echarts from 'echarts';
import {video} from "../../../api/platform/home";
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var myChart =null;
var option;
let observer = null;
export default {
@@ -42,6 +47,15 @@
      options: [
        {label: '省厅', value: 1},
        {label: '公安部', value: 2}
      ],
      areaOption:[
        {label:'自流井区',value:'510302'},
        {label:'贡井区',value:'510303'},
        {label:'大安区',value:'510304'},
        {label:'沿滩区',value:'510311'},
        {label:'荣县',value:'510321'},
        {label:'富顺县',value:'510322'},
        {label:'高新区',value:'510399'},
      ],
      dataList: [],
    }
@@ -92,7 +106,7 @@
    initChart(data) {
      const dataList = this.groupByData(data.list);
      const baseLine = data.baseLine == null ? 0 : data.baseLine;
      const colors = ['#5470C6', '#66CC99', '#EE6666'];
      const colors = ['#EE6666', '#66CC99', '#f8c87a'];
      option = {
        color: colors,
        tooltip: {
@@ -122,7 +136,7 @@
                      </div>`;
            }).join('');
            tooltipHtml = `${tooltipHtml}${pointsHtml}`;
            tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">录像正常参考值: ${baseLine.toLocaleString()}</div>`;
            tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">录像完整参考值: ${baseLine.toLocaleString()}</div>`;

            return tooltipHtml;
          }
@@ -135,7 +149,7 @@
          containLabel: true
        },
        legend: {
          data: ['点位在线', '录像完整', '录像缺失']
          data: ['点位在线', '录像完整', '录像缺失','无录像']
        },
        xAxis: [
          {
@@ -173,7 +187,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
                color: '#5470C6'
              }
            },
            axisLabel: {
@@ -209,7 +223,9 @@
            name: '录像完整',
            yAxisIndex: 0,
            type: 'bar',
            data: data.list.map(item => {
            data:

              data.list.map(item => {
              return item['integrityNum'];
            })
          },
@@ -218,9 +234,27 @@
            type: 'bar',
            yAxisIndex: 0,
            data:  data.list.map(item => {
              return item['loseNum'];
              return {
                value: item['loseNum'],
                itemStyle:{
                  color: '#f8c87a',
                }
              }
            })
          },
          {
            name: '无录像',
            type: 'bar',
            yAxisIndex: 0,
            data:  data.list.map(item => {
              return {
                value :item['errNum'],
                itemStyle:{
                  color: '#EE6666',
                }}
            })
          },

          {
            name: '点位在线',
            type: 'line',
@@ -260,6 +294,7 @@
    const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
    this.date = year + '-' + month;
    this.params.date = this.date;
    myChart = echarts.init(this.$refs.chartContent);
    this.getChart();
    this.observe();
  },