soc_app/src/views/home/works.vue

<template>
  <div class="index-container">
    <nav-bar :leftArrow="false"></nav-bar>
    <weather-box @tabsClassChange="tabsClassChange"></weather-box>
    <!-- 步骤条 -->
    <van-tabs :class="tabsClass" color="#008cd6" @click="tabClickHandler" v-if="workList && workList.length > 0">
      <van-tab
        :title="i.taskTypeText"
        :name="worksLink(1, i.taskType)"
        v-for="i in workList"
        :key="i.taskType"
        :badge="i.nums"
      >
        <template v-for="item in workList">
          <!-- 列表 -->
          <div class="cellMargin" v-if="item.taskType == i.taskType" :key="item.taskType">
            <!-- 标题区域 -->
            <!-- lz -->
            <van-cell
              :value="item.nums"
              is-link
              :to="{ path: worksLink(3, item.taskType) }"
              :id="worksLink(1, item.taskType)"
            >
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="titleLeft"> </span>
                <span class="custom-title">{{ item.taskTypeText }} </span>
              </template>
            </van-cell>
            <!-- 待办区域 -->
            <div class="marginCls" v-if="item.taskType == i.taskType">
              <!-- <van-empty description="暂无数据" /> -->
              <van-cell-group v-if="item.taskType!=2">
                <van-cell
                  @click.stop="isFalgHandler(i, item.taskType, item.id)"
                  v-for="(i, index) in item.dataList"
                  :key="index"
                  class="mainTitle"
                  :value="worksLink(2, item.taskType, i.recStatus ? i.recStatus : i.status)"
                  :label="
                    i.startTime.substring(5, i.startTime.length - 3) +
                    '至' +
                    i.endTime.substring(5, i.endTime.length - 3)
                  "
                  :value-class="iColorClas(item.taskType, i.status)"
                >
                  <template #title>
                    <span class="custom-title">{{ i.taskName }}
<!--                      <van-tag
                        class="resetDy"
                        @click.stop="resetHandler(i.id)"
                        v-if="i.status == 1 && item.taskType == 3"
                        type="primary"
                      >重新调阅</van-tag
                      >-->
                    </span>
                    <div class="org-name-class">
                      {{ i.orgName}}
                    </div>
                  </template>

                  <template #right-icon>
                    <van-icon name="arrow" class="rightIcon"/>
                  </template>
                </van-cell>
              </van-cell-group>

              <van-collapse v-if="item.taskType==2" class="check-register list-item" v-model="activeNames">
                <van-collapse-item :name="v.id+i" v-for="(v,i) in item.dataList" :key="v.id+i">
                  <template #title>
                    <div class="item-title">
                      <!-- <div class="textTitle">{{ v.taskName}}</div> -->
                      <van-cell :title="v.taskName" :border="false" :label="v.startTime.substring(5, v.startTime.length - 3) +
                    '至' +
                    v.endTime.substring(5, v.endTime.length - 3)"></van-cell>
                      <div class="collapse-title">
                        <div :class="{'active':v.active==2}">
                          <p>{{ v.uncompleted.length }}</p>
                        </div>
                        <!-- <div :class="{'active':v.active==1}" @click.stop="changeList(v,1)">
                          <p>{{v.completed.length}}</p>
                          <p>已检查</p>
                        </div>   -->
                      </div>
                    </div>
                  </template>
                  <div class="check-item-list">
                    <van-cell
                      v-for="(a,index) in v.uncompleted" :key="a.id"
                      :title="a.orgName"
                      @click.stop="isFalgHandler(a, item.taskType, item.id)">
                      <template #right-icon>
                        <div>
                          <span :class="iColorClas(item.taskType, a.status)">
                            {{ worksLink(2, item.taskType, a.recStatus ? a.recStatus : a.status) }}
                          </span>
                        </div>
                      </template>
                    </van-cell>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
          </div>
        </template>
      </van-tab>
    </van-tabs>

    <!-- 扫描弹框 -->
    <scandialog ref="scandialog" @input="resultImg" @changeNFC="getNFC"></scandialog>
  </div>
</template>

<script>
import scandialog from '@/components/nfcPopup/alone.vue'
import TopBar from '@/components/TopBar'
import WeatherBox from "@/components/weatherBox/index.vue";
import {Toast, Dialog} from 'vant'
import {base64ToBlob} from '@/utils/base64TurnImg.js'
import {registration, resetTask,getMonitorStart} from '@/api/toConsult.js'
import {upload} from '@/api/public'
import {getPanelList} from '@/api/drillTask.js'

export default {
  name: 'works',
  components: {TopBar, scandialog, WeatherBox},
  data() {
    return {
      big_box: 'big_box',
      active: 0,
      tabsClass: 'tab-tabs',
      taskId: '', //监控调阅ID
      workList: [], //工作台列表
      oldScrollTop: '',
      falg: false, //待调阅的时候 不进行跳转页面单独处理
      activeNames: [],
    }
  },
  mounted() {
    if (this.orgId) {
      this.$refs.topbar.getTheWeather()
    }
    // if (this.$refs.topbar.list?.length > 0) {
    //   this.big_box = 'big_boxTwo'
    // }
  },
  created() {
    this.getList()
  },
  methods: {
    tabsClassChange(str) {
      this.tabsClass = str || 'tab-tabs'
    },
    iColorClas(type, status) {
      if (status == 0 || (type == 9 && status == 1) || (type == 9 && status == 10) || (type == 0 && status == 1) || (type == 2 && status == 1)) {
        return 'wj-title-blue'
      } else if (type == 9 && status == 13) {
        return 'wj-title-red'
      } else {
        return 'wj-title-orange'
      }
    },
    isFalgHandler(i, taskType, id) {
      // if (i.isExist != undefined && i.isExist == 0) {
      //   return Dialog.alert({
      //     message: '机构下没有主机摄像头，不能开启调阅任务!',
      //     confirmButtonText: '关闭'
      //   })
      // }
      //如果当前是待调阅任务 当前页面处理之后再跳转 不是则正常跳转
      if (taskType == 3) {
        let obj = {taskId: i.id}
        getMonitorStart(obj).then(res => {
          let {code, data, msg} = res
          let dayNums = data.dayNums;
          let noComplete = data.noComplete;
          if (noComplete > 0) {
            this.falg = true
            this.$router.push({path: this.worksLink(4, taskType, i.status, i.id, i)})
          } else {

            if (dayNums >= 5) {
              //提醒确认
              Dialog.confirm({
                title: '提示',
                message: `当前调阅任务今日调阅已达到${dayNums}次,是否继续调阅？`,
              }).then(() => {
                this.falg = false
                this.taskId = i.id
                this.$refs.scandialog.visible = true
                this.globalLoading = true
              })
            } else {
              this.falg = false
              this.taskId = i.id
              this.$refs.scandialog.visible = true
              this.globalLoading = true
            }
          }
        })
      } else {
        this.falg = true
        this.$router.push({path: this.worksLink(4, taskType, i.status, i.id, i)})
      }
    },

    getList() {
      getPanelList().then(res => {
        let {data, code, msg} = res

        this.workList = data
      })
    },
    worksLink(type, val, taskType = '', id = '', item) {
      //type 列表类型区分 //val 类型值 //taskType 具体列表项区分 //id 任务id
      let str = ''
      let strName = ''
      let path = ''
      let pathInfo = ''
      switch (val) {
        case 0:
          str = '/lz'
          strName = '待履职'
          path = '/resumption'
          pathInfo = `/resumption_detail`
          break
        case 3:
          str = '/dy'
          strName = '待调阅'
          path = '/monitoringCall'
          pathInfo = '/consultInfo_' + id
          break
        case 2:
          strName = '待检查'
          path = '/securityCheckRegister'
          pathInfo = '/securityDetail' + id
          str = '/jc'
          break
        case 4:
          str = '/yl'
          strName = '待登记'
          path = '/rehearsalTask'
          pathInfo = '/addRehearsalTask/' + id
          break
        case 5:
          str = '/px'
          strName = '待登记'
          path = '/training'
          pathInfo = '/Addtraining/' + id
          break
        case 7:
          str = '/py'
          strName = '待评优'
          path = '/rehearsaloptimal'
          pathInfo = '/commentSign/' + id

          break
        case 8:
          str = '/wbpj'
          strName = '待评价'
          path = '/resumptionEvaluate'
          pathInfo = '/evaluate/' + id + '_add'

          break
        case 9:
          str = '/wtzg'
          strName = '待确认'
          path = '/problemItem'
          pathInfo = '/problemDetail?id=' + id + '&type=confirm'

          break
        case '/qt':
          str = '/qt'
        case 10:
          str = '/lfsp'
          strName = '待审批'
          path = '/visitCheck'
          pathInfo = '/visitCheckDetail?id=' + id
          break
      }

      if (type == 1) {
        return str
      } else if (type == 2) {
        //返回跳转文字
        //履职
        if (val == 0 && taskType == 2) {
          strName = '进行中'
        }
        //安全检查
        if (val == 2 && taskType == 2) {
          strName = '进行中'
        }

        //监控调阅
        if (val == 3 && taskType == 1) {
          strName = '调阅中'
        }
        //演练登记
        if (val == 4 && taskType == 2) {
          strName = '待评价'
        } else if (val == 4 && taskType == 1) {
          strName = '待签名'
        } else if (val == 4 && taskType == 5) {
          strName = '待提交'
        } else if (val == 4 && taskType == 10) {
          strName = '待评优'
        }
        //教育培训
        if (val == 5 && taskType == 0) {
          strName = '待登记'
        } else if (val == 5 && taskType == 1) {
          strName = '待签名'
        } else if (val == 5 && taskType == 4) {
          strName = '待提交'
        }
        //问题整改
        if (val == 9 && taskType == 0) {
          strName = '待确认'
        } else if (val == 9 && taskType == 10) {
          strName = '待整改'
        } else if (val == 9 && taskType == 13) {
          strName = '已逾期'
        } else if (val == 9 && taskType == 1) {
          strName = '待审批'
        }
        return strName
      } else if (type == 3) {
        //返回列表路径
        return path
      } else {
        //返回详情路径

        //问题整改
        if (val == 9 && taskType == 1) {
          strName = '待审批'
          // pathInfo = '/consultInfo/' + id + '_1'
          pathInfo = '/problemDetail?id=' + id + '&type=confirmDissent'

        }
        if (val == 9 && taskType == 10) {
          strName = '待整改'
          pathInfo = '/problemDetail?id=' + id + '&type=reform'
        }
        if (val == 9 && taskType == 13) {
          strName = '已逾期'
          pathInfo = '/problemDetail?id=' + id + '&type=reform'
        }
        //监控调阅
        if (val == 3 && taskType == 1) {
          strName = '调阅中'
          pathInfo = '/consultInfo/' + id + '_1'
        }
        //演练登记评价跳转
        if (val == 4 && taskType == 2) {
          pathInfo = '/rehearsalTasinfo/' + id + '_evaluate'
        }
        //演练登记签名跳转
        if (val == 4 && taskType == 1) {
          pathInfo = '/rehearsalTaskSign/' + id + '_edit'
        }
        //评优推优跳转
        if (val == 7 && taskType == 10) {
          pathInfo = '/commentSign/' + id + '_comment'
        }
        //教育培训签名跳转
        if (val == 5 && taskType == 1) {
          pathInfo = '/personnelSignature/' + id + '_edit'
        }
        //安全检查跳转
        if ((val == 2 && taskType == 1) || (val == 2 && taskType == 2)) {
          pathInfo = `/securityAdd?id=${id}&enable=${taskType}`
        }
        //履职跳转
        if ((val == 0 && taskType == 1) || (val == 0 && taskType == 2)) {
          pathInfo = `/resumption_detail?id=${id}&enable=${taskType}&taskDate=${item.startTime.split(' ')[0]}
`
        }
        return pathInfo
      }
    },
    //监控调阅待调阅弹框处理
    //文件上传
    resultImg(img) {
      this.photoHandler(img[0].url)
    },
    //上传NFC
    getNFC(nfc) {
      this.photoHandler('', nfc)
    },
    //扫描图片并上传到服务器和后端
    photoHandler(img = '', nfc = '') {
      //上传到服务器
      //开始调阅上传
      let obj = {
        startPicture: img,
        startNfc: nfc,
        taskId: this.taskId,
        monitorFlag: 0
      }
      registration(obj).then(res => {
        let {code, data, msg} = res
        if (code == 200) {
          Toast.success('扫描成功')
          this.$router.push('/consultInfo/' + this.taskId)
        }
      })
    },
    //tab栏点击
    tabClickHandler(name) {
      // const filePath = `/#${name}`
      // const tempLink = document.createElement('a')
      // tempLink.style.display = 'none'
      // tempLink.href = filePath
      // tempLink.setAttribute('target', '_self')
      // document.body.appendChild(tempLink)
      // tempLink.click()
      // document.body.removeChild(tempLink)
    },
    //重新调阅
    resetHandler(id) {
      Dialog.confirm({
        title: '提示',
        message: '确认要对该任务进行重新调阅吗?'
      }).then(() => {
        resetTask(id).then(res => {
          if (res.code == 200) {
            Toast.success('初始化任务成功')
            this.getList()
          }
        })
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrolling)
  }
}
</script>
<style>
.van-info {
  right: -12px;
}
.org-name-class {
  margin-top: 1.066667vw;
  color: #969799;
  font-size: 3.2vw;
  line-height: 4.8vw;
}
</style>
<style lang="scss" scoped>
.van-cell__right-icon {
}

.van-cell::after {
  background-color: #008cd6;
}

.titleLeft {
  display: inline-block;
  width: 8px;
  height: 40px;
  background-color: #008cd6;
  vertical-align: middle;
  margin-right: 10px;
}

.van-cell__title {
  color: #008cd6;
}

::v-deep.van-cell__value {
  // width: 20%;
  float: right;
  display: -webkit-flex;
  -webkit-flex: none;
  flex: none;
}

.mainTitle {
  .van-cell__title {
    color: black;
  }
}

.cellMargin {
  margin: 20px;
  -margin-top: 0px;
  height: calc(100vh - 412px);
  box-shadow: 0 1px 4px #ccc;
  background-color: #fff;
  overflow-y: scroll;
}

.marginCls {
  min-height: 400px;
  width: 100%;
  background-color: #fff;
  // overflow-y: scroll;
}

.empty {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.index-container {
}

.big_box {
  height: calc(100vh - 520px);
  overflow: auto;
}

.tab-tabs {
  padding-top: 90px;
}

.tabs-padding-none {
  padding-top: 0px;
}

.big_boxTwo {
  height: calc(100vh - 570px);

  overflow: auto;
}

a {
  text-decoration: none;
  color: inherit;
  margin-right: 10px;
}

.rightIcon {
  color: #969799;
  line-height: 46px;
  font-size: 40px;
}

.van-collapse-item {
  ::v-deep .van-cell {
    align-items: center;

  }

  .van-collapse-item__title {
    .van-cell__title {
      .item-title {
        ::v-deep .van-cell {
          padding: 0px 0px 0px 0px !important;
        }
      }
    }
  }

  ::v-deep .van-cell__title {
    color: black !important;
    // padding:10px 5px 10px 5px !important;
  }

}

.check-register {
  .org-line {
    padding: 0 10px;
    background-color: #fff;
  }

  .search-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;

    > div {
      width: 50%;
    }
  }

  .org-label {
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 28px;
  }

  .card-list {
    padding: 0 5px 0px 5px;
    height: calc(100vh - 370px);
    overflow: auto;
  }

  .list-item {
    margin: 20px 0px 20px 0px;
    // padding:20 0px 20px 0px;
  }

  .item-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    // border-bottom: 1px solid #f5f5f5;
    padding-bottom: 10px;
  }

  .check-item-list {
    -max-height: 500px;
    overflow: auto;
  }

  .card-num {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #008cd6;
  }

  .collapse-title {
    width: 10%;
    margin-left: 10px;
    float: right;
    display: -webkit-flex;
    // display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28px;
    color: #ccc;

    > div {
      width: 100px;
      font-size: 24px;
      height: 90px;
      padding: 5px 10px;
      // border: 2px solid #ccc;
      // border-radius: 10px;
      // box-shadow: 0 3px 6px #eaeaea;
      > p {
        height: 90px;
        line-height: 90px;
        text-align: center;
      }
    }

    > div {
      color: #969799;
      // background-color: #008cd6;
      // border: 3px solid #008cd6;
    }
  }

  .flex-box {
    display: flex;
    align-items: center;

    > div {
      margin-right: 40px;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      width: 50%;
    }
  }
}
</style>