Vent-App/pages/warndata/components/gas-detail.vue

<template>
  <view class="gas-detail">
    <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
    <view class="gas-content" v-if="PageCur == 0">
      <view class="search-area">
        <view class="search-l">

          <view class="search-item" @click="getChangeJcd">
            <text class="search-label">监测点：</text>
            <u--input inputAlign="center" v-model="searchText" placeholder="请选择监测点" suffixIcon="arrow-right"
              suffixIconStyle="color: #909399"></u--input>
            <u-action-sheet :show="showJcd" :actions="selectList" title="请选择监测点" @close="showJcd = false"
              @select="selectChangeJcd">
            </u-action-sheet>
          </view>

        </view>
        <view class="search-r">
          <!-- <image src="/static/model/alarmTrue.svg" alt="" class="icon-style" /> -->
          <u-icon name="warning-fill" color="#0eb4fc" size="18"></u-icon>
          <text class="icon-text">低风险</text>
        </view>
      </view>
      <view class="top-area">
        <view class="top-title">
          <view style="font-weight: bold;">瓦斯抽采泵信息</view>
        </view>
        <view class="top-content" v-for="(item, index) in topContentList" :key="index">
          <view class="content-title">{{ item.strinstallpos }}</view>
          <view class="content-item-box">
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.warnLevel }}</view>
                <view class="item-label">报警状态</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.coVal || '--' }}</view>
                <view class="item-label">输入管道内一氧化碳(ppm)</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.readData.gas1 || '--' }}</view>
                <view class="item-label">管路出口处瓦斯</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.gas2 || '--' }}</view>
                <view class="item-label">泵站内瓦斯</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.readData.gas3 || '--' }}</view>
                <view class="item-label">输入管道内瓦斯</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.gas4 || '--' }}</view>
                <view class="item-label">管道输出瓦斯</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.readData.mixedTraffic || '--' }}</view>
                <view class="item-label">输入管道内工混流量</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.standardTraffic || '--' }}</view>
                <view class="item-label">输入管道内标况流量</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.readData.totalGasDrainage || '--' }}</view>
                <view class="item-label">瓦斯抽放量</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <!-- <view class="item-value">{{ item.coVal }}</view>
                <view class="item-label">输入管道内一氧化碳(ppm)</view> -->
              </view>
            </view>
          </view>

        </view>
      </view>
      <view class="bot-area">
        <view class="top-title">
          <view style="font-weight: bold;">安全监测点信息</view>
        </view>
        <view class="top-content" v-for="(item, index) in botContentList" :key="index">
          <view class="content-title">{{ item.strinstallpos || '--' }}</view>
          <view class="content-item-box">
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">瓦斯</view>
                <view class="item-label">测点类型</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.gasC || '--' }}</view>
                <view class="item-label">甲烷</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.warnFlag || '--' }}</view>
                <view class="item-label">测点状态</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readTime || '--' }}</view>
                <view class="item-label">数据时间</view>
              </view>
            </view>

          </view>

        </view>
      </view>

    </view>
    <view class="gas-content" v-if="PageCur == 2">
      <!-- 瓦斯上报列表 -->
      <view v-if="!isShowAdd">
        <view class="top-gas-list">
          <view class="search-box" @click="getChangeTimeTb">
            <text class="dialog-label">填报时间：</text>
            <u--input v-model="tbTime" placeholder="请选择填报时间" inputAlign="center" suffixIcon="arrow-right"></u--input>
            <u-datetime-picker :show="showCalendarTb" v-model="timeRan" mode="datetime" closeOnClickOverlay
              @confirm="confirmTb" @cancel="showCalendarTb = false" @change="changeTb"
              @close="showCalendarTb = false"></u-datetime-picker>
          </view>
          <u-button type="primary" size="small" style="margin: 2px 0px;" @click="getAdd">新增</u-button>
        </view>
        <view class="bot-gas-list">
          <view class="top-title">
            <view style="font-weight: bold;">瓦斯填报列表</view>
          </view>
          <view class="top-content" v-for="(item, index) in gasList" :key="index">
            <view class="content-title-gas">
              <text>
                {{ item.districtTeam_dictText || '--' }}
              </text>
              <u-icon class="icon-gas-edit" name="edit-pen-fill" color="#0eb4fc" size="16"
                @click="getEdit(item)"></u-icon>
              <u-icon class="icon-gas-del" name="trash" color="#0eb4fc" size="16" @click="getDel(item)"></u-icon>
            </view>
            <view class="content-item-box">
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.bxySdzEarly1 || '--' }}</view>
                  <view class="item-label">早班便携仪测量数据一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.bxySdzEarly2 || '--' }}</view>
                  <view class="item-label">早班便携仪测量数据二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.bxySdzNoon1 || '--' }}</view>
                  <view class="item-label">午班便携仪测量数据一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.bxySdzNoon2 || '--' }}</view>
                  <view class="item-label">午班便携仪测量数据二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.bxySdzNight1 || '--' }}</view>
                  <view class="item-label">晚班便携仪测量数据一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.bxySdzNight2 || '--' }}</view>
                  <view class="item-label">晚班便携仪测量数据二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.ch4Early1 || '--' }}</view>
                  <view class="item-label">早班CH4(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.ch4Early2 || '--' }}</view>
                  <view class="item-label">早班CH4(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.ch4Noon1 || '--' }}</view>
                  <view class="item-label">午班CH4(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.ch4Noon2 || '--' }}</view>
                  <view class="item-label">午班CH4(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.ch4Night1 || '--' }}</view>
                  <view class="item-label">晚班CH4(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.ch4Night2 || '--' }}</view>
                  <view class="item-label">晚班CH4(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.co2Early1 || '--' }}</view>
                  <view class="item-label">早班CO2(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.co2Early2 || '--' }}</view>
                  <view class="item-label">早班CO2(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.co2Noon1 || '--' }}</view>
                  <view class="item-label">午班CO2(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.co2Noon2 || '--' }}</view>
                  <view class="item-label">午班CO2(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.co2Night1 || '--' }}</view>
                  <view class="item-label">晚班CO2(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.co2Night2 || '--' }}</view>
                  <view class="item-label">晚班CO2(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.coEarly1 || '--' }}</view>
                  <view class="item-label">早班CO(ppm)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.coEarly2 || '--' }}</view>
                  <view class="item-label">早班CO(ppm)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.coNoon1 || '--' }}</view>
                  <view class="item-label">午班CO(ppm)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.coNoon2 || '--' }}</view>
                  <view class="item-label">午班CO(ppm)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.coNight1 || '--' }}</view>
                  <view class="item-label">晚班CO(ppm)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.coNight2 || '--' }}</view>
                  <view class="item-label">晚班CO(ppm)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.gwSdzEarly1 || '--' }}</view>
                  <view class="item-label">早班光瓦测量一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.gwSdzEarly2 || '--' }}</view>
                  <view class="item-label">早班光瓦测量二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.gwSdzNoon1 || '--' }}</view>
                  <view class="item-label">午班光瓦测量一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.gwSdzNoon2 || '--' }}</view>
                  <view class="item-label">午班光瓦测量二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.gwSdzNight1 || '--' }}</view>
                  <view class="item-label">晚班光瓦测量一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.gwSdzNight2 || '--' }}</view>
                  <view class="item-label">晚班光瓦测量二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.jwSdzEarly1 || '--' }}</view>
                  <view class="item-label">早班甲烷传感器一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.jwSdzEarly2 || '--' }}</view>
                  <view class="item-label">早班甲烷传感器二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.jwSdzNoon1 || '--' }}</view>
                  <view class="item-label">午班甲烷传感器一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.jwSdzNoon2 || '--' }}</view>
                  <view class="item-label">午班甲烷传感器二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.jwSdzNight1 || '--' }}</view>
                  <view class="item-label">晚班甲烷传感器一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.jwSdzNight2 || '--' }}</view>
                  <view class="item-label">晚班甲烷传感器二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.o2Early1 || '--' }}</view>
                  <view class="item-label">早班O2(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.o2Early2 || '--' }}</view>
                  <view class="item-label">早班O2(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.o2Noon1 || '--' }}</view>
                  <view class="item-label">午班O2(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.o2Noon2 || '--' }}</view>
                  <view class="item-label">午班O2(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.o2Night1 || '--' }}</view>
                  <view class="item-label">晚班O2(%)一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.o2Night2 || '--' }}</view>
                  <view class="item-label">晚班O2(%)二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.timeEarly1 || '--' }}</view>
                  <view class="item-label">早班测量时间一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.timeEarly2 || '--' }}</view>
                  <view class="item-label">早班测量时间二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.timeNoon1 || '--' }}</view>
                  <view class="item-label">午班测量时间一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.timeNoon2 || '--' }}</view>
                  <view class="item-label">午班测量时间二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.timeNight1 || '--' }}</view>
                  <view class="item-label">晚班测量时间一</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.timeNight2 || '--' }}</view>
                  <view class="item-label">晚班测量时间二</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.checkPersonEarly || '--' }}</view>
                  <view class="item-label">早班检修员</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.checkPersonNoon || '--' }}</view>
                  <view class="item-label">午班检修员</view>
                </view>
              </view>
              <view class="content-item">
                <view class="item-l">
                  <view class="item-value">{{ item.checkPersonNight || '--' }}</view>
                  <view class="item-label">晚班检修员</view>
                </view>
                <view class="item-c"></view>
                <view class="item-r">
                  <view class="item-value">{{ item.strInstallPos || '--' }}</view>
                  <view class="item-label">安装位置</view>
                </view>
              </view>

            </view>

          </view>
        </view>

      </view>

      <!-- 新增弹窗 -->
      <view v-if="isShowAdd">
        <view class="top-dialog-area">
          <view class="dialog-item" @click="getChange('班次')">
            <text class="dialog-label">班次：</text>
            <u--input inputAlign="center" v-model="formState.bc" placeholder="请选择班次" suffixIcon="arrow-right"
              suffixIconStyle="color: #909399"></u--input>
            <u-action-sheet :show="showDialogBc" :actions="dialogAction" :title="dialogTitle"
              @close="showDialogBc = false" @select="selectChangeBc">
            </u-action-sheet>
          </view>
          <view class="dialog-item" @click="getChange('测量次数')">
            <text class="dialog-label">测量次数：</text>
            <u--input inputAlign="center" v-model="formState.count" placeholder="请选择测量次数" suffixIcon="arrow-right"
              suffixIconStyle="color: #909399"></u--input>
            <u-action-sheet :show="showDialogCl" :actions="dialogAction" :title="dialogTitle"
              @close="showDialogCl = false" @select="selectChangeCl">
            </u-action-sheet>
          </view>
          <view class="dialog-item" @click="getChange('检测地点')">
            <text class="dialog-label">检测地点：</text>
            <u--input inputAlign="center" v-model="formState.jcdd" placeholder="请选择检测地点" suffixIcon="arrow-right"
              suffixIconStyle="color: #909399"></u--input>
            <u-action-sheet :show="showDialogJc" :actions="dialogAction" :title="dialogTitle"
              @close="showDialogJc = false" @select="selectChangeJc">
            </u-action-sheet>
          </view>
          <view class="dialog-item">
            <text class="dialog-label">检测员：</text>
            <u--input inputAlign="center" v-model="formState.jcy" placeholder="请输入"></u--input>
          </view>
        </view>
        <view>
          <view class="center-dialog-area">
            <div class="dialog-title">气体监测数据</div>
            <view class="dialog-item" @click="getChangeTime">
              <text class="dialog-label">第一次检测时间：</text>
              <u--input v-model="formState.time" placeholder="请选择检测时间" inputAlign="center"
                suffixIcon="arrow-right"></u--input>
              <u-datetime-picker :show="showCalendar" v-model="timeRan" mode="datetime" closeOnClickOverlay
                @confirm="showCalendar = false" @cancel="showCalendar = false" @change="change"
                @close="showCalendar = false"></u-datetime-picker>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">CH₄：</text>
              <u--input inputAlign="center" v-model="formState.ch4" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">CO₂：</text>
              <u--input inputAlign="center" v-model="formState.co2" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">CO：</text>
              <u--input inputAlign="center" v-model="formState.co" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">O₂：</text>
              <u--input inputAlign="center" v-model="formState.o2" placeholder="请输入"></u--input>
            </view>
          </view>
          <view class="bottom-dialog-area">
            <div class="dialog-title">三对照数据</div>
            <view class="dialog-item">
              <text class="dialog-label">甲烷传感器：</text>
              <u--input inputAlign="center" v-model="formState.jw" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">光瓦测量数据：</text>
              <u--input inputAlign="center" v-model="formState.gw" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">便携仪测量数据：</text>
              <u--input inputAlign="center" v-model="formState.bxy" placeholder="请输入"></u--input>
            </view>

          </view>
        </view>
        <view v-if="paramCount == 2">
          <view class="center-dialog-area">
            <div class="dialog-title">气体监测数据</div>
            <view class="dialog-item" @click="getChangeTime1">
              <text class="dialog-label">第二次检测时间：</text>
              <u--input v-model="formState.time0" placeholder="请选择检测时间" inputAlign="center"
                suffixIcon="arrow-right"></u--input>
              <u-datetime-picker :show="showCalendar1" v-model="timeRan" mode="datetime" closeOnClickOverlay
                @confirm="showCalendar1 = false" @cancel="showCalendar1 = false" @change="change1"
                @close="showCalendar1 = false"></u-datetime-picker>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">CH₄：</text>
              <u--input inputAlign="center" v-model="formState.ch40" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">CO₂：</text>
              <u--input inputAlign="center" v-model="formState.co20" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">CO：</text>
              <u--input inputAlign="center" v-model="formState.co0" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">O₂：</text>
              <u--input inputAlign="center" v-model="formState.o20" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">T：</text>
              <u--input inputAlign="center" v-model="formState.t0" placeholder="请输入"></u--input>
            </view>
          </view>
          <view class="bottom-dialog-area">
            <div class="dialog-title">三对照数据</div>
            <view class="dialog-item">
              <text class="dialog-label">甲烷传感器：</text>
              <u--input inputAlign="center" v-model="formState.jw0" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">光瓦测量数据：</text>
              <u--input inputAlign="center" v-model="formState.gw0" placeholder="请输入"></u--input>
            </view>
            <view class="dialog-item">
              <text class="dialog-label">便携仪测量数据：</text>
              <u--input inputAlign="center" v-model="formState.bxy0" placeholder="请输入"></u--input>
            </view>

          </view>
        </view>
        <view class="dialog-btn">
          <u-button type="success" size="small" @click="getConfirm">保存</u-button>
          <u-button type="primary" size="small" @click="getCancel">取消</u-button>
        </view>
      </view>


    </view>

  </view>
</template>

<script>
import api from "@/api/api";
import moment from 'moment'
export default {
  name: 'gasDetail',
  props: {},
  watch: {},
  data() {
    return {
      timer: '',
      PageCur: "0",
      tabList: [
        { name: '预警监测' },
        { name: '预警指标' },
        { name: '瓦斯上报' },
      ],
      // isShowSelect: true,
      showJcd: false,
      searchText: '',
      selectList: [],
      topContentList: [],
      botContentList: [],
      //新增参数信息
      isShowAdd: false,//是否显示新增弹窗
      formState: {
        bc: '',
        count: '',
        jcdd: '',
        jcy: '',
        time: '',
        time0: '',
        ch4: '',
        ch40: '',
        co2: '',
        co20: '',
        co: '',
        co0: '',
        o2: '',
        o20: '',
        jw: '',
        jw0: '',
        gw: '',
        gw0: '',
        bxy: '',
        bxy0: ''
      },
      showDialogBc: false,//控制班次选型下拉开启
      showDialogCl: false,//控制测量次数选型下拉开启
      showDialogJc: false,//控制监测地点选型下拉开启
      paramCount: 1,
      dialogTitle: '',
      dialogAction: [],//下拉选项列表
      showCalendar: false,//控制日期选型下拉开启
      showCalendar1: false,
      timeRan: Number(new Date()),
      gasList: [],//瓦斯填报列表数据
      tbTime: null,//查询条件-填报时间
      showCalendarTb: false,//控制填报时间组件弹出
      dialogLabel: '',
    };
  },
  beforeDestroy() {
    this.timer = null
    clearTimeout(this.timer)
  },
  mounted() {
    this.getTabList()
  },
  methods: {


    NavChange: function (item) {
      clearTimeout(this.timer)
      this.PageCur = item.index;
      if (this.PageCur == 0) {
        this.getMonitor(this.selectList[this.PageCur].deviceID, true);
      } else if (this.PageCur == 2) {
        this.getGasList()
      }
    },
    // changeSelect() {
    //   clearTimeout(this.timer)
    //   this.isShowSelect = !this.isShowSelect
    // },
    // choiceSelect(val) {
    //   this.searchText = val.name
    //   this.isShowSelect = true
    //   this.getMonitor(val.deviceID, true);
    // },
    getChangeJcd() {
      this.showJcd = true

    },
    selectChangeJcd(e) {
      clearTimeout(this.timer)
      this.searchText = e.name
      this.getMonitor(e.deviceID, true);
    },
    getMonitor(deviceID, flag) {
      let than = this
      than.timer = setTimeout(
        async () => {
          await than.getSysWarnList(deviceID, 'gas');
          if (than.timer) {
            than.timer = null;
          }
          than.getMonitor(deviceID);
        },
        flag ? 0 : 3000
      );
    },
    //获取顶部tab选项数据
    getTabList() {
      new Promise((resolve, reject) => {
        api
          .sysTypeWarn({ type: 'gas' })
          .then((response) => {
            if (response.data.code == 200 && response.data.result.length != 0) {
              let result = response.data.result
              this.selectList = result.map((el) => {//lxh
                return {
                  name: el.systemname,
                  deviceID: el.id,
                };
              });
              this.searchText = this.selectList[0].name
              this.getMonitor(this.selectList[0].deviceID, true);

            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取瓦斯详情数据
    getSysWarnList(id, type) {
      new Promise((resolve, reject) => {
        api
          .sysWarn({ sysid: id, type: type })
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result
              this.topContentList = data.pump
              this.botContentList = data.gas
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },

    //获取安装位置下拉选项
    getSelectList() {
      new Promise((resolve, reject) => {
        api
          .getSelect({ devicekind: 'gasDayReport' })
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result
              this.dialogAction = data.map(v => {
                return {
                  name: v.strinstallpos,
                  id: v.devicekind
                }
              })
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //班次下拉选项切换
    selectChangeBc(e) {
      this.formState.bc = e.name
    },
    //监测次数选项切换
    selectChangeCl(e) {
      this.formState.count = e.name
      this.paramCount = e.id
    },
    //检测地点拉选项切换
    selectChangeJc(e) {
      this.formState.jcdd = e.name
    },
    //点击弹出下拉选型
    getChange(data) {
      switch (data) {
        case '班次':
          this.dialogTitle = `请选择${data}`
          this.showDialogBc = true
          this.dialogAction = [
            { name: '早班', },
            { name: '午班', },
            { name: '晚班', },
          ]
          break;
        case '测量次数':
          this.dialogTitle = `请选择${data}`
          this.showDialogCl = true
          this.dialogAction = [
            { name: '一次', id: 1 },
            { name: '二次', id: 2 },
          ]
          break;
        case '检测地点':
          this.dialogTitle = `请选择${data}`
          this.showDialogJc = true
          this.getSelectList()
          break;
      }
    },
    //点击弹出日期下拉选项
    getChangeTime() {
      this.showCalendar = true
    },
    getChangeTime1() {
      this.showCalendar1 = true
    },
    getChangeTimeTb() {
      this.showCalendarTb = true
    },
    confirmTb() {
      this.showCalendarTb = false
      this.getGasList()
    },

    change(e) {
      this.formState.time = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
    },
    change1(e) {
      this.formState.time0 = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
    },
    changeTb(e) {
      this.tbTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
    },
    //瓦斯新增
    getAdd() {
      this.isShowAdd = true
      this.dialogLabel = 'add'
    },
    //新增保存
    getConfirm() {
      let that = this
      let param = {}
      if (that.formState.bc == '早班' && that.formState.count == '一次') {
        param = {
          id: that.formState.id,
          bxySdzEarly1: that.formState.bxy,
          ch4Early1: that.formState.ch4,
          checkPersonEarly: that.formState.jcy,
          co2Early1: that.formState.co2,
          coEarly1: that.formState.co,
          gwSdzEarly1: that.formState.gw,
          jwSdzEarly1: that.formState.jw,
          o2Early1: that.formState.o2,
          strInstallPos: that.formState.jcdd,
          timeEarly1: that.formState.time
        }

      } else if (that.formState.bc == '早班' && that.formState.count == '二次') {
        param = {
          id: that.formState.id,
          bxySdzEarly1: that.formState.bxy,
          bxySdzEarly2: that.formState.bxy0,
          ch4Early1: that.formState.ch4,
          ch4Early2: that.formState.ch40,
          checkPersonEarly: that.formState.jcy,
          co2Early1: that.formState.co2,
          co2Early2: that.formState.co20,
          coEarly1: that.formState.co,
          coEarly2: that.formState.co0,
          gwSdzEarly1: that.formState.gw,
          gwSdzEarly2: that.formState.gw0,
          jwSdzEarly1: that.formState.jw,
          jwSdzEarly2: that.formState.jw0,
          o2Early1: that.formState.o2,
          o2Early2: that.formState.o20,
          strInstallPos: that.formState.jcdd,
          timeEarly1: that.formState.time,
          timeEarly2: that.formState.time0
        }
      } else if (that.formState.bc == '午班' && that.formState.count == '一次') {
        param = {
          id: that.formState.id,
          bxySdzNoon1: that.formState.bxy,
          ch4Noon1: that.formState.ch4,
          checkPersonNoon: that.formState.jcy,
          co2Noon1: that.formState.co2,
          coNoon1: that.formState.co,
          gwSdzNoon1: that.formState.gw,
          jwSdzNoon1: that.formState.jw,
          o2Noon1: that.formState.o2,
          strInstallPos: that.formState.jcdd,
          timeNoon1: that.formState.time
        }

      } else if (that.formState.bc == '午班' && that.formState.count == '二次') {
        param = {
          id: that.formState.id,
          bxySdzNoon1: that.formState.bxy,
          bxySdzNoon2: that.formState.bxy0,
          ch4Noon1: that.formState.ch4,
          ch4Noon2: that.formState.ch40,
          checkPersonNoon: that.formState.jcy,
          co2Noon1: that.formState.co2,
          co2Noon2: that.formState.co20,
          coNoon1: that.formState.co,
          coNoon2: that.formState.co0,
          gwSdzNoon1: that.formState.gw,
          gwSdzNoon2: that.formState.gw0,
          jwSdzNoon1: that.formState.jw,
          jwSdzNoon2: that.formState.jw0,
          o2Noon1: that.formState.o2,
          o2Noon2: that.formState.o20,
          strInstallPos: that.formState.jcdd,
          timeNoon1: that.formState.time,
          timeNoon2: that.formState.time0
        }

      } else if (that.formState.bc == '晚班' && that.formState.count == '一次') {
        param = {
          id: that.formState.id,
          bxySdzNight1: that.formState.bxy,
          ch4Night1: that.formState.ch4,
          checkPersonNight: that.formState.jcy,
          co2Night1: that.formState.co2,
          coNight1: that.formState.co,
          gwSdzNight1: that.formState.gw,
          jwSdzNight1: that.formState.jw,
          o2Night1: that.formState.o2,
          strInstallPos: that.formState.jcdd,
          timeNight1: that.formState.time
        }
      } else if (that.formState.bc == '晚班' && that.formState.count == '二次') {
        param = {
          id: that.formState.id,
          bxySdzNight1: that.formState.bxy,
          bxySdzNight2: that.formState.bxy0,
          ch4Night1: that.formState.ch4,
          ch4Night2: that.formState.ch40,
          checkPersonNoon: that.formState.jcy,
          co2Night1: that.formState.co2,
          co2Night2: that.formState.co20,
          coNight1: that.formState.co,
          coNight2: that.formState.co0,
          gwSdzNight1: that.formState.gw,
          gwSdzNight2: that.formState.gw0,
          jwSdzNight1: that.formState.jw,
          jwSdzNight2: that.formState.jw0,
          o2Night1: that.formState.o2,
          o2Night2: that.formState.o20,
          strInstallPos: that.formState.jcdd,
          timeNight1: that.formState.time,
          timeNight2: that.formState.time0
        }
      }
      if (that.dialogLabel == 'add') {
        console.log('add---------------')
        new Promise((resolve, reject) => {
          api
            .getAdd({ ...param })
            .then((response) => {
              if (response.data.code == 200) {
                this.getGasList()
                this.isShowAdd = false
                this.clearData()
              } else {
                reject(response);
              }
            })
            .catch((error) => {
              console.log("catch===>response", response);
              reject(error);
            });
        });
      } else {
        console.log('edit----------------')
        new Promise((resolve, reject) => {
          api
            .getEdit({ ...param })
            .then((response) => {
              if (response.data.code == 200) {
                this.getGasList()
                this.isShowAdd = false
                this.clearData()
              } else {
                reject(response);
              }
            })
            .catch((error) => {
              console.log("catch===>response", response);
              reject(error);
            });
        });
      }

    },
    clearData() {
      this.formState = {
        bc: '',
        count: '',
        jcdd: '',
        jcy: '',
        time: '',
        time0: '',
        ch4: '',
        ch40: '',
        co2: '',
        co20: '',
        co: '',
        co0: '',
        o2: '',
        o20: '',
        jw: '',
        jw0: '',
        gw: '',
        gw0: '',
        bxy: '',
        bxy0: ''
      }
    },
    //新增取消
    getCancel() {
      this.isShowAdd = false
      this.paramCount = 1
      this.clearData()
    },
    //瓦斯编辑
    getEdit(item) {
      this.isShowAdd = true
      this.dialogLabel = 'edit'
      this.paramCount = 2
      this.formState = {
        id: item.id,
        bc: item.checkPersonEarly ? '早班' : item.checkPersonNoon ? '午班' : item.checkPersonNight ? '晚班' : '',
        count: '二次',
        jcdd: item.strInstallPos,
        jcy: item.checkPersonEarly || item.checkPersonNoon || item.checkPersonNight,
        time: item.timeEarly1 || item.timeNoon1 || item.timeNight1,
        time0: item.timeEarly2 || item.timeNoon2 || item.timeNight2,
        ch4: item.ch4Early1 || item.ch4Noon1 || item.ch4Night1,
        ch40: item.ch4Early2 || item.ch4Noon2 || item.ch4Night2,
        co2: item.co2Early1 || item.co2Noon1 || item.co2Night1,
        co20: item.co2Early2 || item.co2Noon2 || item.co2Night2,
        co: item.coEarly1 || item.coNoon1 || item.coNight1,
        co0: item.coEarly2 || item.coNoon2 || item.coNight2,
        o2: item.o2Early1 || item.o2Noon1 || item.o2Night1,
        o20: item.o2Early2 || item.o2Noon2 || item.o2Night2,
        jw: item.jwSdzEarly1 || item.jwSdzNoon1 || item.jwSdzNight1,
        jw0: item.jwSdzEarly2 || item.jwSdzNoon2 || item.jwSdzNight2,
        gw: item.gwSdzEarly1 || item.gwSdzNoon1 || item.gwSdzNight1,
        gw0: item.gwSdzEarly2 || item.gwSdzNoon2 || item.gwSdzNight2,
        bxy: item.bxySdzEarly1 || item.bxySdzNoon1 || item.bxySdzNight1,
        bxy0: item.bxySdzEarly2 || item.bxySdzNoon2 || item.bxySdzNight2
      }
    },
    //瓦斯删除
    getDel(item) {
      new Promise((resolve, reject) => {
        api
          .delGas({ id: item.id })
          .then((response) => {
            if (response.data.code == 200) {
              this.getGasList()
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取瓦斯上报列表数据
    getGasList() {
      new Promise((resolve, reject) => {
        api
          .getGas({ reportTime: this.tbTime })
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result.records
              this.gasList = data
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    }
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.gas-detail {
  position: relative;
  box-sizing: border-box;

  .devic-box-tab {
    padding: 0px 10px !important;
  }

  .gas-content {
    height: 704px;
    box-sizing: border-box;
    overflow-y: auto;

    .search-area {
      width: 100%;
      padding: 10px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: #FFF;
      margin-bottom: 2px;

      .search-l {
        width: calc(100% - 100px);
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 10px;

        .search-item {
          display: flex;
          align-items: center;

          .search-label {

            text-align: right;
          }
        }

      }

      .search-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80px;
        padding: 4px 10px;
        border-radius: 5px;
        background: #d4ecff;

        .icon-style {
          width: 14px;
          height: 14px;
        }

        .icon-text {
          font-size: 14px;
          font-weight: bold;
          color: #0eb4fc;
        }

      }
    }

    .top-area {
      width: 100%;
      padding: 0px 10px;
      background-color: #FFF;
      margin-bottom: 2px;
      box-sizing: border-box;
    }

    .bot-area {
      width: 100%;
      padding: 0px 10px;
      background-color: #FFF;
      margin-bottom: 2px;
      box-sizing: border-box;
    }

    .top-title {
      height: 28px;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top-content {
      .content-title {
        height: 26px;
        line-height: 26px;
        padding: 0px 20px;
        font-size: 12px;
        background: url('/static/warndata/title.png') no-repeat;
        background-size: 100% 100%;
      }

      .content-item-box {
        padding: 10px 0px;

        .content-item {
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
          border-radius: 10px;
          margin-bottom: 5px;

          .item-l {
            width: calc(50% - 2px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .item-c {
            width: 4px;
            height: 70%;
            border-left: 2px solid;
            border-image: linear-gradient(to bottom, transparent, rgba(140, 203, 254, 1), transparent) 1 1 1;
          }

          .item-r {
            width: calc(50% - 2px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .item-value {
      height: 20px;
      line-height: 20px;
      color: #0eb4fc;
      font-weight: bold;
    }

    .item-label {
      font-size: 12px;
    }

    .top-dialog-area,
    .center-dialog-area,
    .bottom-dialog-area {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #FFF;
      margin-bottom: 2px;
    }

    .top-gas-list {
      width: 100%;
      padding: 10px 40px;
      box-sizing: border-box;
      background-color: #FFF;
      margin-bottom: 2px;
    }

    .bot-gas-list {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #FFF;
      margin-bottom: 2px;
    }

    .dialog-btn {
      display: flex;
      width: 100%;
      padding: 8px 10px;
      box-sizing: border-box;
      background-color: #FFF;

      // margin-bottom: 2px;
      .u-button {
        margin: 0px 10px;
      }
    }

    .dialog-title {
      height: 26px;
      line-height: 26px;
      padding: 0px 20px;
      margin-bottom: 10px;
      font-size: 12px;
      background: url('/static/warndata/title.png') no-repeat;
      background-size: 100% 100%;
    }

    .dialog-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      .dialog-label {
        width: 120px;
        text-align: right;
      }
    }

    .search-box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      .dialog-label {
        width: 80px;
        text-align: right;
      }
    }

    .content-title-gas {
      position: relative;
      height: 26px;
      line-height: 26px;
      padding-left: 20px;
      font-size: 12px;
      background: url('/static/warndata/title.png') no-repeat;
      background-size: 100% 100%;
    }

    .icon-gas-edit {
      position: absolute;
      right: 35px;
      top: 0;
      cursor: pointer;
    }

    .icon-gas-del {
      position: absolute;
      right: 10px;
      top: 0;
      cursor: pointer;
    }
  }
}

::v-deep .u-input {
  padding: 2px 6px !important;
}

::v-deep .u-popup {
  flex: 0;
}
</style>