jinshui-screen/src/views/next/screen-content-left/red-party-build/index.vue

<template>
  <div class="red-party-build">
    <screen-title>
      <div slot="left" class="screen-title-left">动力主轴</div>
    </screen-title>
    <div class="community-list">
      <div class="text-title">
        <img src="@/assets/images/party-people-title.png" alt="" />
      </div>
      <div class="community-list-content">
        <StrengthMainList
          :headerList="headerList"
          :dataList="dataList"
          :pageSize="4"
        />
      </div>
    </div>
    <div class="org-structure">
      <div class="text-title">
        <img src="@/assets/images/org-structure-logo.png" alt="" />
      </div>
      <div class="org-structure-content">
        <OrgStructure />
      </div>
    </div>
    <div class="partyer-style">
      <div class="text-title">
        <img src="@/assets/images/party-style-title.png" alt="" />
      </div>
      <div class="partyer-style-content" @click="showConflictMediation">
        <!-- <div class="party-style-swipper">
          <div
            class="swiper-wrapper"
            @mouseover="stopPartyerStyleSwipper"
            @mouseout="startPartyerStyleSwipper"
          >
            <template v-if="partyerStyleSwipper">
              <div
                class="swiper-slide"
                v-for="(item, index) in partyerList"
                :key="'index-' + index"
              >
                <div class="partyer-item-container">
                  <div
                    class="partyer-item"
                    v-for="(partyer) in item"
                    :key="partyer.id"
                    @click="showPartyerStyleDialog(partyer)"
                  >
                    <div class="avatar">
                      <img :src="partyer.photo" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">{{ partyer.name }}</div>
                      <div class="grid">{{ partyer.grip }}</div>
                      <div class="intro">{{ partyer.deep }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div> -->
        <div class="select-tab">
          <div class="select-tab-container">
            <img src="@/assets/images/conflict-mediation-sword.png" alt="" />
          </div>
        </div>
        <div class="tab-list">
          <div class="tab-list-item" v-for="item in tabList" :key="item.value">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle'
import StrengthMainList from './strength-main-list'
import { mapActions } from 'vuex'
import { getCommunityList, getPartyerStyleList } from 'api/screen-content-left'
import Bus from 'utils/eventBus'
import OrgStructure from './org-structure'
export default {
  name: 'red-party-build',
  data () {
    return {
      headerList: [
        { title: '序号', width: '100%' },
        { title: '名称', width: '300%' },
        { title: '话题数', width: '300%' },
        { title: '操作', width: '300%' }
      ],
      dataList: [],
      partyerList: [],
      partyerStyleSwipper: '',
      tabList: [
        { label: '街道一站式矛盾纠纷多元调解中心', value: 'tab1' },
        { label: '社区（村）一站式调解工作站', value: 'tab2' },
        { label: '社区（村）社会组织', value: 'tab3' }
      ]
    }
  },
  components: {
    StrengthMainList,
    OrgStructure
  },
  created () {
    this.getCommunityList()
    // this.getPartyerStyleList()
  },
  methods: {
    ...mapActions({
      showGlobalDialog: 'showGlobalDialog',
      set_conflictMediationVisible: 'SET_CONFLICTMEDIATIONVISIBLE'
    }),
    // 获取社区列表
    getCommunityList () {
      this.dataList = []
      getCommunityList().then(({ data: res }) => {
        console.log('获取社区列表', res)
        res.list.forEach(item => {
          this.dataList.push({
            ...item,
            visible: false
          })
        })
      }).catch(err => {
        console.log('获取社区列表', err)
      })
    },
    // 获取代表风采列表
    getPartyerStyleList () {
      this.partyerList = []
      getPartyerStyleList().then(({ data: res }) => {
        console.log('获取代表风采列表', res)
        res.list.forEach((item, index) => {
          if (this.partyerList[Math.floor(index / 2)]) {
            this.partyerList[Math.floor(index / 2)].push(item)
          } else {
            this.partyerList[Math.floor(index / 2)] = []
            this.partyerList[Math.floor(index / 2)].push(item)
          }
        })
        if (this.partyerList.length === 1) {
          this.partyerList = this.partyerList.concat(this.partyerList)
        }
        this.$nextTick(() => {
          this.initPartyerStyle()
        })
      }).catch(err => {
        console.error('获取代表风采列表', err)
      })
    },
    // 鼠标移入-swapper停止滚动
    stopPartyerStyleSwipper () {
      this.partyerStyleSwipper && this.partyerStyleSwipper.autoplay.stop()
    },
    // 鼠标移除-swapper恢复滚动
    startPartyerStyleSwipper () {
      this.partyerStyleSwipper && this.partyerStyleSwipper.autoplay.start()
    },
    // 初始化党员风采swapper
    initPartyerStyle () {
      if (!this.partyerStyleSwipper) {
        this.partyerStyleSwipper = new Swiper('.party-style-swipper', {
          loop: true,
          speed: 800,
          autoplay: {
            disableOnInteraction: false,
            delay: 8000
          }
        })
      }
    },
    // 显示 党员风采弹窗
    showPartyerStyleDialog (item) {
      Bus.$emit('emitPartyerStyleData', item)
      this.showGlobalDialog('partyerStyle')
    },
    // 显示多元调解
    showConflictMediation () {
      this.showGlobalDialog('')
      this.set_conflictMediationVisible(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.red-party-build {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .text-title {
    width: 100%;
    height: 46px;
    display: flex;
    justify-content: center;
    img {
      width: 346px;
      height: 100%;
    }
  }
  .community-list {
    width: 100%;
    height: 41.08%;
    box-sizing: border-box;
    padding-top: 26px;
    &-content {
      width: 100%;
      height: calc(100% - 26px - 46px);
    }
  }
  .org-structure {
    width: 100%;
    height: 35.04%;
    box-sizing: border-box;
    &-content {
      width: 100%;
      height: calc(100% - 26px - 46px);
    }
  }
  .partyer-style {
    width: 100%;
    height: 23.88%;
    box-sizing: border-box;
    &-content {
      width: 100%;
      height: calc(100% - 26px - 46px);
      box-sizing: border-box;
      cursor: pointer;
      .party-style-swipper {
        width: 100%;
        height: 100%;
        .swiper-wrapper {
          width: 100%;
          height: 100%;
          .swiper-slide {
            width: 100%;
            height: 100%;
            .partyer-item-container {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              cursor: pointer;
              .partyer-item {
                flex-shrink: 0;
                width: calc(50% - 5px);
                height: 100%;
                display: flex;
                background: rgba(128, 188, 255, 0.12);
                .avatar {
                  width: 64px;
                  height: 100%;
                  background: rgba(255, 255, 255, 0.8);
                }
                .info {
                  width: calc(100% - 64px);
                  height: 100%;
                  box-sizing: border-box;
                  padding-left: 8px;
                  .name {
                    font-size: 18px;
                    line-height: 38px;
                    font-family: "PingFang Regular";
                    font-weight: 900;
                    color: #ffffff;
                  }
                  .grid {
                    font-size: 16px;
                    line-height: 20px;
                    margin-top: 4px;
                    font-family: "PingFang Regular";
                    font-weight: 900;
                    color: #b5d9ff;
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .intro {
                    font-size: 16px;
                    font-family: "PingFang Regular";
                    font-weight: 900;
                    color: #b5d9ff;
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
        }
      }
      .select-tab {
        width: 100%;
        &-container {
          width: 42px;
          height: 18px;
          margin: 0 auto;
          position: relative;
          top: -4px;
        }
      }
      .tab-list {
        width: 100%;
        height: calc(100% - 18px - 10px);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
        &-item {
          width: 100%;
          height: 100%;
          background: url("~@/assets/images/org-bg.png") no-repeat;
          background-size: 100% 100%;
          font-family: "PingFang Regular";
          font-weight: 900;
          font-size: 15px;
          white-space: wrap;
          color: #fff;
          line-height: 26px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          box-sizing: border-box;
          padding: 0 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>