safecheck-client 3.0.35-gongyi-10 → 3.0.35-gongyi-11

package/src/filiale/wuan/android/SafecheckUserInfo.vue

@@ -1,571 +1,571 @@
-<template>
-  <div class="auto app-text">
-    <div class="panel" style="padding: 10px 10px 5px 10px;">
-      <div class="panel-body panel-self">
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户编号:</b></p>
-          <!--<a class="panel-title col-xs-7 text-left input-font" style="width: 79%;color: blue;text-decoration:underline" @click="searchHistory(userinfo.f_userinfoid)">{{ userinfo.f_userinfo_code }}</a>-->
-          <p class="panel-title col-xs-7 text-left input-font" >
-            <label @click="searchHistory(userinfo.f_userinfoid)" style="color: #00b3ee;text-decoration:none;">{{ userinfo.f_userinfo_code }}</label><label v-if="upUserinfoSta=='是'" style="color: #00b3ee;text-decoration:none;" @click="upuserinfo(userinfo.f_userinfoid)">信息变更</label>
-          </p>
-        </div>
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户名称:</b></p>
-          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_user_name }}</p>
-        </div>
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户类型:</b></p>
-          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_check_type }}
-          </p>
-        </div>
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font"  style="width: 21%;float: left"><b>用户电话:</b></p>
-          <input class="panel-title text-left input-font" style="width: 53%" value="{{ userinfo.f_user_phone2 ? userinfo.f_user_phone2 : userinfo.f_user_phone }}" v-model="userinfo.f_user_phone"/>
-
-        </div>
-<!--        <div class="col-xs-12" style="padding: 2px 0" v-if="updateuserphone&&(userinfo.planmeterss.f_aliasname=='机表')">-->
-<!--          <p class="panel-title text-left font" style="width: 23%;float: left"><b>机表表号:</b></p>-->
-<!--          <input class="panel-title text-left input-font" style="width: 53%" value="{{ userinfo.f_meter_no }}" v-model="userinfo.f_meter_no"/>-->
-
-<!--        </div>-->
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font"  style="width: 21%;float: left"><b>用户小区:</b></p>
-          <p class="panel-title text-left input-font" style="width: 79%">{{ userinfo.f_residential_area }}</p>
-        </div>
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font"  style="width: 21%;float: left"><b>用户地址:</b></p>
-          <p class="panel-title text-left input-font" style="width: 79%">{{ userinfo.f_address }}</p>
-        </div>
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>安检状态:</b></p>
-          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_state }}</p>
-        </div>
-        <div class="col-xs-12" style="padding: 2px 0">
-          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>安检单备注:</b></p>
-          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_remark }}</p>
-        </div>
-        <div class="col-xs-12" style="padding: 2px 0" v-if="userinfo.f_phone">
-          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>来电电话:</b></p>
-          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_phone }}</p>
-        </div>
-        <div class="col-xs-12">
-          <button  type="button"  style="width: 45%;float: left" class="btn btn-primary" v-if="updateuserphone"  @click="updatePhone(userinfo.f_user_phone,userinfo.f_userinfoid)">电话修改</button>
-          <button  type="button"  style="width: 45%;float: right" class="btn btn-primary" v-if="updateuserphone"  @click="showbiaoxinghao()">表型号修改</button>
-        </div>
-        <div class="col-xs-12">
-          <button  type="button"  style="width: 45%;float: left" class="btn btn-primary" v-if="updateuserphone&&(userinfo.planmeterss.f_aliasname=='机表')"  @click="updatebiaohao(userinfo.f_meter_no,userinfo.f_userinfoid)">表号修改</button>
-<!--          <button  type="button"  style="width: 45%;float: right" class="btn btn-primary" v-if="updateuserphone"  @click="showbiaoxinghao()">表型号修改</button>-->
-        </div>
-      </div>
-      <div class="panel-body">
-        <div v-show="false" class="row repair-info-content auto">
-          <div class="col-xs-12 col-sm-12 col-md-12 form-input-group">
-            <label class="control-label">
-              <nobr>到达时间：</nobr>
-            </label>
-            <span>{{f_onsite_time}}</span>
-          </div>
-          <div class="col-xs-12 col-sm-12 col-md-12 form-input-group" v-if="data.f_date_leave">
-            <label class="control-label">
-              <nobr>离开时间：</nobr>
-            </label>
-            <span>{{f_offsite_time}}</span>
-          </div>
-        </div>
-
-
-        <div class="form-group" :class="style__">
-          <span class="col-md-3 col-sm-4 col-xs-4  text-left"><img src="../../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px;text-align: left" alt="">入户状态:</span>
-          <div :class="style__" class="col-md-9 col-sm-8 col-xs-8 text-center">
-            <input type="radio" name="enterstatus" v-model="f_entry_status" id="nopeople" value="到访不遇">到访不遇
-            <input type="radio" name="enterstatus" v-model="f_entry_status" id="rejectchecck" value="拒检">拒检
-            <input type="radio" name="enterstatus" v-model="f_entry_status" id="enterhouse" value="入户">入户
-          </div>
-          <div class="form-group col-sm-12 col-xs-12" :class="style__" v-show="f_entry_status=='到访不遇'">
-            <label class="text-left font">到访不遇照片：</label>
-            <div class="auto">
-              <div class="panel" style="padding: 10px 10px 5px 10px;">
-                <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
-                  <div class="row" style="height: 240px;overflow: scroll;top: 1px">
-                    <div class="col-sm-4">
-                      <img-self :src="f_noanswer_path" alt="到访不遇照片" width="150" height="200"></img-self>
-                    </div>
-                  </div>
-                  <div class="row text-right div-photo" :class="style__">
-                    <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_noanswer_path', '到访不遇照片')">拍照</button>
-                    &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../assets/remove.png" :class="style__" @click="delfile('f_noanswer_path', this.f_noanswer_path)" style="width: 25%;"></img>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="form-group col-sm-12 col-xs-12" :class="style__" v-show="f_entry_status=='拒检'">
-            <label class="text-left font">拒检照片：</label>
-            <div class="auto">
-              <div class="panel" style="padding: 10px 10px 5px 10px;">
-                <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
-                  <div class="row" style="height: 240px;overflow: scroll;top: 1px">
-                    <div class="col-sm-4">
-                      <img-self :src="f_rejectcheck_path" alt="拒检照片" width="150" height="200"></img-self>
-                    </div>
-                  </div>
-                  <div class="row text-right div-photo">
-                    <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_rejectcheck_path', '拒检照片')">拍照</button>
-                    &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../assets/remove.png" :class="style__" @click="delfile('f_rejectcheck_path', this.f_rejectcheck_path)" style="width: 25%;"></img>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div :class="style__" class="form-group" v-show="f_usegas == '未使用'">
-          <sapn class="text-left col-md-12 col-sm-12 col-xs-12">处置方式：</sapn>
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <input type="checkbox" v-model="f_no_gas_device">无燃气具
-            <input type="checkbox" v-model="f_close_valve">关闭表前阀
-            <input type="checkbox" v-model="f_unload_battery">取下表内电池
-          </div>
-        </div>
-        <div class="auto app-text" style="margin-top: 5px;" v-if="this.$parent.$parent.role != 'view'">
-          <div class="panel" style="padding: 60px 7px 10px 0px;">
-            <div class="panel-body panel-self">
-              <div v-show="false" class="row">
-                <p class="panel-title col-xs-4 text-left font">建档时间</p>
-                <p class="panel-title col-xs-8 text-left input-font">{{ newfile_date }}</p>
-              </div>
-              <div class="row" v-if="last_check_date != null && last_check_date != ''">
-                <p class="panel-title col-xs-4 text-left font">上次安检时间</p>
-                <p class="panel-title col-xs-8 text-left input-font">{{ last_check_date }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-4 text-left font">上次安检状态</p>
-                <p class="panel-title col-xs-8 text-left input-font" v-if="last_check_date != null && last_check_date != ''">安检完成</p>
-                <p class="panel-title col-xs-8 text-left input-font" v-if="last_check_date == null || last_check_date == ''">未安检</p>
-              </div>
-              <div class="row" v-if="last_check_date != null && last_check_date != ''">
-                <p class="panel-title col-xs-4 text-left font">上次安检结果</p>
-                <p class="panel-title col-xs-8 text-left input-font" :class="last_check_result=='正常'?'':'color-red'">{{last_check_result}}</p>
-                <div v-for="data in last_check_data.data" class="panel-title col-xs-offset-4 col-xs-8 text-left input-font">
-                  <p v-for="(key,item) in data">
-                    {{key}}:{{item}}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-   <div v-if="showbModal">
-     <modal :show.sync="showbModal" v-ref:modal backdrop="false">
-       <div slot="modal-header" class="modal-header">
-         <h4 class="modal-title">
-           选择表型号
-         </h4>
-       </div>
-       <div slot="modal-body" class="modal-body">
-         <div class="col-xs-12">
-
-             <v-select :value.sync="biaoxinghao" v-model='biaoxinghao'
-                       :value-single="true"
-                       class="select_list select"
-                       :options='gmlist' placeholder='请选择表型号'
-                       close-on-select width="100%"></v-select>
-         </div>
-         <div class="col-xs-12" style="height: 10px">
-
-         </div>
-
-       </div>
-       <div slot="modal-footer" class="modal-footer">
-         <button  class="btn btn-default" @click="biaoxinghaook()">确认</button>
-         <button  class="btn btn-default" @click="biaoxinghaocancel()">取消</button>
-       </div>
-     </modal>
-   </div>
-  </div>
-</template>
-
-<script>
-import { HttpResetClass } from 'vue-client'
-import * as Util from "../../Util";
-import Vue from "vue";
-import RadioGroup from "vue-client/src/vue-strap/src/radioGroup";
-import Radio from "vue-client/src/vue-strap/src/radioBtn";
-
-export default {
-  name: "SafecheckUserInfo",
-  props: ['userinfo'],
-  data() {
-    return this.$parent.$parent.data
-  },
-  created(){
-    this.$set('showbModal',false)
-    console.log(this.showbModal)
-    this.$set('biaoxinghao','')
-  },
-  ready() {
-    console.log("77777777777777777")
-    console.log(JSON.stringify(this.userinfo.planmeterss))
-    // console.log(JSON.stringify(this.userinfo.planmeterss.f_meter_no))
-    // this.$set('userinfo.f_meter_no',this.userinfo.planmeterss.f_meter_no)
-    // console.log(JSON.stringify(this.userinfo.f_meter_no))
-    this.$set('beforephone',this.userinfo.f_user_phone)
-    this.$set('gmlist',[])
-    console.log(this.beforephone)
-    if(Vue.config.safecheck != undefined){
-      if(Vue.config.safecheck.SafecheckUserinfo != undefined){
-        if(Vue.config.safecheck.SafecheckUserinfo.updateuserphone != undefined) {
-          this.$set('updateuserphone',Vue.config.safecheck.SafecheckUserinfo.updateuserphone)
-        }
-      }
-    }
-    for (let i in this.userinfo) {
-      console.log(JSON.stringify(i) + '：' + JSON.stringify(this.userinfo[i]))
-    }
-    this.safecheckStateReady()
-  },
-  methods: {
-    updatebiaohao(f_meter_no,f_userinfo_id){
-      this.$showMessage("将用户 "+this.userinfo.f_user_name+"的机表表号从"+this.userinfo.planmeterss.f_meter_no+"修改为"+f_meter_no,['confirm', 'cancel']).then((butt)=>{
-        if(butt=="confirm"){
-          let http = new HttpResetClass()
-          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/safecheckUpdateBiaoHao`, {
-            f_meter_no:f_meter_no,
-            f_userinfo_id: f_userinfo_id
-          }, {resolveMsg: null, rejectMsg: null}).then((res) => {
-            if(res.data.code == 200){
-              this.$showMessage('修改成功！')
-            }else{
-              this.$showMessage('修改失败！,网络异常')
-            }
-          })
-        }
-      })
-    },
-    biaoxinghaook(){
-      if (this.biaoxinghao==''){
-        this.$showMessage("请选择表型号")
-        return
-      }
-      console.log("开始更新")
-      console.log(this.biaoxinghao)
-      this.$showMessage("是否确定进行修改?",['confirm', 'cancel']).then((butt)=>{
-        if(butt=="confirm"){
-          let http = new HttpResetClass()
-          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/safecheckUpdateBiaoXingHao`, {
-            biaoxinghao:this.biaoxinghao,
-            f_userinfo_id: this.userinfo.f_userinfoid
-          }, {resolveMsg: null, rejectMsg: null}).then((res) => {
-            if(res.data.code == 200){
-              this.$showMessage('修改成功！')
-              console.log("开始关闭")
-              this.showbModal=false
-            }else{
-              this.$showMessage('修改失败！,网络异常')
-            }
-          })
-        }
-      })
-
-
-    },
-    biaoxinghaocancel(){
-      console.log("开始关闭")
-      this.showbModal=false
-    },
-    showbiaoxinghao(){
-      this.gmlist=[]
-      console.log(JSON.stringify(this.userinfo.planmeterss))
-      console.log("9999999999999999999999999999999")
-      let http1 = new HttpResetClass()
-      http1.load('POST',`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: {
-          items: 'gm.id,gm.f_meter_style',
-          tablename: 't_gasbrand gb LEFT JOIN t_gasmodel gm ON gb.id= gm.f_gasbrand_id ',
-          condition: `f_meter_brand  = '${this.userinfo.planmeterss.f_aliasname}'`,
-         // condition: `f_meter_brand  = 'this.userinfo.planmeterss'`,
-          orderitem: 'gm.id'
-        }}, {resolveMsg: null, rejectMsg: null}).then((ress) => {
-         ress.data.forEach(res=>{
-           this.gmlist.push({
-             label:res.f_meter_style,
-             value:res.id
-           })
-         })
-        console.log(JSON.stringify(this.gmlist))
-        console.log("8888888888888888888888")
-        this.showbModal=true
-      })
-
-
-
-    },
-    updatePhone(f_user_phone,f_userinfo_id){
-
-      this.$showMessage("将用户 "+this.userinfo.f_user_name+"的电话号码从"+this.beforephone+"修改为"+f_user_phone,['confirm', 'cancel']).then((butt)=>{
-        if(butt=="confirm"){
-          let http = new HttpResetClass()
-          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/safecheckUpdatePhone`, {
-            f_user_phone:f_user_phone,
-            f_userinfo_id: f_userinfo_id
-          }, {resolveMsg: null, rejectMsg: null}).then((res) => {
-            if(res.data.code == 200){
-              this.$showMessage('修改成功！')
-            }else{
-              this.$showMessage('修改失败！,网络异常')
-            }
-          })
-        }
-      })
-    },
-    upuserinfo(f_userinfo_id) {
-      this.$dispatch('gotoson', {
-        _this: this.$parent.$parent,
-        title: '档案信息变更',
-        safe: false
-      })
-      this.$parent.$parent.$goto('PhoneUpUserinfo', {f_userinfo_id: f_userinfo_id,f_source:'安检'})
-    },
-    searchHistory(f_userinfo_id) {
-      this.$dispatch('gotoson', {
-        _this: this.$parent.$parent,
-        title: '购气记录',
-        safe: false
-      })
-      this.$parent.$parent.$goto('phone-sell-info', {f_userinfo_id: f_userinfo_id})
-    },
-    cameraCallBack(prop, fileName) {
-      HostApp.__this__.$set(prop, fileName + '?' + Math.random())
-      console.log('photo file name:' + HostApp.__this__.f_nongasuser_path)
-      HostApp.__callback__ = null
-      HostApp.__this__ = null
-    },
-    takePic(prop, title) {
-      HostApp.__callback__ = this.cameraCallBack
-      HostApp.__this__ = this
-      console.log('this[prop]:' + this[prop])
-      let fileName
-      if (!this[prop] || this[prop].includes("nopic.png")) {
-        fileName = Util.guid() + '-' + prop + '.jpg'
-      } else {
-        fileName = Util.getFileName(this[prop])
-      }
-      HostApp._open_a_page({
-        type: 'boomerang',
-        page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
-        param: {
-          file: fileName,
-          requestCode: 111,
-          callback: 'javascript:HostApp.__callback__("' + prop + '", "%s");',
-          watermark: title + '\t时间：' + Util.toStandardTimeString() + '\t' + Vue.user.name
-        }
-      })
-    },
-    delfile(prop, fileName) {
-      if (fileName == Vue.nopic)
-        return
-      else {
-        HostApp.delfile(fileName)
-        this[prop] = Vue.nopic
-      }
-    },
-    setEntryClass(val) {
-      if (val == '到访不遇') {
-        this.f_usegas = ''
-        this.$set('f_entry_class', 'warning')
-      } else if (val == '拒检') {
-        this.f_usegas = ''
-        this.$set('f_entry_class', 'danger')
-      } else if (val == '入户') {
-        this.$set('f_entry_class', 'success')
-      }
-    },
-    setUsegas(val) {
-      if (val == '未使用')
-        this.$set('f_useclass', 'default')
-      if (val == '已使用')
-        this.$set('f_useclass', 'success')
-    },
-    start() {
-      this.$parent.$parent.isStrat = true
-      this.$set('action', !this.action)
-      this.$set('f_onsite_time', Util.toStandardTimeString())
-    },
-    safecheckStateReady() {
-      console.log('进入paperState====>', this.$parent.$parent.showBack)
-      console.log('parent.item====>', this.$parent.$parent.item)
-      console.log('model====>', this.$parent.$parent.model)
-      if (!this.$parent.$parent.showBack) {
-        this.$parent.$parent.showBack = true
-      }
-      this.$set('last_check_date', this.$parent.$parent.item.f_plan_meters[0].f_last_check_date)
-      this.$set('newfile_date', this.$parent.$parent.item.f_plan_meters[0].f_newfile_date)
-      this.$set('upUserinfoSta', '否')
-      this.upUserinfoSta=this.$appdata.getSingleValue('安检修改档案信息')
-      if (this.$parent.$parent.item.f_plan_meters[0].f_last_check_result) {
-        let checkResult = JSON.parse(this.$parent.$parent.item.f_plan_meters[0].f_last_check_result)
-        this.$set('last_check_result', checkResult.result)
-        this.$set('last_check_data.data', checkResult.data)
-      } else {
-        this.$set('last_check_result', '')
-        this.$set('last_check_data.data', [])
-      }
-      if (this.$parent.$parent.role == 'inspect' && this.f_complete != '已完成') {
-        this.start()
-      }
-      if (this.$parent.$parent.data.f_onsite_time) {
-        console.log('已经开始安检')
-        this.$parent.$parent.startClick = true
-      }
-      this.action = true
-      console.log('this.f_onsite_time', this.f_onsite_time)
-      if (this.f_onsite_time) {
-        this.$parent.$parent.isStrat = true
-        this.$parent.$parent.data.f_onsite_time = Util.toStandardTimeString()
-      }
-      if (this.$parent.$parent.role == 'repair') {
-        this.$set('style__', 'divmask')
-        this.$set('style_view_', '')
-      } else if (this.$parent.$parent.role == 'view') {
-        this.$set('style__', 'divmask')
-        this.$set('style_view_', 'divmask')
-        console.log('set style for ....')
-      } else {
-        this.$set('style__', '')
-        this.$set('style_view_', '')
-      }
-      if (!this.f_nongasuser_path)
-        this.$set('f_nongasuser_path', '')
-      if (!this.f_noanswer_path)
-        this.$set('f_noanswer_path', '')
-      if (!this.f_rejectcheck_path)
-        this.$set('f_rejectcheck_path', '')
-
-
-      this.$watch('f_usegas', (val) => {
-        this.setUsegas(val)
-      })
-
-      this.setEntryClass(this.f_entry_status)
-      this.$watch('f_entry_status', (val) => {
-        this.setEntryClass(val)
-
-        if (val == '到访不遇') {
-          this.f_rejectcheck_path = Vue.nopic
-        }
-        if (val == '拒检') {
-          this.f_noanswer_path = Vue.nopic
-        }
-
-        if (val != '入户') {
-          //清理安检概括
-          this.f_no_gas_device = false
-          this.f_unload_battery = false
-          this.f_close_valve = false
-          //清理全局隐患
-          this.f_defect_cramped = false
-          this.f_defect_bedroom = false
-          this.f_defect_longpipe = false
-          this.f_defect_firesource = false
-          this.f_defect_explosive = false
-          this.f_defect_viacabinet = false
-          this.f_defect_intermittent = false
-          this.f_defect_nearfire = false
-          this.f_defect_openkitchen = false
-          this.f_defect_hang = false
-          this.f_cramped_path = Vue.nopic
-          //用户评价
-          this.f_client_evaluation = null
-          //清设备
-          this.$set('f_meters', [])
-          this.$set('f_plumbs', [])
-          this.$set('f_valves', [])
-          this.$set('f_inner_plumbs', [])
-          this.$set('f_alarms', [])
-          this.$set('f_cookers', [])
-          this.$set('f_heaters', [])
-          this.$set('f_furnaces', [])
-        }else{
-          this.f_rejectcheck_path = Vue.nopic
-          this.f_noanswer_path = Vue.nopic
-          this.f_novisit_reason=null
-        }
-      })
-    }
-  },
-  components: {
-    RadioGroup,
-    Radio
-  },
-}
-</script>
-
-<style scoped>
-
-.font {
-  font: 15px PingFang-SC-Medium;
-  color: #666666;
-}
-
-.input-font {
-  font: 15px PingFang-SC-Medium;
-  color: #333333;
-}
-
-.app-text {
-  font-size: 12px;
-}
-
-.panel-self {
-  border-radius: 10px;
-  border: 1px solid #499EDF;
-  background-color: #F8F8F8;
-}
-
-.app-text {
-  font-size: 12px;
-}
-
-.panel-self {
-  border-radius: 5px;
-  border: 1px solid #c5e1f7;
-  background-color: #F2F6FA;
-}
-
-.font {
-  font: 15px PingFang-SC-Medium;
-  color: #333333;
-}
-
-.panel-self {
-  border-radius: 5px;
-  border: 1px solid #c5e1f7;
-  background-color: #F2F6FA;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.font {
-  font: 15px PingFang-SC-Medium;
-  color: #333333;
-}
-
-.btn-photo {
-  border: 0;
-  border-radius: 7px;
-  background-color: #7dc1f4;
-  font: 15px PingFang-SC-Bold;
-  height: 20%;
-}
-
-.div-photo {
-  width: auto;
-  height: auto;
-  /* margin-top: 10px; */
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-}
-</style>
+<template>
+  <div class="auto app-text">
+    <div class="panel" style="padding: 10px 10px 5px 10px;">
+      <div class="panel-body panel-self">
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户编号:</b></p>
+          <!--<a class="panel-title col-xs-7 text-left input-font" style="width: 79%;color: blue;text-decoration:underline" @click="searchHistory(userinfo.f_userinfoid)">{{ userinfo.f_userinfo_code }}</a>-->
+          <p class="panel-title col-xs-7 text-left input-font" >
+            <label @click="searchHistory(userinfo.f_userinfoid)" style="color: #00b3ee;text-decoration:none;">{{ userinfo.f_userinfo_code }}</label><label v-if="upUserinfoSta=='是'" style="color: #00b3ee;text-decoration:none;" @click="upuserinfo(userinfo.f_userinfoid)">信息变更</label>
+          </p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户名称:</b></p>
+          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_user_name }}</p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户类型:</b></p>
+          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_check_type }}
+          </p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font"  style="width: 21%;float: left"><b>用户电话:</b></p>
+          <input class="panel-title text-left input-font" style="width: 53%" value="{{ userinfo.f_user_phone2 ? userinfo.f_user_phone2 : userinfo.f_user_phone }}" v-model="userinfo.f_user_phone"/>
+
+        </div>
+<!--        <div class="col-xs-12" style="padding: 2px 0" v-if="updateuserphone&&(userinfo.planmeterss.f_aliasname=='机表')">-->
+<!--          <p class="panel-title text-left font" style="width: 23%;float: left"><b>机表表号:</b></p>-->
+<!--          <input class="panel-title text-left input-font" style="width: 53%" value="{{ userinfo.f_meter_no }}" v-model="userinfo.f_meter_no"/>-->
+
+<!--        </div>-->
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font"  style="width: 21%;float: left"><b>用户小区:</b></p>
+          <p class="panel-title text-left input-font" style="width: 79%">{{ userinfo.f_residential_area }}</p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font"  style="width: 21%;float: left"><b>用户地址:</b></p>
+          <p class="panel-title text-left input-font" style="width: 79%">{{ userinfo.f_address }}</p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>安检状态:</b></p>
+          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_state }}</p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>安检单备注:</b></p>
+          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_remark }}</p>
+        </div>
+        <div class="col-xs-12" style="padding: 2px 0" v-if="userinfo.f_phone">
+          <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>来电电话:</b></p>
+          <p class="panel-title col-xs-7 text-left input-font">{{ userinfo.f_phone }}</p>
+        </div>
+        <div class="col-xs-12">
+          <button  type="button"  style="width: 45%;float: left" class="btn btn-primary" v-if="updateuserphone"  @click="updatePhone(userinfo.f_user_phone,userinfo.f_userinfoid)">电话修改</button>
+          <button  type="button"  style="width: 45%;float: right" class="btn btn-primary" v-if="updateuserphone"  @click="showbiaoxinghao()">表型号修改</button>
+        </div>
+        <div class="col-xs-12">
+          <button  type="button"  style="width: 45%;float: left" class="btn btn-primary" v-if="updateuserphone&&(userinfo.planmeterss.f_aliasname=='机表')"  @click="updatebiaohao(userinfo.f_meter_no,userinfo.f_userinfoid)">表号修改</button>
+<!--          <button  type="button"  style="width: 45%;float: right" class="btn btn-primary" v-if="updateuserphone"  @click="showbiaoxinghao()">表型号修改</button>-->
+        </div>
+      </div>
+      <div class="panel-body">
+        <div v-show="false" class="row repair-info-content auto">
+          <div class="col-xs-12 col-sm-12 col-md-12 form-input-group">
+            <label class="control-label">
+              <nobr>到达时间：</nobr>
+            </label>
+            <span>{{f_onsite_time}}</span>
+          </div>
+          <div class="col-xs-12 col-sm-12 col-md-12 form-input-group" v-if="data.f_date_leave">
+            <label class="control-label">
+              <nobr>离开时间：</nobr>
+            </label>
+            <span>{{f_offsite_time}}</span>
+          </div>
+        </div>
+
+
+        <div class="form-group" :class="style__">
+          <span class="col-md-3 col-sm-4 col-xs-4  text-left"><img src="../../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px;text-align: left" alt="">入户状态:</span>
+          <div :class="style__" class="col-md-9 col-sm-8 col-xs-8 text-center">
+            <input type="radio" name="enterstatus" v-model="f_entry_status" id="nopeople" value="到访不遇">到访不遇
+            <input type="radio" name="enterstatus" v-model="f_entry_status" id="rejectchecck" value="拒检">拒检
+            <input type="radio" name="enterstatus" v-model="f_entry_status" id="enterhouse" value="入户">入户
+          </div>
+          <div class="form-group col-sm-12 col-xs-12" :class="style__" v-show="f_entry_status=='到访不遇'">
+            <label class="text-left font">到访不遇照片：</label>
+            <div class="auto">
+              <div class="panel" style="padding: 10px 10px 5px 10px;">
+                <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
+                  <div class="row" style="height: 240px;overflow: scroll;top: 1px">
+                    <div class="col-sm-4">
+                      <img-self :src="f_noanswer_path" alt="到访不遇照片" width="150" height="200"></img-self>
+                    </div>
+                  </div>
+                  <div class="row text-right div-photo" :class="style__">
+                    <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_noanswer_path', '到访不遇照片')">拍照</button>
+                    &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../assets/remove.png" :class="style__" @click="delfile('f_noanswer_path', this.f_noanswer_path)" style="width: 25%;"></img>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-sm-12 col-xs-12" :class="style__" v-show="f_entry_status=='拒检'">
+            <label class="text-left font">拒检照片：</label>
+            <div class="auto">
+              <div class="panel" style="padding: 10px 10px 5px 10px;">
+                <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
+                  <div class="row" style="height: 240px;overflow: scroll;top: 1px">
+                    <div class="col-sm-4">
+                      <img-self :src="f_rejectcheck_path" alt="拒检照片" width="150" height="200"></img-self>
+                    </div>
+                  </div>
+                  <div class="row text-right div-photo">
+                    <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_rejectcheck_path', '拒检照片')">拍照</button>
+                    &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../assets/remove.png" :class="style__" @click="delfile('f_rejectcheck_path', this.f_rejectcheck_path)" style="width: 25%;"></img>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div :class="style__" class="form-group" v-show="f_usegas == '未使用'">
+          <sapn class="text-left col-md-12 col-sm-12 col-xs-12">处置方式：</sapn>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <input type="checkbox" v-model="f_no_gas_device">无燃气具
+            <input type="checkbox" v-model="f_close_valve">关闭表前阀
+            <input type="checkbox" v-model="f_unload_battery">取下表内电池
+          </div>
+        </div>
+        <div class="auto app-text" style="margin-top: 5px;" v-if="this.$parent.$parent.role != 'view'">
+          <div class="panel" style="padding: 60px 7px 10px 0px;">
+            <div class="panel-body panel-self">
+              <div v-show="false" class="row">
+                <p class="panel-title col-xs-4 text-left font">建档时间</p>
+                <p class="panel-title col-xs-8 text-left input-font">{{ newfile_date }}</p>
+              </div>
+              <div class="row" v-if="last_check_date != null && last_check_date != ''">
+                <p class="panel-title col-xs-4 text-left font">上次安检时间</p>
+                <p class="panel-title col-xs-8 text-left input-font">{{ last_check_date }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-4 text-left font">上次安检状态</p>
+                <p class="panel-title col-xs-8 text-left input-font" v-if="last_check_date != null && last_check_date != ''">安检完成</p>
+                <p class="panel-title col-xs-8 text-left input-font" v-if="last_check_date == null || last_check_date == ''">未安检</p>
+              </div>
+              <div class="row" v-if="last_check_date != null && last_check_date != ''">
+                <p class="panel-title col-xs-4 text-left font">上次安检结果</p>
+                <p class="panel-title col-xs-8 text-left input-font" :class="last_check_result=='正常'?'':'color-red'">{{last_check_result}}</p>
+                <div v-for="data in last_check_data.data" class="panel-title col-xs-offset-4 col-xs-8 text-left input-font">
+                  <p v-for="(key,item) in data">
+                    {{key}}:{{item}}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+   <div v-if="showbModal">
+     <modal :show.sync="showbModal" v-ref:modal backdrop="false">
+       <div slot="modal-header" class="modal-header">
+         <h4 class="modal-title">
+           选择表型号
+         </h4>
+       </div>
+       <div slot="modal-body" class="modal-body">
+         <div class="col-xs-12">
+
+             <v-select :value.sync="biaoxinghao" v-model='biaoxinghao'
+                       :value-single="true"
+                       class="select_list select"
+                       :options='gmlist' placeholder='请选择表型号'
+                       close-on-select width="100%"></v-select>
+         </div>
+         <div class="col-xs-12" style="height: 10px">
+
+         </div>
+
+       </div>
+       <div slot="modal-footer" class="modal-footer">
+         <button  class="btn btn-default" @click="biaoxinghaook()">确认</button>
+         <button  class="btn btn-default" @click="biaoxinghaocancel()">取消</button>
+       </div>
+     </modal>
+   </div>
+  </div>
+</template>
+
+<script>
+import { HttpResetClass } from 'vue-client'
+import * as Util from "../../Util";
+import Vue from "vue";
+import RadioGroup from "vue-client/src/vue-strap/src/radioGroup";
+import Radio from "vue-client/src/vue-strap/src/radioBtn";
+
+export default {
+  name: "SafecheckUserInfo",
+  props: ['userinfo'],
+  data() {
+    return this.$parent.$parent.data
+  },
+  created(){
+    this.$set('showbModal',false)
+    console.log(this.showbModal)
+    this.$set('biaoxinghao','')
+  },
+  ready() {
+    console.log("77777777777777777")
+    console.log(JSON.stringify(this.userinfo.planmeterss))
+    // console.log(JSON.stringify(this.userinfo.planmeterss.f_meter_no))
+    // this.$set('userinfo.f_meter_no',this.userinfo.planmeterss.f_meter_no)
+    // console.log(JSON.stringify(this.userinfo.f_meter_no))
+    this.$set('beforephone',this.userinfo.f_user_phone)
+    this.$set('gmlist',[])
+    console.log(this.beforephone)
+    if(Vue.config.safecheck != undefined){
+      if(Vue.config.safecheck.SafecheckUserinfo != undefined){
+        if(Vue.config.safecheck.SafecheckUserinfo.updateuserphone != undefined) {
+          this.$set('updateuserphone',Vue.config.safecheck.SafecheckUserinfo.updateuserphone)
+        }
+      }
+    }
+    for (let i in this.userinfo) {
+      console.log(JSON.stringify(i) + '：' + JSON.stringify(this.userinfo[i]))
+    }
+    this.safecheckStateReady()
+  },
+  methods: {
+    updatebiaohao(f_meter_no,f_userinfo_id){
+      this.$showMessage("将用户 "+this.userinfo.f_user_name+"的机表表号从"+this.userinfo.planmeterss.f_meter_no+"修改为"+f_meter_no,['confirm', 'cancel']).then((butt)=>{
+        if(butt=="confirm"){
+          let http = new HttpResetClass()
+          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/safecheckUpdateBiaoHao`, {
+            f_meter_no:f_meter_no,
+            f_userinfo_id: f_userinfo_id
+          }, {resolveMsg: null, rejectMsg: null}).then((res) => {
+            if(res.data.code == 200){
+              this.$showMessage('修改成功！')
+            }else{
+              this.$showMessage('修改失败！,网络异常')
+            }
+          })
+        }
+      })
+    },
+    biaoxinghaook(){
+      if (this.biaoxinghao==''){
+        this.$showMessage("请选择表型号")
+        return
+      }
+      console.log("开始更新")
+      console.log(this.biaoxinghao)
+      this.$showMessage("是否确定进行修改?",['confirm', 'cancel']).then((butt)=>{
+        if(butt=="confirm"){
+          let http = new HttpResetClass()
+          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/safecheckUpdateBiaoXingHao`, {
+            biaoxinghao:this.biaoxinghao,
+            f_userinfo_id: this.userinfo.f_userinfoid
+          }, {resolveMsg: null, rejectMsg: null}).then((res) => {
+            if(res.data.code == 200){
+              this.$showMessage('修改成功！')
+              console.log("开始关闭")
+              this.showbModal=false
+            }else{
+              this.$showMessage('修改失败！,网络异常')
+            }
+          })
+        }
+      })
+
+
+    },
+    biaoxinghaocancel(){
+      console.log("开始关闭")
+      this.showbModal=false
+    },
+    showbiaoxinghao(){
+      this.gmlist=[]
+      console.log(JSON.stringify(this.userinfo.planmeterss))
+      console.log("9999999999999999999999999999999")
+      let http1 = new HttpResetClass()
+      http1.load('POST',`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: {
+          items: 'gm.id,gm.f_meter_style',
+          tablename: 't_gasbrand gb LEFT JOIN t_gasmodel gm ON gb.id= gm.f_gasbrand_id ',
+          condition: `f_meter_brand  = '${this.userinfo.planmeterss.f_aliasname}'`,
+         // condition: `f_meter_brand  = 'this.userinfo.planmeterss'`,
+          orderitem: 'gm.id'
+        }}, {resolveMsg: null, rejectMsg: null}).then((ress) => {
+         ress.data.forEach(res=>{
+           this.gmlist.push({
+             label:res.f_meter_style,
+             value:res.id
+           })
+         })
+        console.log(JSON.stringify(this.gmlist))
+        console.log("8888888888888888888888")
+        this.showbModal=true
+      })
+
+
+
+    },
+    updatePhone(f_user_phone,f_userinfo_id){
+
+      this.$showMessage("将用户 "+this.userinfo.f_user_name+"的电话号码从"+this.beforephone+"修改为"+f_user_phone,['confirm', 'cancel']).then((butt)=>{
+        if(butt=="confirm"){
+          let http = new HttpResetClass()
+          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/safecheckUpdatePhone`, {
+            f_user_phone:f_user_phone,
+            f_userinfo_id: f_userinfo_id
+          }, {resolveMsg: null, rejectMsg: null}).then((res) => {
+            if(res.data.code == 200){
+              this.$showMessage('修改成功！')
+            }else{
+              this.$showMessage('修改失败！,网络异常')
+            }
+          })
+        }
+      })
+    },
+    upuserinfo(f_userinfo_id) {
+      this.$dispatch('gotoson', {
+        _this: this.$parent.$parent,
+        title: '档案信息变更',
+        safe: false
+      })
+      this.$parent.$parent.$goto('PhoneUpUserinfo', {f_userinfo_id: f_userinfo_id,f_source:'安检'})
+    },
+    searchHistory(f_userinfo_id) {
+      this.$dispatch('gotoson', {
+        _this: this.$parent.$parent,
+        title: '购气记录',
+        safe: false
+      })
+      this.$parent.$parent.$goto('phone-sell-info', {f_userinfo_id: f_userinfo_id})
+    },
+    cameraCallBack(prop, fileName) {
+      HostApp.__this__.$set(prop, fileName + '?' + Math.random())
+      console.log('photo file name:' + HostApp.__this__.f_nongasuser_path)
+      HostApp.__callback__ = null
+      HostApp.__this__ = null
+    },
+    takePic(prop, title) {
+      HostApp.__callback__ = this.cameraCallBack
+      HostApp.__this__ = this
+      console.log('this[prop]:' + this[prop])
+      let fileName
+      if (!this[prop] || this[prop].includes("nopic.png")) {
+        fileName = Util.guid() + '-' + prop + '.jpg'
+      } else {
+        fileName = Util.getFileName(this[prop])
+      }
+      HostApp._open_a_page({
+        type: 'boomerang',
+        page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
+        param: {
+          file: fileName,
+          requestCode: 111,
+          callback: 'javascript:HostApp.__callback__("' + prop + '", "%s");',
+          watermark: title + '\t时间：' + Util.toStandardTimeString() + '\t' + Vue.user.name
+        }
+      })
+    },
+    delfile(prop, fileName) {
+      if (fileName == Vue.nopic)
+        return
+      else {
+        HostApp.delfile(fileName)
+        this[prop] = Vue.nopic
+      }
+    },
+    setEntryClass(val) {
+      if (val == '到访不遇') {
+        this.f_usegas = ''
+        this.$set('f_entry_class', 'warning')
+      } else if (val == '拒检') {
+        this.f_usegas = ''
+        this.$set('f_entry_class', 'danger')
+      } else if (val == '入户') {
+        this.$set('f_entry_class', 'success')
+      }
+    },
+    setUsegas(val) {
+      if (val == '未使用')
+        this.$set('f_useclass', 'default')
+      if (val == '已使用')
+        this.$set('f_useclass', 'success')
+    },
+    start() {
+      this.$parent.$parent.isStrat = true
+      this.$set('action', !this.action)
+      this.$set('f_onsite_time', Util.toStandardTimeString())
+    },
+    safecheckStateReady() {
+      console.log('进入paperState====>', this.$parent.$parent.showBack)
+      console.log('parent.item====>', this.$parent.$parent.item)
+      console.log('model====>', this.$parent.$parent.model)
+      if (!this.$parent.$parent.showBack) {
+        this.$parent.$parent.showBack = true
+      }
+      this.$set('last_check_date', this.$parent.$parent.item.f_plan_meters[0].f_last_check_date)
+      this.$set('newfile_date', this.$parent.$parent.item.f_plan_meters[0].f_newfile_date)
+      this.$set('upUserinfoSta', '否')
+      this.upUserinfoSta=this.$appdata.getSingleValue('安检修改档案信息')
+      if (this.$parent.$parent.item.f_plan_meters[0].f_last_check_result) {
+        let checkResult = JSON.parse(this.$parent.$parent.item.f_plan_meters[0].f_last_check_result)
+        this.$set('last_check_result', checkResult.result)
+        this.$set('last_check_data.data', checkResult.data)
+      } else {
+        this.$set('last_check_result', '')
+        this.$set('last_check_data.data', [])
+      }
+      if (this.$parent.$parent.role == 'inspect' && this.f_complete != '已完成') {
+        this.start()
+      }
+      if (this.$parent.$parent.data.f_onsite_time) {
+        console.log('已经开始安检')
+        this.$parent.$parent.startClick = true
+      }
+      this.action = true
+      console.log('this.f_onsite_time', this.f_onsite_time)
+      if (this.f_onsite_time) {
+        this.$parent.$parent.isStrat = true
+        this.$parent.$parent.data.f_onsite_time = Util.toStandardTimeString()
+      }
+      if (this.$parent.$parent.role == 'repair') {
+        this.$set('style__', 'divmask')
+        this.$set('style_view_', '')
+      } else if (this.$parent.$parent.role == 'view') {
+        this.$set('style__', 'divmask')
+        this.$set('style_view_', 'divmask')
+        console.log('set style for ....')
+      } else {
+        this.$set('style__', '')
+        this.$set('style_view_', '')
+      }
+      if (!this.f_nongasuser_path)
+        this.$set('f_nongasuser_path', '')
+      if (!this.f_noanswer_path)
+        this.$set('f_noanswer_path', '')
+      if (!this.f_rejectcheck_path)
+        this.$set('f_rejectcheck_path', '')
+
+
+      this.$watch('f_usegas', (val) => {
+        this.setUsegas(val)
+      })
+
+      this.setEntryClass(this.f_entry_status)
+      this.$watch('f_entry_status', (val) => {
+        this.setEntryClass(val)
+
+        if (val == '到访不遇') {
+          this.f_rejectcheck_path = Vue.nopic
+        }
+        if (val == '拒检') {
+          this.f_noanswer_path = Vue.nopic
+        }
+
+        if (val != '入户') {
+          //清理安检概括
+          this.f_no_gas_device = false
+          this.f_unload_battery = false
+          this.f_close_valve = false
+          //清理全局隐患
+          this.f_defect_cramped = false
+          this.f_defect_bedroom = false
+          this.f_defect_longpipe = false
+          this.f_defect_firesource = false
+          this.f_defect_explosive = false
+          this.f_defect_viacabinet = false
+          this.f_defect_intermittent = false
+          this.f_defect_nearfire = false
+          this.f_defect_openkitchen = false
+          this.f_defect_hang = false
+          this.f_cramped_path = Vue.nopic
+          //用户评价
+          this.f_client_evaluation = null
+          //清设备
+          this.$set('f_meters', [])
+          this.$set('f_plumbs', [])
+          this.$set('f_valves', [])
+          this.$set('f_inner_plumbs', [])
+          this.$set('f_alarms', [])
+          this.$set('f_cookers', [])
+          this.$set('f_heaters', [])
+          this.$set('f_furnaces', [])
+        }else{
+          this.f_rejectcheck_path = Vue.nopic
+          this.f_noanswer_path = Vue.nopic
+          this.f_novisit_reason=null
+        }
+      })
+    }
+  },
+  components: {
+    RadioGroup,
+    Radio
+  },
+}
+</script>
+
+<style scoped>
+
+.font {
+  font: 15px PingFang-SC-Medium;
+  color: #666666;
+}
+
+.input-font {
+  font: 15px PingFang-SC-Medium;
+  color: #333333;
+}
+
+.app-text {
+  font-size: 12px;
+}
+
+.panel-self {
+  border-radius: 10px;
+  border: 1px solid #499EDF;
+  background-color: #F8F8F8;
+}
+
+.app-text {
+  font-size: 12px;
+}
+
+.panel-self {
+  border-radius: 5px;
+  border: 1px solid #c5e1f7;
+  background-color: #F2F6FA;
+}
+
+.font {
+  font: 15px PingFang-SC-Medium;
+  color: #333333;
+}
+
+.panel-self {
+  border-radius: 5px;
+  border: 1px solid #c5e1f7;
+  background-color: #F2F6FA;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.font {
+  font: 15px PingFang-SC-Medium;
+  color: #333333;
+}
+
+.btn-photo {
+  border: 0;
+  border-radius: 7px;
+  background-color: #7dc1f4;
+  font: 15px PingFang-SC-Bold;
+  height: 20%;
+}
+
+.div-photo {
+  width: auto;
+  height: auto;
+  /* margin-top: 10px; */
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+</style>