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

zhangzengfei

2021-06-11 fa7044f3ccc9a91bc2bc117d1a06f650d86554f2

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -100,13 +100,14 @@
        </el-card>
      </div>
      <div class="part">
        <div class="header-width-tab">
        <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"
@@ -168,6 +169,7 @@
              </div>
            </div>
          </div>
        </div>
        </div>
        <div class="statics flex-box">
          <div class="lt">
@@ -239,12 +241,13 @@
                  <el-radio-button label="hc">会车</el-radio-button>
                  <el-radio-button label="lsmx">临时慢行</el-radio-button>
                </el-radio-group>
                
                <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>
@@ -567,8 +570,8 @@
          {
            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'}}]
          }
        ]
      },
@@ -638,18 +641,18 @@
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['70%', '90%'],
            radius: ['50%', '80%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              // position: 'center',
              formatter: '{b}\n{c} '
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
@@ -907,24 +910,35 @@
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['70%', '90%'],
            radius: ['50%', '80%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              // position: 'center',
              formatter: '{b}\n{c} '
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            itemStyle:{
              normal:{
                label:{
                  show:true,
                  formatter: '{b}\n{c} ',
                  labelLine:{
                    show:true
                  }
                }
              }
            },
            // labelLine: {
            //   show: false
            // },
            data: [
              { value: 32, name: '防护地段' },
              { value: 55, name: '进出站' },
@@ -1107,10 +1121,56 @@
  },

}



//                                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;
  }
@@ -1163,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;
@@ -1223,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;
@@ -1278,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;
@@ -1339,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 {