soc_app/src/views/menu/monitoringCall/index.vue

<template>
  <div>
    <NavBar />
    <van-row>
      <van-col span="24">
        <org-tree v-model="cascaderValue" @change="getDataList"></org-tree>
        <!-- <van-field
          v-model="value1"
          is-link
          label-width="3em"
          clearable
          label="机构"
          placeholder=""
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom" :close-on-click-overlay="false">
          <van-cascader
            v-model="cascaderValue"
            title="组织机构"
            :options="options"
            @close="closeDialog"
            @change="changeCascader"
            @finish="onFinish"
            :field-names="fieldNames"
          />
        </van-popup> -->
      </van-col>
    </van-row>
    <van-row>
      <van-col span="9"
        ><van-field
          v-model="fieldValue"
          label-width="3em"
          clearable
          label="状态"
          placeholder=""
          @click="showStatus = true" />
        <van-popup v-model="showStatus" round position="bottom">
          <van-picker
            title="调阅状态"
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :close-on-click-overlay="false"
          /> </van-popup
      ></van-col>
      <van-col span="9">
        <van-field
          v-model="currentDate"
          clearable
          label-width="3em"
          label="月份"
          placeholder=""
          @click="showDate = true"
        />
        <van-popup v-model="showDate" round position="bottom">
          <van-datetime-picker
            v-model="presentDate"
            @cancel="onCancel"
            @confirm="onDateConfirm"
            type="year-month"
            title="月份"
            ref="pickers"
          />
        </van-popup>
      </van-col>
      <!-- <van-col span="6" class="btnf_box">
        <van-button type="info" class="btn" @click="clearSearch" size="small">重置</van-button>
      </van-col> -->
    </van-row>
    <!-- 调阅列表 -->
    <div class="bigbox">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-panel :title="item.title" v-for="item in taskList" :key="item.id" class="card" status="状态">
          <template #header>
            <div class="titleClass">
              <div class="title">
                {{ item.taskName }} <span :class="monitor[item.status]">{{ item.status | statusFilter(this_) }}</span>
              </div>
              <div>
                <van-button type="info" size="small" v-if="item.status == 0" @click="startMonitorHandler(item.id)"
                  >开始调阅</van-button
                >
                <van-button
                  type="info"
                  size="small"
                  v-else-if="item.status != 0 && item.status != 3"
                  @click="lookInfoHandler(item.id, item.status)"
                  ><van-icon name="arrow"
                /></van-button>
              </div>
            </div>
          </template>
          <div class="mainItem">
            <div>开始时间:</div>
            <div class="date">{{ item.planStartTime }}</div>
          </div>
          <div class="mainItem">
            <div>结束时间:</div>
            <div class="date">{{ item.planEndTime }}</div>
          </div>
        </van-panel>
      </van-list>
    </div>

    <!-- 扫描弹框 -->
    <scandialog ref="scandialog" @change="resultImg"></scandialog>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import { Col, Row, Cascader, Dialog, DatetimePicker, Icon, Picker } from 'vant'
import { deptTreeList, selectListApp, registration } from '@/api/toConsult.js'
import { Toast } from 'vant'
import OrgTree from '@/components/orgTree'
import { newDateMonth } from '@/utils/date.js'
import scandialog from '@/components/nfcPopup/alone.vue'
import { base64ToBlob } from '@/utils/base64TurnImg.js'
import { upload } from '@/api/public'
export default {
  data() {
    return {
      pageNum: 1,
      loading: false, //加载状态
      finished: false, //是否全部加载完成
      str: '',
      fieldValue: '全部',
      monitor: ['monitor', 'monitored', 'monitoring', 'waringtoring'], //状态样式
      value1: JSON.parse(sessionStorage.getItem('SET_USER_ORGNAME')) || '', //输入框model
      currentDate: newDateMonth(),
      presentDate: '', //当前时间
      cascaderValue: JSON.parse(sessionStorage.getItem('SET_USER_ORGID')) || '',
      columns: ['全部'],
      statusList: [], //调阅状态字典数组
      show: false,
      this_: this,
      showStatus: false,
      showDate: false,
      showDialog: false,
      fieldNames: {
        text: 'name',
        value: 'id',
        children: 'children'
      },
      taskId: '', //当前点击所属任务ID
      taskList: [], //任务数组集合
      options: [] //机构数组
    }
  },
  components: {
    NavBar,
    OrgTree,
    scandialog,
    Dialog,
    Icon,
    DatetimePicker,
    Picker,
    Col,
    Row,
    Cascader
  },

  filters: {
    statusFilter(value, this_) {
      let str = ''
      if (this_.statusList.length > 0) {
        this_.statusList.forEach(item => {
          if (value == item.dictValue) {
            str = item.dictLabel
          }
        })
      }

      return str
    }
  },
  created() {
    this.init()
    this.presentDate = this.presentDateCpd
  },
  computed: {
    presentDateCpd() {
      return new Date(+newDateMonth().split('-')[0], +newDateMonth().split('-')[1] - 1)
    }
  },
  mounted() {},
  methods: {
    //机构变化
    getDataList(v) {
      this.cascaderValue = v
      this.selectListAppHandler()
    },
    //onLoad下拉刷新
    onLoad() {
      if (this.pageNum == 1) {
        this.pageNum = 2
      }

      this.selectListAppHandler(() => {
        this.loading = false
        this.pageNum++
      })
    },
    //清空查询条件
    clearSearch() {
      this.str = ''
      this.cascaderValue = ''
      this.value1 = ''
      this.currentDate = ''
      this.fieldValue = ''
      this.selectListAppHandler()
    },
    //nfc拍照功能完成
    change(img) {
      console.log(img)
    },
    //初始化
    init() {
      //获取调阅状态字典
      this.getDictHandler('retrieval_task_status', res => {
        this.statusList = res
        res.forEach(item => {
          this.columns.push(item.dictLabel)
        })
      })
      this.selectListAppHandler()
    },
    selectListAppHandler(type = 0, callBack = () => {}) {
      if (!type) {
        this.pageNum = 1
      }
      //获取任务列表
      selectListApp({
        pageNum: this.pageNum,
        pageSize: 10,
        status: this.str || '',
        orgId: this.cascaderValue || '',
        moth: this.currentDate || ''
      }).then(res => {
        let { code, rows, msg } = res
        if (code == 200) {
          if (type) {
            this.taskList.push(...rows)
            if (rows.length == 0) {
              //已加载完全部数据
              this.finished = true
            }
            callBack()
          } else {
            this.finished = false
            this.taskList = rows
          }

          // if(num===1){
          //   this.loading = false
          //   this.pageNum++
          // }
        }
      })
    },

    //扫描NFC
    nfcHandler() {
      //NFC和图片对应字段先写死后期接入app之后再做更改
      let obj = {
        nfc: 'nfc',
        taskId: this.taskId
      }
      registration(obj).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          Toast.success('扫描成功')
          this.$router.push('/consultInfo/' + this.taskId)
        }
      })
    },
    //扫描图片并上传到服务器和后端
    photoHandler(img) {
      //上传到服务器

      let obj = {
        picture: img,
        taskId: this.taskId
      }
      registration(obj).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          Toast.success('扫描成功')
          this.$router.push('/consultInfo/' + this.taskId)
        }
      })
    },
    //文件上传
    resultImg(img) {
      let obj = base64ToBlob(img.base)
      let formData = new FormData()

      obj.name = '调阅.jpg'
      formData.append('file', base64ToBlob(img.base))

      upload(formData, 'image')
        .then(res => {
          debugger
          console.log(process.env.NODE_ENV)
          /*上传成功*/
          let imgUrl = process.env.NODE_ENV === 'development' ? res.data.url : window.origin + res.data.url
          this.photoHandler(imgUrl)

          // this.$emit("imgUrl", res.data.url);
        })
        .catch(err => {
          /*上传失败*/
        })
    },
    //关闭弹框事件
    closeDialog() {
      this.show = false
      this.selectListAppHandler()
    },
    // 开始调阅事件
    startMonitorHandler(taskId) {
      this.taskId = taskId
      this.$refs.scandialog.visible = true
    },

    //查看调阅详情
    lookInfoHandler(taskId, status) {
      this.taskId = taskId
      this.$router.push('/consultInfo/' + taskId + '_' + status)
    },
    //级联选择当前任意层级触发
    changeCascader(val) {
      console.log(val)
      let { selectedOptions } = val
      //级联值
      this.cascaderValue = selectedOptions[selectedOptions.length - 1].id
      //输入框值
      this.value1 = selectedOptions[selectedOptions.length - 1].name
    },
    onFinish() {},
    //搜索选择状态时触发
    onConfirm(value, index) {
      this.fieldValue = value
      this.statusList.forEach(item => {
        if (value == item.dictLabel) {
          this.str = item.dictValue
        }
      })
      this.showStatus = false
      this.selectListAppHandler()
    },
    //月份选中触发
    onDateConfirm() {
      this.currentDate = this.newDate(this.presentDate)
      this.showDate = false
      this.selectListAppHandler()
    },
    //日期转换
    newDate(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m
    },
    // //日期组件change
    // changeHandler(Picker){
    //   console.log(Picker);
    //   console.log(Picker.getValues());
    //   debugger
    // },
    onChange(picker, value, index) {},
    onCancel() {
      this.show = false
      this.showStatus = false
      this.showDate = false
    }
  }
}
</script>
<style lang="scss" scoped>
.topBox {
  border: 1px solid #ccc;
  margin: 20px;

  display: flex;
  .sonLeftBox {
    padding: 10px;
    flex: 1;
    background-color: #fff;
  }
}
.monitor {
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 20px;
  bottom: 5%;
  right: 2%;
  position: absolute;
  border-radius: 10px;
  background-color: #8cb585;
}
.monitored {
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  bottom: 5%;
  right: 2%;

  position: absolute;
  font-size: 20px;
  border-radius: 10px;
  background-color: #1989fa;
}
.monitoring {
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  bottom: 5%;
  right: 2%;
  position: absolute;
  font-size: 20px;
  border-radius: 10px;
  background-color: #25da0b;
}
.waringtoring {
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  bottom: 5%;
  right: 2%;
  position: absolute;
  font-size: 20px;
  border-radius: 10px;
  background-color: #e46962;
}
.title {
  margin: 10px;
  margin-left: 0px;
  font-size: 40px;
}
.time {
  font-size: 32px;
}
.startMonitor {
  background-color: #f5f5f9;
  color: #1989fa;
  width: 160px;
  line-height: 200px;
  font-size: 36px;
  text-align: center;
}
.endMonitor {
  background-color: #f5f5f9;
  color: #1989fa;
  width: 160px;
  line-height: 200px;
  font-size: 36px;
  text-align: center;
}
.img_box {
  text-align: center;
  .img {
    width: 200px;
    height: 200px;
  }
}
.text {
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  margin-bottom: 100px;
}
.btns {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-around;
  .nfcPhoto {
    color: #409bf2;
    div {
      width: 100%;
      text-align: center;
    }
  }
}
.btnf_box {
  background-color: #fff;
}
.van-dialog {
  padding: 30px;
}
.spanimg {
  display: flex;
  justify-content: flex-end;
  .close {
    width: 50px;
    height: 50px;
  }
}
.btn {
  float: right;
  margin-top: 24px;
  margin-right: 20px;
  box-sizing: border-box;
}
.bigbox {
  height: calc(100vh - 380px);
  overflow: scroll;
  background-color: #fff;
}
.card {
  margin: 20px;
  margin-bottom: 0px;
  box-shadow: 0 8px 12px #ebedf0;
}
.titleClass {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px;
  border-bottom: 1px solid #ccc;

  .title {
    font-size: 30px;
    font-weight: bold;
    flex: 1;
    line-height: 50px;
  }
}
.mainItem {
  display: flex;
  font-size: 28px;
  padding: 20px;
  justify-content: revert;
  .date {
    margin-left: 30px;
  }
  .condition {
    color: #1989fa;
    text-decoration: underline;
  }
}
</style>