hyj change shhuang

heyujie

2021-11-03 57094ef66e4afb413c39ecd181e65938315c195c

 src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue

@@ -2,16 +2,16 @@
  <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
          class="slide-tab"
          :class="{ act: actSlide == slide.id }"
          @click="checkSlide(slide)"
        >
          <Pie :options="optOfPie(slide)"></Pie>
          <div class="info">
            <div class="title">违规率</div>
            <div class="num">78%</div>
            <div class="place">中铁一局</div>
          </div>
        </div>
      </swiper-slide>
@@ -32,46 +32,44 @@
</template>

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

  },
  methods: {
    optOfPie (slide) {
    optOfPie(slide) {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)",
        },
        // legend: {
        //   orient: 'vertical',
@@ -81,41 +79,43 @@
        // },
        series: [
          {
            name: '违规率',
            type: 'pie',
            color: ['#18bfff', '#e9f6fb'],
            radius: ['60%', '90%'],
            name: "违规率",
            type: "pie",
            color: ["#2D52D7", " #D9DFE6"],
            radius: ["28%", "35%"],
            center: ["50%", "48%"],
            silent: true,
            tooltip: {
              show: false
              show: false,
            },
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
              position: "center",
            },
            hoverAnimation: false,
            labelLine: {
              show: false
              show: false,
            },
            data: [
              { value: slide.ratio, name: '' },
              { value: 100 - slide.ratio, name: '' },

            ]
          }
        ]
      }
              { value: slide.ratio, name: "" },
              { value: 3 - slide.ratio, name: "" },
            ],
          },
        ],
      };
    },
    checkSlide (slide) {
    checkSlide(slide) {
      this.actSlide = slide.id;
      this.$emit('checkTab',slide)
    }
  }
}
      this.$emit("checkTab", slide);
    },
  },
};
</script>

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

@@ -124,24 +124,41 @@
    border-right: 1px solid #eee;
  }
  .slide-tab {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 10px solid #f4f6f9;
    cursor: pointer;
    border-top: 2px solid transparent;
    padding: 20px;
    text-align: left;
    height: 130px;
    background: #f4f6f9;
    opacity: 0.67;
    &.act {
      border-color: #409eff;
      border-color: #2d52d7;
    }
    .title {
      font-size: 16px;
      color: #666;
    }
    .dimension {
      color: #999;
      margin: 10px 0;
    }
    .dimension-val {
      color: #555;
      font-size: 28px;

    .info {
      position: absolute;
      top: 39px;
      left: 50%;
      margin-left: -28px;
      text-align: center;
      .title {
        font-size: 12px;
        color: #425277;
        opacity: 0.6;
      }

      .num {
        font-size: 20px;
        color: #425277;
      }

      .place {
        margin-top: 23px;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
  .swiper-button-prev,