朔黄首页数据统计分析tab静态页完善

hanbaoshan

2021-01-21 3fe6be8e6eeae41fcfabc5876cac2fddd1c860f0

朔黄首页数据统计分析tab静态页完善

 src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue

New file
@@ -0,0 +1,154 @@
<template>
  <div class="irregular-dataset">
    <div ref="multiBar" style="width: 100%;height: 300px;"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: {},
    }
  },
  mounted () {
    this.options = this.mockData();
    this.initMultiBar();
  },
  methods: {
    mockData () {

      var dimension = ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'];
      var categoryCount = 30;
      var xAxisData = [];
      var customData = [];
      var legendData = [];
      var dataList = [];

      legendData.push('trend');
      var encodeY = [];
      for (var i = 0; i < dimension.length; i++) {
        legendData.push(dimension[i]);
        dataList.push([]);
        encodeY.push(1 + i);
      }

      for (var i = 0; i < categoryCount; i++) {
        var val = Math.random() * 1000;
        xAxisData.push('category' + i);
        var customVal = [i];
        customData.push(customVal);

        for (var j = 0; j < dataList.length; j++) {
          var value = j === 0
            ? this.$echarts.number.round(val, 2)
            : this.$echarts.number.round(Math.max(0, dataList[j - 1][i] + (Math.random() - 0.5) * 200), 2);
          dataList[j].push(value);
          customVal.push(value);
        }
      }
      return {
        title: {
          text: '违规情况统计',
          textStyle: {
            fontSize: '14px'
          }
        },
        grid: {
          top: 50,
          left: 30,
          right: 20,
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData,
          left: 'right',
          //color: ['aqua','#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
        },
        dataZoom: [{
          type: 'slider',
          start: 50,
          end: 70
        }, {
          type: 'inside',
          start: 50,
          end: 70
        }],
        xAxis: {
          data: xAxisData
        },
        yAxis: {},
        series: [{
          type: 'custom',
          name: 'trend',
          renderItem: this.renderItem,
          itemStyle: {
            borderWidth: 2
          },
          encode: {
            x: 0,
            y: encodeY
          },
          data: customData,
          z: 100
        }].concat(this.$echarts.util.map(dataList, function (data, index) {
          return {
            type: 'bar',
            animation: false,
            name: legendData[index + 1],
            itemStyle: {
              opacity: 0.7
            },
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'][index],
            data: data
          };
        }))
      }
    },
    renderItem (params, api) {
      var xValue = api.value(0);
      var currentSeriesIndices = api.currentSeriesIndices();
      var barLayout = api.barLayout({
        barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
      });

      var points = [];
      for (var i = 0; i < currentSeriesIndices.length; i++) {
        var seriesIndex = currentSeriesIndices[i];
        if (seriesIndex !== params.seriesIndex) {
          var point = api.coord([xValue, api.value(seriesIndex)]);
          point[0] += barLayout[i - 1].offsetCenter;
          point[1] -= 20;
          points.push(point);
        }
      }
      var style = api.style({
        color: '#975fe4',
        //stroke: api.visual('color'),
        stroke: 'aqua',
        fill: null
      });

      return {
        type: 'polyline',
        shape: {
          points: points
        },

        style: style
      };
    },
    initMultiBar () {
      this.$nextTick(() => {
        let dom = this.$echarts.init(this.$refs['multiBar']);
        dom.setOption(this.options);
      })
    }
  }
}
</script>

<style>
</style>

 src/pages/shuohuangMonitorAnalyze/components/charts/line.vue

@@ -1,5 +1,5 @@
<template>
  <div ref="lineChart"></div>
  <div ref="lineChart" :style="{width:defineW+'px',height:defineH+'px'}"></div>
</template>

<script>
@@ -7,14 +7,22 @@
  props: {
    options: {
      type: Object
    },
    defineW: {
      type: Number,
      default: 600,
    },
    defineH: {
      type: Number,
      default: 300,
    }
  },
  mounted(){
  mounted () {
    this.initLineChart();
  },
  methods:{
    initLineChart(){
      this.$$nextTick(()=>{
  methods: {
    initLineChart () {
      this.$nextTick(() => {
        let dom = this.$echarts.init(this.$refs['lineChart']);
        dom.setOption(this.options);
      })

 src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue

@@ -1,17 +1,25 @@
<template>
  <div ref="pieChart" style="width: 600px; height: 300px;"></div>
  <div ref="pieChart" :style="{width: pieW+'px', height: pieH+'px'}"></div>
</template>

<script>
export default {
  data () {
    return {

      
    }
  },
  props: {
    options: {
      type: Object
    },
    pieW: {
      type: Number,
      default: 600
    },
    pieH: {
      type: Number,
      default: 300
    }
  },
  mounted () {
@@ -29,4 +37,5 @@
</script>

<style lang="scss">

</style>

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -4,7 +4,7 @@
      <el-tab-pane label="数据统计分析" name="dataStatistic"></el-tab-pane>
      <el-tab-pane label="任务统计分析" name="taskStatistic"></el-tab-pane>
    </el-tabs>
    <div class="tab-content">
    <div class="tab-content" v-if="actCardTab=='dataStatistic'">
      <div class="card-view">
        <el-card>
          <div class="title">
@@ -130,33 +130,82 @@
            </div>
          </div>
        </div>
        <div class="statics">
        <div class="statics flex-box">
          <div class="lt">
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">乘务员违规统计</span>
                <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut>
                <time-shortcut @actPickerChange="irregularMenStatistic"></time-shortcut>
              </div>
              <div class="chart-area flex-box">
                <div class="lt">
                  <div class="chart-theme">乘务员总人数</div>
                  <div class="sum">
                    <span class="val">8846</span>
                    <span class="ratio">17.1%</span>
              <div class="statics-content">
                <div class="chart-area flex-box">
                  <div class="lt">
                    <div class="chart-theme">乘务员总人数</div>
                    <div class="sum">
                      <span class="val">8846</span>
                      <span class="ratio">17.1%</span>
                    </div>
                    <line-chart :options="optionsOfIrregularSum" :defineW="300" :defineH="160"></line-chart>
                  </div>
                  <Line :options="optionsOfIrregularSum"></Line>
                </div>
                <div class="gt">
                  <div class="chart-theme">人均违规次数</div>
                  <div class="sum">
                    <span class="val">8846</span>
                  <div class="gt">
                    <div class="chart-theme">人均违规次数</div>
                    <div class="sum">
                      <span class="val">8846</span>
                    </div>
                    <!-- <line-chart :options="optionsOfIrregularPer"></line-chart> -->
                    <line-chart :options="optionsOfIrregularPer" :defineW="300" :defineH="160"></line-chart>
                  </div>
                </div>
                <el-table :data="irregularTableData">
                  <el-table-column label="排名"></el-table-column>
                  <el-table-column label="姓名"></el-table-column>
                  <el-table-column label="违规次数"></el-table-column>
                  <el-table-column label="周涨幅"></el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
                  :current-page.sync="PageIndex"
                  :page-size="PageSize"
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="tableTotal"
                ></el-pagination>
              </div>
            </div>
          </div>
          <div class="rt">
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">重点地段违规事件统计</span>
                <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
              </div>
              <div class="statics-content">
                <el-radio-group v-model="irregularEventType" size="small">
                  <el-radio-button label="fhdd">防护地段</el-radio-button>
                  <el-radio-button label="jcz">进出站</el-radio-button>
                  <el-radio-button label="gfx">过分相</el-radio-button>
                  <el-radio-button label="hc">会车</el-radio-button>
                  <el-radio-button label="lsmx">临时慢性</el-radio-button>
                </el-radio-group>
                <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
                <Pie :options="optionsOfHidDangerPie"></Pie>
              </div>
            </div>
          </div>
        </div>
        <div class="part">
          <div class="tab-swiper">
            <swipe-tabs></swipe-tabs>
          </div>
          <div class="tab-detail">
            <dataset-chart style="width:100%"></dataset-chart>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content" v-if="actCardTab=='taskStatistic'">
      
    </div>
  </div>
</template>
@@ -165,9 +214,11 @@
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
import Line from './charts/line';
import LineChart from './charts/line';
import SwipeTabs from './swipeTabs';
import DatasetChart from './charts/dataset';
export default {
  components: { timeShortcut, Bar, Pie, Line },
  components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
  data () {
    return {
      actCardTab: 'dataStatistic',
@@ -194,11 +245,24 @@
            data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
            axisTick: {
              alignWithLabel: true
            }
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#ccc'
            //   }
            // },
            // nameTextStyle: {
            //   color: "#333"
            // }
          }
        ],
        yAxis: [
          { type: 'value' }
          {            
            type: 'value',
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
@@ -255,6 +319,10 @@
      },
      optionsOfIrregularSum: {
        animation: false,
        grid: {
          top: 0,
          left: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@@ -265,6 +333,7 @@
          }
        },
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -274,6 +343,8 @@
        },
        yAxis: {
          type: 'value',
          show: false,
          boundaryGap: [0, '30%'],
          label: {
            show: false
          }
@@ -282,17 +353,82 @@
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',

            smooth: true,
            areaStyle: {
              opacity: 0.3
            },
            color: '#5dbafd'
          }
        ]
      },
      optionsOfIrregularPer: {
        animation: false,
        grid: {
          top: 0,
          left: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          label: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          show: false,
          label: {
            show: false
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.3
            },
            color: '#8adee6'
          }
        ]
      },
      irregularTableData: [],
      PageIndex: 1,
      PageSize: 5,
      pageSizes: [5, 10],
      tableTotal: 0,
      irregularEventType: 'fhdd',
      optionsOfIrregularEventPie: {

      }
    }
  },
  methods: {
    renderIrregularMenTable () {

    },
    handleTableSizeChange () {

    },
    timeShortChange (time) {

    },
    irregularStatistic (time) {
    irregularMenStatistic (time) {

    },
    irregularEventStatistic (time) {

    }
  }
@@ -359,6 +495,15 @@
          .day-ratio {
            display: flex;
            align-items: center;
            &>span{
              margin-right: 6px;
            }
            .triangle.green{
              margin-top: -6px;
            }
            .triangle.red{
              margin-top: 6px;
            }
          }
        }
        .devide {
@@ -368,11 +513,17 @@
        }
        .detail {
          display: flex;
          align-items: center;
          color: #777;
          .name{
            margin-right: 20px;
          }
        }
      }
    }
    .part {
      padding: 10px 0;
      padding: 20px 0;
      margin-bottom: 20px;
      .header-width-tab {
        display: flex;
        justify-content: space-between;
@@ -385,10 +536,46 @@
        display: flex;
        padding: 0 10px;
        min-height: 400px;
        margin-bottom: 20px;
        .statics-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
          margin-bottom: 20px;
          .title {
            font-size: 16px;
            font-weight: bold;
          }
        }
        .statics-part {
          .statics-content {
            padding: 0 20px;
            .chart-area {
              .chart-theme {
                font-size: 14px;
                color: #999;
              }
              .sum {
                padding: 14px 0 10px;
                .val {
                  font-size: 24px;
                  padding-left: 10px;
                  margin-right: 20px;
                }
                .ratio {
                  font-size: 14px;
                  color: #999;
                }
              }
            }
          }
        }
        .lt {
          text-align: left;
          flex: 1;
          padding-right: 20px;
          padding-right: 40px;
        }
        .rt {
          text-align: left;
@@ -426,6 +613,19 @@
          }
        }
      }
      .flex-box {
        .lt,
        .rt,
        .gt {
          flex: 1;
          width: auto;
          //padding: 0 20px;
        }
      }
      .tab-swiper {
        width: calc(100vw - 340px);
        margin-bottom: 20px;
      }
    }
  }
}

 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue

@@ -69,7 +69,7 @@
  data () {
    return {
      publicPath: process.env.BASE_URL,
      activeIndex: 'searchForVideoAnalyze'
      activeIndex: 'guideIndex'
    }
  },
  mounted(){

 src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue

New file
@@ -0,0 +1,181 @@
<template>
  <div class="swipe-tabs">
    <swiper :options="swiperOption" ref="swiperTabs">
      <swiper-slide v-for="slide in slides" :key="slide.id">
        <div class="slide-tab" :class="{'act':actSlide==slide.id}" @click="checkSlide(slide)">
          <div class="title">{{slide.name}}</div>
          <div class="flex-box">
            <div>
              <div class="dimension">违规率</div>
              <div class="dimension-val">{{slide.ratio}}</div>
            </div>
            <div style="margin-left: 60px;">
              <Pie :options="optOfPie(slide)" :pieW="70" :pieH="70"></Pie>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="swiper-scrollbar"></div>
    <div class="swiper-button-next">
      <div class="icon-btn">
        <i class="iconfont iconyou1"></i>
      </div>
    </div>
    <div class="swiper-button-prev">
      <div class="icon-btn">
        <i class="iconfont iconzuo"></i>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Pie from './charts/pie';
export default {
  components: { Pie },
  data () {
    return {
      swiperOption: {
        spaceBetween: 0,
        //initialSlide: 0,
        direction: 'horizontal',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        slidesPerView: 5,
        observer: true,
        observeParents: true,
      },
      slides: [
        { id: 'jlfgs', name: '机量分公司', ratio: 82, },
        { id: 'ztyj', name: '中铁一局', ratio: 78, },
        { id: 'ztsj', name: '中铁三局', ratio: 45 },
        { id: 'ztsij', name: '中铁四局', ratio: 30 },
        { id: 'jtjw', name: '京铁机务', ratio: 30 },
        { id: 'ztwj', name: '中铁五局', ratio: 30 },
        { id: 'jgjw', name: '京高机务', ratio: 30 },
      ],
      actSlide: ''
    }
  },
  mounted () {
    console.log('swip mounte');
    this.actSlide = this.slides[0].id;

  },
  methods: {
    optOfPie (slide) {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   right: 10,
        //   y: 'center',
        //   data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答']
        // },
        series: [
          {
            name: '违规率',
            type: 'pie',
            color: ['#18bfff', '#e9f6fb'],
            radius: ['60%', '90%'],
            //center: ['40%','60%'],
            tooltip: {
              show: false
            },
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '30',
            //     fontWeight: 'bold'
            //   }
            // },
            hoverAnimation: false,
            labelLine: {
              show: false
            },
            data: [
              { value: slide.ratio, name: '' },
              { value: 100 - slide.ratio, name: '' },

            ]
          }
        ]
      }
    },
    checkSlide (slide) {
      this.actSlide = slide.id;
    }
  }
}
</script>

<style lang="scss">
.swipe-tabs {
  position: relative;
  padding: 0 30px;

  .swiper-container {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }
  .slide-tab {
    cursor: pointer;
    border-top: 2px solid transparent;
    padding: 20px;
    text-align: left;
    &.act {
      border-color: #409eff;
    }
    .title {
      font-size: 16px;
      color: #666;
    }
    .dimension {
      color: #999;
      margin: 10px 0;
    }
    .dimension-val {
      color: #555;
      font-size: 28px;
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    cursor: pointer;
    // width: 40px;
    // height: 40px;
    position: absolute;
    background: transparent;
    top: 50%;
    margin-top: -20px;
    z-index: 999;
    //border-radius: 4em;
    outline: none;
    .icon-btn {
      font-size: 24px;
      color: #666;
      text-align: center;
      line-height: 38px;
      cursor: pointer;
    }
  }
  .swiper-button-next {
    right: -10px;
  }
  .swiper-button-prev {
    left: -10px;
  }
}
</style>

 src/pages/shuohuangMonitorAnalyze/index/App.vue

@@ -38,7 +38,7 @@
  data () {
    return {
      isCollapse: false,
      actPage: 'searchForVideoAnalyze',
      actPage: 'guideIndex',
    }
  },
  mounted () {

 src/pages/shuohuangMonitorAnalyze/index/main.ts

@@ -6,7 +6,10 @@
import echarts from 'echarts';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
Vue.use(ElementUI);
Vue.use(VueAwesomeSwiper as any);
Vue.mixin(Mixin);
Vue.prototype.$moment = moment;
Vue.prototype.$echarts = echarts;