soc_app/src/views/menu/monitoringCall/components/addInfo.vue

<template>
  <div>
    <NavBar />
    <div class="bigBox">
      <van-row>
        <van-col span="24">
          <!-- <van-cell title="任务名称" value="每周监控调阅(0501~0507)" /> -->
          <div class="textTitle">任务名称:{{ taskData?.taskName }}</div>
        </van-col>
        <van-col span="24">
          <!-- <van-cell title="调阅开始时间" value="2023-05-05 10:12" /> -->
          <div class="text">调阅开始时间:{{ taskData?.taskStartTime }}</div>
        </van-col>
      </van-row>

      <!-- 主机选择 -->
      <van-row>
        <van-col span="24">
          <van-field v-model="host" is-link readonly label="监控主机" placeholder="" @click="showHost = true" />
          <van-popup v-model="showHost" round position="bottom">
            <van-picker
              title="监控主机"
              show-toolbar
              :columns="hostList"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onChange"
            >
            <template #option="option">
                <div style="display: flex; flex-direction: column; align-items: center">
                  <!-- <div>{{ option.id }}</div> -->
                  <div>{{ option.deviceName }}</div>
                </div>
              </template>
          </van-picker> </van-popup
        ></van-col>
      </van-row>
      <!-- 视频通道 -->
      <van-row>
        <van-col span="24">
          <van-field v-model="fieldValue" :disabled="ishost" is-link readonly label="视频通道" placeholder="" @click="showStatus = true" />
          <van-popup v-model="showStatus" :disabled="ishost" round position="bottom">
            <van-picker
              title="视频通道"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onChange"
            >
              <template #option="option">
                <div style="display: flex; flex-direction: column; align-items: center">
                  <div>{{ option.id }}</div>
                  <div>{{ option.deviceName }}</div>
                </div>
              </template>
            </van-picker>
          </van-popup></van-col
        >
      </van-row>
      <van-row>
        <van-col span="24">
          <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
            请选择实际调阅项目进行填写,不需要编辑所有项目
          </van-notice-bar>
        </van-col>
      </van-row>

      <div>
        <!-- 主体选择项 -->
        <van-collapse v-model="activeNames" :is-link="false">
          <van-collapse-item name="1">
            <template #title>
              <div>
                <van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
              </div>
            </template>

            <van-row>
              <van-col span="24">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value1" :options="option1" />
                </van-dropdown-menu>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="24">
                <van-field
                  v-model="message"
                  rows="2"
                  autosize
                  label="异常说明"
                  type="textarea"
                  placeholder="请输入异常说明"
                  show-word-limit
                />
              </van-col>
            </van-row>
          </van-collapse-item>
          <van-collapse-item name="2">
            <template #title>
              <div>
                <van-checkbox v-model="checked1" shape="square">复选框</van-checkbox>
              </div>
            </template>

            <van-row>
              <van-col span="24">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value1" :options="option1" />
                </van-dropdown-menu>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="24">
                <van-field
                  v-show="value1 == 0"
                  v-model="message"
                  rows="2"
                  autosize
                  label="异常说明"
                  type="textarea"
                  placeholder="请输入异常说明"
                  show-word-limit
                />
              </van-col>
            </van-row>
          </van-collapse-item>
        </van-collapse>
      </div>
      <!-- 底部按钮 -->
      <div class="bottomClass">
        <van-row>
          <van-col span="24">
            <van-button type="info">添加</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
// 主机列表组件
import MonitoingList from './monitoringList.vue'
import { Col, Row, Dialog, Icon, Picker } from 'vant'
import { registrationList, getorgHost } from '@/api/toConsult.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      columns: ['全部', '已调阅', '调阅中', '待调阅'],
      hostList: [], //主机列表
      showStatus: false, //通道显示隐藏
      showHost: false, //主机显示隐藏
      checked: false,
      checked1: false,
      message: '',
      ishost:true,
      fieldValue: '',
      host:'',//主机名称
      hostId:'',//主机ID
      value1: 0,
      option1: [
        { text: '异常', value: 0 },
        { text: '正常', value: 1 }
      ],
      activeNames: [''],
      taskData: []
    }
  },
  components: {
    NavBar,
    Dialog,
    Icon,
    Picker,
    Col,
    Row,
    MonitoingList
  },
  computed: {
    monitor() {
      return 'monitor'
    },
    ...mapGetters(['orgName', 'orgId'])
  },
  created() {
    this.init()
  },
  methods: {
    //项目初始化获取数据
    init() {
      //获取组织机构数据
      registrationList({ taskId: this.$route.params.id }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.taskData = data
        }
      })
      //获取当前登录人机构下主机列表

      getorgHost(this.orgId).then(res => {
        
        let { code, data, msg } = res
        if (code == 200) {
          this.hostList = data
        }
      })
    },
    onConfirm(value, index) {
      this.host=value
      this.hostId=this.hostList[index].id
      this.ishost=false
    },
    onChange(picker, value, index) {
      
    },
    onCancel() {
      Toast('取消')
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  height: calc(100vh - 260px);
  overflow: scroll;
}
.van-button {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
}
.bottomClass {
  position: fixed;
  width: 100%;
  bottom: 0%;
}
.condition {
  font-size: 50px !important;
  line-height: 50px;
  color: #1989fa;
}
.textTitle {
  font-size: 40px;
  font-weight: bold;
  padding: 20px;
}
.text {
  padding: 20px;
  font-size: 26px;
}
</style>