优化联动规则加载场景列表的操作

zhangzengfei

2021-06-11 fa7044f3ccc9a91bc2bc117d1a06f650d86554f2

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -17,7 +17,7 @@
          <div class="trend week-day-ratio">
            <div class="week-ratio">
              <span>周同比</span>
              <span class="triangle green"></span>
              <span class="triangle red"></span>
              <span>12%</span>
            </div>
            <div class="day-ratio">
@@ -56,8 +56,10 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">1025</div>
          <div class="trend"></div>
          <div class="val">{{$numberFormat(1025)}}</div>
          <div class="trend">
            <Bar :options="optionsOfTransferSumBar" style="height: 70px;"></Bar>
          </div>
          <div class="devide"></div>
          <div class="detail">
            <div class="name">转换率</div>
@@ -72,7 +74,16 @@
            </span>
          </div>
          <div class="val">99%</div>
          <div class="trend"></div>
          <div class="trend">
            <el-progress
              class="defined-progress"
              :percentage="99"
              stroke-linecap="square"
              color="#1890ff"
              :stroke-width="14"
              :show-text="false"
            ></el-progress>
          </div>
          <div class="devide"></div>
          <div class="detail week-day-ratio">
            <div class="week-ratio">
@@ -82,20 +93,21 @@
            </div>
            <div class="day-ratio">
              <span>日环比</span>
              <span class="triangle red"></span>
              <span class="triangle green"></span>
              <span>11%</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="part">
        <div class="header-width-tab">
          <el-tabs class="tab-menu" v-model="hidDangerTab">
        <div class="part-top">
          <div class="header-width-tab">
          <el-tabs class="tab-menu" v-model="actHiddanderTab" @tab-click="initTabContent">
            <el-tab-pane label="隐患事件统计" name="hidDanderStatistic"></el-tab-pane>
            <el-tab-pane label="隐患事件趋势" name="hidDanderTrend"></el-tab-pane>
          </el-tabs>
          <div class="rt">
            <time-shortcut @actPickerChange="timeShortChange"></time-shortcut>
            <time-shortcut actPicker="week" @actPickerChange="timeShortChange"></time-shortcut>
            <el-date-picker
              v-model="searchHidDanderTime"
              type="datetimerange"
@@ -109,19 +121,42 @@
        </div>
        <div class="statics">
          <div class="lt">
            <el-radio-group v-model="actHidDanderChart" size="mini">
              <el-radio-button label="bar">柱状图</el-radio-button>
              <el-radio-button label="pie">饼图</el-radio-button>
            </el-radio-group>
            <Bar :options="optionsOfHidDangerBar" v-show="actHidDanderChart=='bar'"></Bar>
            <Pie :options="optionsOfHidDangerPie" v-show="actHidDanderChart=='pie'"></Pie>
            <template v-if="actHiddanderTab == 'hidDanderStatistic'">
              <el-radio-group v-model="actHidDanderStatiscChart" size="mini">
                <el-radio-button label="bar">柱状图</el-radio-button>
                <el-radio-button label="pie">饼图</el-radio-button>
              </el-radio-group>
              <Bar
                :options="optionsOfHidDangerBar"
                v-if="actHidDanderStatiscChart=='bar'"
              ></Bar>
              <Pie
                :options="optionsOfHidDangerPie"
                v-if="actHidDanderStatiscChart=='pie'"
              ></Pie>
            </template>
            <template v-if="actHiddanderTab == 'hidDanderTrend'">
              <el-radio-group v-model="actHidDanderTrendChart" size="mini">
                <el-radio-button label="line">折线图</el-radio-button>
                <el-radio-button label="pie">饼图</el-radio-button>
              </el-radio-group>
              <line-chart
                :options="optionsOfHidDangerTrend"
                v-if="actHidDanderTrendChart=='line'"
                style="height:350px"
              ></line-chart>
              <Pie
                :options="optionsOfHidDangerTrendPie"
                v-if="actHidDanderTrendChart=='pie'"
              ></Pie>
            </template>
          </div>
          <div class="rt">
            <div class="header">
              <span class="title">部门隐患数量排名</span>
              <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
              <!-- <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
                <el-option>中铁一局</el-option>
              </el-select>
              </el-select>-->
            </div>
            <div class="rank-list">
              <div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id">
@@ -134,6 +169,7 @@
              </div>
            </div>
          </div>
        </div>
        </div>
        <div class="statics flex-box">
          <div class="lt">
@@ -161,10 +197,10 @@
                  </div>
                </div>
                <el-table class="thbg" :data="irregularTableData">
                  <el-table-column label="排名" type="index"></el-table-column>
                  <el-table-column label="排名" type="index" width="90"></el-table-column>
                  <el-table-column label="姓名" prop="name"></el-table-column>
                  <el-table-column label="违规次数" prop="wg"></el-table-column>
                  <el-table-column label="周涨幅" prop="ratio"></el-table-column>
                  <!-- <el-table-column label="周涨幅" prop="ratio"></el-table-column> -->
                </el-table>
                <!-- <el-pagination
                  @size-change="handleTableSizeChange"
@@ -174,7 +210,7 @@
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="tableTotal"
                ></el-pagination> -->
                ></el-pagination>-->
                <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
@@ -203,15 +239,15 @@
                  <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-button label="lsmx">临时慢行</el-radio-button>
                </el-radio-group>
                <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
                <Pie :options="optionsOfHidDangerPie" style="padding-top:20px;"></Pie>
                
                <Pie :options="optionsOfIrregularEventPie" style="padding-top:20px;"></Pie>
              </div>
            </div>
          </div>
        </div>
        <div class="part">
        <div class="part-bottom" >
          <div class="tab-swiper">
            <swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
          </div>
@@ -282,7 +318,7 @@
                <time-shortcut @actPickerChange="partAssignstatics"></time-shortcut>
              </div>
              <div class="statics-content">
                <Pie :options="optionsOfHidDangerPie"></Pie>
                <Pie :options="optionsOfTaskAssignPie"></Pie>
              </div>
            </div>
          </div>
@@ -337,7 +373,7 @@
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="tableTotal"
                ></el-pagination> -->
                ></el-pagination>-->
                <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
@@ -396,7 +432,7 @@
  data () {
    return {
      actCardTab: 'dataStatistic',
      hidDangerTab: 'hidDanderStatistic',
      //actHiddanderTab: 'hidDanderStatistic',
      optionsOfWeekAnalyze: {
        animation: false,
        grid: {
@@ -433,7 +469,7 @@
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: [100, 103, 101, 107, 104, 111, 109],
            type: 'line',
            smooth: true,
            areaStyle: {
@@ -443,8 +479,54 @@
          }
        ]
      },
      optionsOfTransferSumBar: {
        color: ['#3ba1ff'],
        grid: {
          top: 0,
          left: 10,
          right: 10,
          bottom: 30,
          //containLabel: true
        },
        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,
          boundaryGap: [0, '45%'],
          label: {
            show: false
          }
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '24%',
            data: [123, 120, 157, 140, 147, 172, 166]
          }
        ]
      },
      searchHidDanderTime: [],
      actHidDanderChart: 'bar',
      actHiddanderTab: 'hidDanderStatistic',
      actHidDanderStatiscChart: 'bar',
      actHidDanderTrendChart: 'line',
      optionsOfHidDangerBar: {
        color: ['#9ed2f5'],
        tooltip: {
@@ -488,12 +570,152 @@
          {
            name: '数量',
            type: 'bar',
            barWidth: '24%',
            data: [21, 102, 100, 1, 7, 14]
            barWidth: '60%',
            data: [{value:21,itemStyle:{color:'#3aa0ff'}},{value:102,itemStyle:{color:'#36cbcb'}},{value:100,itemStyle:{color:'#4dcb73'}},{value:1,itemStyle:{color:'#fad337'}},{value:7,itemStyle:{color:'#f2637b'}}, {value:14,itemStyle:{color:'#975fe4'}}]
          }
        ]
      },
      optionsOfHidDangerTrend: {
        grid: {
          top: 40,
          left: 10,
          right: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          label: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        series: [
          {
            data: [83, 83, 85, 85, 80, 40, 30],
            type: 'line',
            color: '#5dbafd',
            symbolSize: 10,
            symbol: 'circle',
            lineStyle: {
              color: '#61b4ff',
              width: 2,
            },
            itemStyle: {
              color: '#98d87d'
            }
          }
        ]
      },
      optionsOfHidDangerTrendPie: {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
        },
        series: [
          {
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['50%', '80%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: 'center',
              formatter: '{b}\n{c} '
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 83, name: '未鸣笛' },
              { value: 83, name: '未手比' },
              { value: 85, name: '未呼唤' },
              { value: 80, name: '运行中睡觉' },
              { value: 40, name: '未检查' },
              { value: 30, name: '未应答' },
            ]
          }
        ]
      },
      optionsOfHidDangerPie: {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
        },
        series: [
          {
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['70%', '90%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n{c} '
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 21, name: '未鸣笛' },
              { value: 102, name: '未手比' },
              { value: 100, name: '未呼唤' },
              { value: 1, name: '运行中睡觉' },
              { value: 7, name: '未检查' },
              { value: 14, name: '未应答' },
            ]
          }
        ]
      },
      optionsOfTaskAssignPie: {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br>{b}:{c} ({d}%)'
@@ -528,12 +750,12 @@
              show: false
            },
            data: [
              { value: 270, name: '张磊' },
              { value: 500, name: '李四' },
              { value: 300, name: '王丽' },
              { value: 430, name: '马宏宇' },
              { value: 620, name: '刘乃超' },
              { value: 540, name: '何光宗' },
              { value: 127, name: '张磊' },
              { value: 130, name: '李四' },
              { value: 128, name: '王丽' },
              { value: 129, name: '马宏宇' },
              { value: 126, name: '刘乃超' },
              { value: 112, name: '何光宗' },
            ]
          }
        ]
@@ -546,31 +768,31 @@
        id: 'ztyj',
        name: '中铁一局',
        val: 52
      },{
      }, {
        id: 'ztsj',
        name: '中铁四局',
        val: 40
      },{
      }, {
        id: 'ztsanj',
        name: '中铁三局',
        val: 38
      },{
      }, {
        id: 'ztswj',
        name: '中铁十五局',
        val: 36
      },{
      }, {
        id: 'ztslj',
        name: '中铁十六局',
        val: 33
      },{
      }, {
        id: 'jtjw',
        name: '京铁机务',
        val: 24
      },{
      }, {
        id: 'lhjw',
        name: '路华机务',
        val: 15
      },{
      }, {
        id: 'nhjw',
        name: '南环机务',
        val: 14
@@ -666,14 +888,67 @@
          }
        ]
      },
      irregularTableData: [{name:'吴国梁',wg:2},{name:'王仁兴',wg:1},{name:'罗元发',wg:1}],
      irregularTableData: [{ name: '吴国梁', wg: 2 }, { name: '王仁兴', wg: 1 }, { name: '罗元发', wg: 1 }],
      PageIndex: 1,
      PageSize: 5,
      pageSizes: [5, 10],
      tableTotal: 0,
      irregularEventType: 'fhdd',
      optionsOfIrregularEventPie: {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['防护地段', '进出站', '过分相', '会车', '临时慢行']
        },
        series: [
          {
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['50%', '80%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: 'center',
              formatter: '{b}\n{c} '
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            itemStyle:{
              normal:{
                label:{
                  show:true,
                  formatter: '{b}\n{c} ',
                  labelLine:{
                    show:true
                  }
                }
              }
            },
            // labelLine: {
            //   show: false
            // },
            data: [
              { value: 32, name: '防护地段' },
              { value: 55, name: '进出站' },
              { value: 42, name: '过分相' },
              { value: 96, name: '会车' },
              { value: 20, name: '临时慢行' },

            ]
          }
        ]
      },
      searchTaskAssignTime: [],
      optionsOfTaskAssign: {
@@ -721,7 +996,7 @@
          }
        ]
      },
      searchTaskAnalyzeTime: [new Date(2021,1,22),new Date(2021,2,1)],
      searchTaskAnalyzeTime: [new Date(2021, 1, 22), new Date(2021, 2, 1)],
      optionsOfTaskAnalyzeBar: {
        color: ['#fbd438', '#4fcb74'],
        dataset: {
@@ -793,21 +1068,28 @@
        ]
      },
      taskAnalyzeCaseTableData: [
        { name: '张磊', rwl: 127, fxl: 127, pdwgl: 44, pdwglv: '7%', wcl: '30%' },
        { name: '李四', rwl: 130, fxl: 129, pdwgl: 47, pdwglv: '8%', wcl: '100%' },
        { name: '王丽', rwl: 128, fxl: 127, pdwgl: 43, pdwglv: '78%', wcl: '100%' },
        { name: '马宏宇', rwl: 129, fxl: 125, pdwgl: 44, pdwglv: '79%', wcl: '100%' },
        { name: '刘乃超', rwl: 126, fxl: 126, pdwgl: 46, pdwglv: '87%', wcl: '100%' },
        { name: '何光宗', rwl: 112, fxl: 112, pdwgl: 12, pdwglv: '87%', wcl: '100%'}],
        { name: '张磊', rwl: 127, fxl: 127, pdwgl: 44, pdwglv: '34.65%', wcl: '100%' },
        { name: '李四', rwl: 130, fxl: 129, pdwgl: 47, pdwglv: '36.43%', wcl: '99.23%' },
        { name: '王丽', rwl: 128, fxl: 127, pdwgl: 43, pdwglv: '33.86%', wcl: '99.22%' },
        { name: '马宏宇', rwl: 129, fxl: 125, pdwgl: 44, pdwglv: '35.2%', wcl: '96.90%' },
        { name: '刘乃超', rwl: 126, fxl: 126, pdwgl: 46, pdwglv: '33.50%', wcl: '100%' },
        { name: '何光宗', rwl: 112, fxl: 112, pdwgl: 12, pdwglv: '10.71%', wcl: '100%' }],
      jsTreeNodes: [],
    }
  },
  methods: {
    initTabContent(tab){
      if(tab.name == "hidDanderStatistic"){
        this.actHidDanderStatiscChart = 'bar'
      }else{
        this.actHidDanderTrendChart = 'line'
      }
    },
    checkTabInSwipe (tab) {
      debugger
      
    },
    checkIrregularEventType (type) {
      debugger
      
    },
    taskAnalyzeCase (time) {

@@ -839,10 +1121,62 @@
  },

}



//                                title : {
//                                    /*  text: '某站点用户访问来源',
//                                      subtext: '纯属虚构',
//                                      x:'center'*/
//                                },
//                                tooltip : {
//                                    trigger: 'item',
//                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
//                                },
//                                legend: {
//                                    orient: 'vertical',
//                                    left: 'right',
//                                    bottom:'80px',
//                                    data: ['企业','个体','社会组织','事业单位','机关单位','其他']
//                                },
//                                series : [
//                                    {
//                                        name: '占比情况',
//                                        type: 'pie',
//                                        radius : '55%',
//                                        center: ['40%', '60%'],
//                                        data: data,
// /*在series中添加itemStyle即可直观显示饼型数值*/
//                                        itemStyle:{ 
//                                 normal:{ 
//                                    label:{ 
//                                       show: true, 
//                                       formatter: '{b} : {c} ({d}%)' 
//                                       }, 
//                                       labelLine :{show:true} 
//                                       } 
//                                  } 
//                                    }
//                                ]
                    	        
//                            };
//                            myChart_qyhhmd.setOption(option,true)
</script>

<style lang="scss">

.guide-index {
      background-color: #f0f2f5;
  .tab-menu {
        background-color: #fff;
    height: 60px;
  }
  .el-progress-bar__outer {
    border-radius: 2px;
  }
  .el-progress-bar__inner {
    border-radius: 2px;
  }
  .triangle {
    width: 0;
    height: 0;
@@ -860,6 +1194,27 @@
      border-right-color: transparent;
    }
  }
  .defined-progress{
    position: relative;
    &:before{
      content: '';
      position: absolute;
      width: 2px;
      height: 4px;
      background: #1890ff;
      top: -6px;
      right: -5px;
    }
    &:after{
      content: '';
      position: absolute;
      width: 2px;
      height: 4px;
      background: #1890ff;
      bottom: -6px;
      right: -5px;
    }
  }
  .tab-menu {
    .el-tabs__item {
      padding: 0 30px !important;
@@ -868,10 +1223,14 @@
    }
  }
  .tab-content {
        // padding: 18px 12px;
    padding: 20px;

    .card-view {
      display: flex;
      margin-right: -20px;
        margin-right: -20px;

    // margin-left: -2px;
      .el-card {
        flex: 1;
        margin-right: 20px;
@@ -928,21 +1287,37 @@
      }
    }
    .part {
      padding: 20px 0;
      padding:20px 0;
      margin-bottom: 20px;
      .part-top{
        background-color: #fff;
      }
      .part-bottom{
        background-color: #fff;
            // padding: 0 30px 30px 30px;
                padding: 0 0 25px 0;

        .tab-detail{
              margin: 0 25px;
        }
      }
      .header-width-tab {
        display: flex;
        justify-content: space-between;
          margin-bottom: 12px;

        .rt {
          display: flex;
          padding-top: 20px;
             margin-right: 25px;

        }
      }
      .statics {
        display: flex;
        padding: 0 10px;
        // padding: 0 10px;
        min-height: 400px;
        margin-bottom: 30px;
        margin-bottom: 20px;
        .statics-header {
          height: 50px;
          display: flex;
@@ -983,10 +1358,15 @@
        .lt {
          text-align: left;
          flex: 1;
          padding-right: 40px;
         padding: 3px 15px 15px 18px;
              background-color: #fff;
                  margin-right: 18px;

        }
        .rt {
          text-align: left;
              background-color: #fff;
         padding: 3px 15px 15px 18px;
          width: 400px;
          .header {
            display: flex;
@@ -1044,12 +1424,11 @@
        .gt {
          flex: 1;
          width: auto;
          //padding: 0 20px;
        }
      }
      .tab-swiper {
        width: calc(100vw - 340px);
        margin-bottom: 20px;
           width: calc(100vw - 367px);
    margin: 0 0 20px 20px;
      }
    }
    .general-view {