echart里程标

heyujie

2021-03-16 03fbaa3ebea4cd30ad798a4ec5c27dbb2c2daf86

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -100,7 +100,8 @@
        </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>
@@ -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>
@@ -1110,7 +1113,13 @@
</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 +1172,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 +1236,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 +1307,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 +1373,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 {