deviceinfodetail.vue<template >
  <div class="auto" style="overflow-y: scroll;">
    <div class="row">
      <div style="float: left">
        <label class="font_normal_body">基本信息</label>
      </div>
      <div class="span" style="float: right;">
        <button class="button_search " @click="cancelmain()" >返回</button>
      </div>
    </div>
    <div class="panel panel-primary datapanel">
      <!--    第一行数据-->
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">客户编号</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_userinfo_code}}</p>
          </div>
          <label class="col-sm-3 control-label">客户姓名</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_name}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">客户地址</label>
          <div class="col-sm-9">
            <p class="form-control-static">{{row.f_address}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">用户状态</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_state}}</p>
          </div>
          <label class="col-sm-3 control-label">客户电话</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_phone}}</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label">证件类型</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_credentials}}</p>
          </div>

          <label class="col-sm-3 control-label">证件号码</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_idnumber}}</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label">客户类型</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_type}}</p>
          </div>

          <label class="col-sm-3 control-label">用气性质</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_gasproperties}}</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label">用户状态</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_state}}</p>
          </div>

          <label class="col-sm-3 control-label">账户余额</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_balance}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">人&ensp;口&ensp;数</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_people_num}}</p>
          </div>
          <label class="col-sm-3 control-label">备用电话</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_rent_phone}}</p>
          </div>
        </div>
      </form>
    </div>
    <div class="row">
      <div  style="float: left">
        <label class="font_normal_body">表具信息</label>
      </div>
    </div>
    <div class="panel panel-primary datapanel">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">表号</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meternumber}}</p>
          </div>

          <label class="col-sm-3 control-label">气表状态</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_table_state}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">气表读数</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meter_base}}</p>
          </div>
          <label class="col-sm-3 control-label">初始底数</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_initial_base}}</p>
          </div>

        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">气表品牌</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meter_brand}}</p>
          </div>

          <label class="col-sm-3 control-label">气表型号</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meter_style}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">气表类型</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meter_type}}</p>
          </div>

          <label class="col-sm-3 control-label">气价名称</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_price_name}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">气价类型</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_price_type}}</p>
          </div>

          <label class="col-sm-3 control-label">价格详情</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_detailprice}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">左&ensp;右&ensp;表</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_aroundmeter}}</p>
          </div>
          <label class="col-sm-3 control-label" title="最后上报时间">上报时间</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meteread_date ? row.f_meteread_date : "暂无"}}</p>
          </div>
        </div>
        <div v-if="row.f_collection_type == '按金额'" class="form-group">
            <label class="col-sm-3 control-label">累购金额</label>
            <div class="col-sm-3">
              <p class="form-control-static">{{row.f_total_fee}}</p>
            </div>
        </div>
        <div v-if="row.f_collection_type == '按气量'" class="form-group">
          <label class="col-sm-3 control-label">累购气量</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_total_gas}}</p>
          </div>
          <label class="col-sm-3 control-label">最后结算时间</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_hand_date  ? row.f_hand_date : "暂无"}}</p>
          </div>
        </div>
        <div v-if="row.f_meter_type.includes('物联网表')">
          <div class="form-group" >
              <label class="col-sm-3 control-label">表剩余金额</label>
              <div class="col-sm-3">
                <p class="form-control-static">{{row.f_balance_amount}}</p>
              </div>
              <label class="col-sm-3 control-label">阀门状态</label>
              <div class="col-sm-3">
                <p class="form-control-static">
                  {{row.f_valvestate === '0'  ? '已开阀' : '已关阀'}}
                  <button class="btn btn-link" type="button" style="margin-left: 20%" @click="valvecontrol">{{row.f_valvestate === '0'  ? '关阀' : '开阀'}}</button>
                </p>
              </div>
          </div>
          <div class="form-group" >
            <label class="col-sm-3 control-label">累计上报次数</label>
            <div class="col-sm-3">
              <p class="form-control-static">{{row.f_meteread_number ? row.f_meteread_number : 0}}</p>
            </div>
            <label class="col-sm-3 control-label">是否自动阀控</label>
            <div class="col-sm-3">
              <p class="form-control-static">
                {{row.f_network_valve == null ? '否' : '是'}}
                <button class="btn btn-link" type="button" style="margin-left: 20%" @click="zdfk">{{row.f_network_valve == null ? '开启' : '关闭'}}</button>
              </p>
            </div>
          </div>
        </div>
          <div v-if="row.f_collection_type == '按气量'"  class="form-group">
            <label class="col-sm-3 control-label">表剩余气量</label>
            <div class="col-sm-3">
              <p class="form-control-static">{{row.f_balance_gas}}</p>
            </div>
            <label class="col-sm-3 control-label">累计用气金额</label>
            <div class="col-sm-3">
              <p class="form-control-static">{{row.f_total_usegas_amount}}</p>
            </div>
          </div>
      </form>
    </div>
    <div  v-if="devices.length > 0" style="height: auto" >
      <div class="row">
        <div   style="float: left">
          <label class="font_normal_body" >设备信息</label>
        </div>
      </div>
      <div v-for="device in devices" class="panel panel-primary datapanel">

        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label">设备类型</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_devices_type}}</p>
            </div>

            <label class="col-sm-2 control-label">设备品牌</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_brand}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">设备型号</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_devices_model}}</p>
            </div>

            <label class="col-sm-2 control-label">设备数量</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_devices_num}}</p>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">设备编号</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_devices_no}}</p>
            </div>

            <label class="col-sm-2 control-label">安装人</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_input_person}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">安装日期</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_input_date}}</p>
            </div>

            <label class="col-sm-2 control-label">生产日期</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_make_date}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">到期日期</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_expire_date}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">管道类型</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_pipe_type}}</p>
            </div>

            <label class="col-sm-2 control-label">安装日期</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_pipeinstall_date}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">到期日期</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_pipeexpire_date}}</p>
            </div>

            <label class="col-sm-2 control-label">钢管连接</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_pipe_connection}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">备&emsp;&emsp;注</label>
            <div class="col-sm-10">
              <p class="form-control-static">{{device.comments}}</p>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!--阀控管理弹框-->
  <modal :show.sync="valve" >
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="close()"><span>&times;</span></button>
      <h4 class="modal-title" align="center">阀控管理</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="form-group " style="padding-left: 8px">
        <label  class="font_normal_body" >操作原因</label>

        <textarea class="form-control" v-model="operateReason" rows="3" placeholder="请填写操作原因"></textarea>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button  type="button" class="button_search btn-ln fr" v-show="row.f_valvestate != 0 " @click='valveoperate(true)'>开阀</button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button  type="button" class="btn btn-info btn-ln fr" v-show="row.f_valvestate == 0" @click='valveoperate(false)'>关阀</button>
    </footer>
  </modal>
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'
  export default {
    title: '基本信息',
    props: ['row'],
    data () {
      return {
        devices: [],
        valveLimit: false,
        // 开关阀操作原因
        operateReason: '',
        valve: false
      }
    },

    ready () {
      this.getDevice()
      this.valveLimit = this.$login.r.includes('开关阀权限')
    },
    methods: {

      // 发送请求去数据
      async getDevice () {
        if (this.row) {
          let http = new HttpResetClass()
          let condition = `f_userinfo_id = '${this.row.f_userinfo_id}'`
          let getDevices = await http.load('POST', 'rs/sql/sale_GetDevicesInfo', {data: {condition: condition}}, {rejectMsg: '获取设备信息出错！！', resolveMsg: null})
          this.devices = getDevices.data
        }
      },

      // 返回
      cancelmain () {
        this.$emit('cancel-main')
      },
      // 阀控管理
      zdfk () {
        let data = {
          f_userfiles_id: this.row.f_userfiles_id
        }
        if (this.row.f_network_valve == null) {
          this.$resetpost('rs/logic/openzdfk', data, {resolveMsg: '开启自动阀控成功。', rejectMsg: '开启自动阀控失败!!!'})
        } else {
          this.$resetpost('rs/logic/closezdfk', data, {resolveMsg: '关闭自动阀控成功。', rejectMsg: '关闭自动阀控失败!!!'})
        }
      },
      // 阀控管理
      valvecontrol () {
        if (this.$login.r.includes('开关阀')) {
          this.valve = true
        } else {
          this.$showAlert('您没有开关阀权限,请联系管理员！！', 'warning', 3000)
        }
      },
      close () {
        this.valve = false
        this.operateReason = ''
      },
      // 开关阀操作
      async valveoperate (oper) {
        let msg = oper ? '开阀' : '关阀'
        let datas = {
          instructType: '阀门控制',
          instructTitle: `手动${msg}`,
          condition: `t_userfiles.f_userfiles_id='${this.row.f_userfiles_id}'`,
          meterBrandName: this.row.f_alias,
          f_instruct_state: '待发送',
          inputtor: Vue.$login.f.name,
          reasonInfo: this.operateReason,
          meternumberf: this.row.f_meternumber,
          contentData: {isOpen: oper ? 1 : 0}
        }
        let _this = this
        await this.$resetpost('rs/sql/iot_searchInstruct', {data: datas},
          {warnMsg: null, resolveMsg: null}).then(res => {
            if (res.data.length === 0) {
              _this.$resetpost('rs/logic/iot_saveInstruct', {data: datas},
                {warnMsg: `确定要进行${msg}操作吗？`, resolveMsg: `${msg}成功`, rejectMsg: `${msg}失败`}).then(res => {
                  _this.valve = false
                  _this.operateReason = ''
                })
            } else {
              this.$showAlert('存在开关阀待发送的指令，系统不生成同样的待发送指令', 'warning', 3000)
              _this.valve = false
              _this.operateReason = ''
            }
          })
      }
    },
    watch: {
      'row' () {
        this.getDevice()
      }
    }
  }
</script>
<style scoped>
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 30px 10px 30px;
    height: auto;
    border-radius:15px;
  }
</style>