<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/IndustryAssetAllocation.vue
 * @Date: 2022-07-27 10:54:49
 * @Description: 
 * @LastEditTime: 2022-07-29 09:06:07
 * @LastEditors: 程迁
-->
<script setup lang="ts">
import { ref, } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper';
import 'swiper/css';
const swiperModules = [Autoplay];
const autoplayProps = {
  delay: 4000,
  loop: false,
  disableOnInteraction: false,
  pauseOnMouseEnter: true
};
const listdata = ref([
  {
    name: '计算机服务和软件业',
    count: 17,
    index: '1',
    color1: '#E67873',
    gress: 90
  },
  {
    name: '建筑业',
    count: 14,
    index: '2',
    color1: '#FF9800',
    gress: 80
  },
  {
    name: '交通运输业',
    count: 12,
    index: '3',
    color1: '#EAC018',
    gress: 75
  },
  {
    name: '制造业',
    count: 11,
    index: '4',
    color1: '#049BFB',
    gress: 70
  },
  {
    name: '金融业',
    count: 10,
    index: '5',
    color1: '#049BFB',
    gress: 60
  }
]);
const listdata2 = ref([
  {
    name: '教育',
    count: 9,
    index: '6',
    color1: '#049BFB',
    gress: 80
  },
  {
    name: '卫生和社会福利业',
    count: 7,
    index: '7',
    color1: '#049BFB',
    gress: 60
  },
  {
    name: '租赁和商务服务业',
    count: 6,
    index: '8',
    color1: '#049BFB',
    gress: 40
  },
  {
    name: '住宿和餐饮业',
    count: 4,
    index: '9',
    color1: '#049BFB',
    gress: 35
  },
  {
    name: '公共管理与社会组织',
    count: 1,
    index: '10',
    color1: '#049BFB',
    gress: 30
  }
]);
</script>

<template>
  <div class="custom-block">
    <Swiper ref="mySwiper" class="screen-real-time-alarm" :modules="swiperModules" loop :autoplay="autoplayProps"
      :observer="true" :observe-parents="true">
      <SwiperSlide>
        <div v-for="(item, index) in listdata" :key="index">
          <div style="margin-bottom: 16px; height: 30px">
            <div style="float: left; width: 10%">
              <span :style="{ background: item.color1 }"
                style="color: #fff; height: 24px; width: 24px; display: block; text-align: center">{{ item.index }}</span>
            </div>
            <div style="float: left; width: 90%">
              <div style="height: 20px; width: 100%">
                <div style="font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; float: left">
                  {{ item.name }}</div>
                <div
                  style="font-size: 16px; font-family: PangMenZhengDao; font-weight: 400; color: #ffffff; float: right">{{
                    item.count }}</div>
                <div style="float: left; width: 100%; margin-top: 3px" class="m-progress"><el-progress
                    :percentage="item.gress" :show-text="false"> </el-progress></div>
              </div>
            </div>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div v-for="(item, index) in listdata2" :key="index">
          <div style="margin-bottom: 16px; height: 30px">
            <div style="float: left; width: 10%">
              <span :style="{ background: item.color1 }"
                style="color: #fff; height: 24px; width: 24px; display: block; text-align: center">{{ item.index }}</span>
            </div>
            <div style="float: left; width: 90%">
              <div style="height: 20px; width: 100%">
                <div style="font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; float: left">
                  {{ item.name }}</div>
                <div
                  style="font-size: 16px; font-family: PangMenZhengDao; font-weight: 400; color: #ffffff; float: right">{{
                    item.count }}</div>
                <div style="float: left; width: 100%; margin-top: 3px" class="m-progress"><el-progress
                    :percentage="item.gress" :show-text="false"> </el-progress></div>
              </div>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<style lang="scss" scoped>
.custom-block {
  width: 100%;
  height: 255px;
  padding-top: 24px;
  box-sizing: border-box;
}
</style>
<style lang="scss">
.m-progress .el-progress-bar__outer {
  background: rgba(255, 255, 255, 0.19);
}

.m-progress .el-progress-bar__outer {
  overflow: inherit !important;
}

.m-progress .el-progress-bar__inner {
  background-image: linear-gradient(to right, #303b52, #5295b4);

  &::after {
    position: absolute;
    background-color: rgba(82, 149, 180, 1) !important;
    width: 5px;
    height: 12px;
    z-index: 10;
    margin-left: -5px;
    margin-top: -2px;
    border-radius: 40%;
  }
}
</style>
