hbj_app/pages/indexpage/zdwxy/zdwxy.vue

<template>
  <view>

    <u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="" :autoBack="true">

    </u-navbar>
    <!-- <u-sticky bgColor="#fff">
      <u-tabs lineWidth="37" gutter="25" :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.25)'
        }" :inactiveStyle="{
          color: '#999999',
          transform: 'scale(1)'
        }" :current="tabIndex" :scrollable="true" :list="list1" @click="clicktabs" style="padding-left: 20rpx;"></u-tabs>
    </u-sticky> -->
    <!-- <swiper :current="tabIndex" @change="tabChange" style="height: calc(100vh - 176rpx);margin-top: 10rpx;">
      <swiper-item> -->
    <view class="content" style="height: 100%;overflow-y: scroll;">
      <!-- 危险源统计 -->
      <view class="tongji">
<!--          <view class="head">-->
<!--            <image src="../../../static/images/zdwxy/dept.png"-->
<!--              style="width: 54rpx;height: 54rpx;margin-right: 28rpx;"></image>-->
<!--            <view>采气一厂</view>-->
<!--          </view>-->
          <view
            style="display: flex;justify-content: space-around; align-items: center;margin-top: 27rpx;">
            <view class="bg">
              <view>
                <image src="../../../static/images/zdwxy/weixianyuan.png"
                  style="width: 60rpx;height: 60rpx;margin-right: 24rpx;"></image>
              </view>
              <view class="title">
                <view style="font-size: 28rpx;color: #666666;">重大危险源</view>
                <view>
                  <span
                    style="font-weight: 400;font-size: 28rpx;color: #E65659;line-height: 38rpx;">{{ totalNum }}</span>
                  个
                </view>
              </view>
            </view>
            <view class="bg">
              <view>
                <image src="../../../static/images/zdwxy/beian.png"
                  style="width: 60rpx;height: 60rpx;margin-right: 24rpx;"></image>
              </view>
              <view class="title">
                <view style="font-size: 28rpx;color: #666666;">已备案危险源</view>
                <view>
                  <span
                    style="font-weight: 400;font-size: 30rpx;color: #2D6DFF;line-height: 38rpx;">{{baNum}}</span>
                  个
                </view>
              </view>
            </view>
          </view>
        </view>
      <!-- 卡片 -->
      <view v-if="tableData.length === 0"
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">

        <image src="../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
        <span style="color: #9f9f9f;margin-top: 30rpx;">该场站下暂无危险源信息~</span>
      </view>
      <view class="card" v-for="(item, index) in tableData" :key="index">
        <!-- 重大危险源头部 -->
        <view class="head">
          <view style="font-weight: bold;font-size: 32rpx;color: #333333;">{{ item.name }}</view>
          <view class="leavl">{{ setDict(item.level, levelList) }}</view>
        </view>
        <!-- 中间 -->
        <view class="center" style="display: flex;">
          <view style="width: 316rpx;height: 181rpx;overflow: hidden;" v-if="item.pics > 0">
            <image :src="item.picList[0]" style="width: 100%;height: 100%;object-fit: cover;flex: 1;">
            </image>
          </view>

          <image src="../../../static/images/zdwxy/danger.png"
                 style="width: 178rpx;height: 131rpx;margin-right: 18rpx;" v-else></image>
          <view style="font-weight: normal;font-size: 28rpx;color: #333333;">
            <!-- <view style="color: #333333;">负责人：{{ item.directorName }}</view> -->
            <view class="dept" style="margin: 5rpx 0;">{{ item.erDeptName }}/{{ item.deptName }}</view>
            <view
                style=" color: #333333;width:442rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              负责人：{{ item.userName }}</view>
            <view
                style="color: #333333;width:442rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              位置：{{ item.address }}</view>
          </view>
        </view>
        <!-- 底部 -->
        <view style="display: flex;padding: 14rpx 28rpx;justify-content: space-between;">
          <view>
            <view>
              备案状态：
              <span style="color: #7D858E;">{{ setDict(item.baStatus, beianStatusList) }}</span>
            </view>
            <!-- <view>
              危险源描述：
              <span style="color: #7D858E;">{{ item.text1 }}</span>
            </view> -->
            <!-- 	<view
              style="margin: 30rpx 0;width: 483rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              有效期：
              <span style="color: #7D858E;">{{ item.validityBegin }} 至
                {{ item.validityEnd }}</span>
            </view> -->
            <view v-if="item.baStatus=='1'">备案信息：{{item.baInfo}}</view>
<!--            <view v-if="item.fileList.length > 0">-->
<!--              <view>附件：</view>-->
<!--              <view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"-->
<!--                    v-for="(item1,index1) in item.fileList" @click="goToPdfSee(item1.showUrl)"-->
<!--                    v-if="item1.fileSuffix === 'pdf'">-->
<!--                {{item1.fileActualName}}-->
<!--              </view>-->
<!--              <view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"-->
<!--                    v-for="(item1,index1) in item.fileList" @click="prefile(item1.showUrl)" v-else>-->
<!--                {{item1.fileActualName}}-->
<!--              </view>-->
<!--            </view>-->

            <!-- <view>查看危险源</view> -->
          </view>
          <view v-if="item.isBa == 'Y'">
            <image src="../../../static/images/zdwxy/success.png" style="width: 129rpx;height: 129rpx;">
            </image>
          </view>
        </view>
      </view>
    </view>
    <!-- </swiper-item>
      <swiper-item>22</swiper-item>
    </swiper> -->
  </view>
</template>
<script>
import {
  getDicts
} from '@/api/indexpage/user.js'
// 重大危险源详情
import {
  listSource,
  listSourceFiling,
  getSource,
  selectListByFilingId,
  getSourceAppTj
} from '@/api/indexpage/zdwxy/index.js'
export default {
  onLoad(options) {
    this.optionId = options.id
  },
  data() {
    return {
      optionId: '', //传值id
      // tabs内容
      list1: [{
        name: '危险源场站'
      },
        {
          name: '备案情况'
        }
      ],


      totalNum: undefined,
      baNum : undefined,
      wbaNum: undefined,
      tabIndex: 0, //tabs下标
      tableData: [], //危险源表格数据
      levelList: [], //等级数组
      beianList: [], //备案表格数据
      beianStatusList: [] //是否备案字典数组
    }
  },
  mounted() {
    this.getDict()
    this.getList() //危险源信息
  },

  methods: {
    //文件预览
    prefile(e) {
      uni.downloadFile({
        url: e,
        success: function(res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function(res) {
              console.log('打开文档成功');
            }
          });
        }
      });

    },
    //pdf跳转
    goToPdfSee(url) {
      this.$tab.navigateTo(`/pages/pdf/filePreview?urlID=${url}`);
    },
    // 字典值
    getDict() {
      getDicts('source_level').then(res => {
        let dataInfo = res.data
        this.levelList = dataInfo.map(item => {
          return {
            key: item.dictLabel,
            value: item.dictValue
          }
        })
      })
      getDicts('source_ba_status').then(res => {
        let dataInfo = res.data
        this.beianStatusList = dataInfo.map(item => {
          return {
            key: item.dictLabel,
            value: item.dictValue
          }
        })
      })
    },
    setDict(stauts, list) {
      for (let item of list) {
        if (item.value === stauts) {
          return item.key
        }
      }
    },
    // 获取重大危险源数据
    getList() {
      // selectListByFilingId(this.optionId).then(res => {
      //   this.tableData = res.data
      //   console.log(this.tableData, '重大危险源')
      // })
      getSourceAppTj().then(res => {
        console.log(res.data,"sssssssssssssss")
        this.totalNum = res.data.totalNum;
        this.baNum  = res.data.baNum;
        this.wbaNum  = res.data.wbaNum;
        this.tableData = res.data.sourceVoList;
        // console.log(this.tableData, '重大危险源')
      })
    },
    getBeiAnList() {
      listSourceFiling().then(res => {
        this.beianList = res.rows
        // console.log(res, "备案信息");
      })
    },
    // tabs点击切换
    clicktabs(e) {
      this.switchTab(e.index)
    },
    // 轮播图切换
    tabChange(e) {
      let index = e.target.current || e.detail.current // 获取到当前移动到第几个
      this.switchTab(index)
    },
    //优化---当index相同时，不执行代码
    switchTab(index) {
      if (this.tabIndex == index) {
        return
      } else {
        this.tabIndex = index
      }
    }
  }
}
</script>
<style lang="scss">
page {
  box-sizing: border-box !important;

  .content {
    padding: 30rpx;

    .tongji {
      width: 690rpx;
      height: 150rpx;
      background: #ffffff;
      box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
      border-radius: 20rpx;

      .head {
        display: flex;
        align-items: center;
        padding: 26rpx 45rpx;
        border-bottom: 2rpx solid #eeeeee;
      }

      .bg {
        width: 330rpx;
        height: 143rpx;
        background: url('@/static/images/zdwxy/bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        padding-left: 28rpx;
      }
    }

    .card {
      width: 705rpx;
      height: 502rpx;
      background: url('@/static/images/zdwxy/contentbg.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 24rpx;

      .head {
        padding: 28rpx 32rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #eeeeee;

        .leavl {
          width: 97rpx;
          height: 41rpx;
          background: #ffb911;
          border-radius: 17rpx 0rpx 17rpx 0rpx;
          font-weight: 500;
          font-size: 29rpx;
          color: #ffffff;
          line-height: 41rpx;
          text-align: center;
        }
      }

      .center {
        .dept {
          background: #e9f2fd;
          border-radius: 10rpx;
          border: 1px solid #a5c6eb;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          font-size: 26rpx;
          color: #4c96dc;
          padding: 8rpx 20rpx;
        }

        padding: 26rpx 27rpx;
        border-bottom: 2rpx solid #eeeeee;
      }
    }
  }
}
</style>