sbxj.vue设备巡检

<template>
  <div style="background-color: rgb(241, 241, 241);height: 110%">
    <div style="height: 100%;overflow: auto">
    <mt-header title="">
      <router-link to="/sbxjrw" slot="left">
        <mt-button icon="back">提交巡检结果</mt-button>
      </router-link>
    </mt-header>
    <div style="border-radius: 10px;margin: 10px;overflow: hidden;background-color: rgb(255,255,255)">
      <mt-cell title="设备编号" :value="baseDevice.charCode" style="text-align: left"></mt-cell>
      <mt-cell title="设备名称" :value="baseDevice.charName" style="text-align: left"></mt-cell>
      <mt-cell title="设备类型" :value="baseDevice.charDevName" style="text-align: left"></mt-cell>
      <mt-cell title="所属建筑" :value="baseDevice.charAddress" style="text-align: left"></mt-cell>
      <mt-cell title="位置描述" :value="baseDevice.charLocation" style="text-align: left"></mt-cell>
      <mt-cell title="巡检地点" :value="'经度:'+dw.longitude+'纬度:'+dw.latitude" style="text-align: left"></mt-cell>
    </div>
    <div style="border-radius: 10px;margin: 10px;overflow: hidden;background-color: rgb(255,255,255)">
      <div style="display: flex;justify-content: space-between;padding: 10px;border-bottom: 1px solid rgb(241,241,241)">
        <div style="flex-grow:25;text-align: left">检查项</div>
        <div style="display: flex;justify-content: space-between;flex-grow:1">
          <div style="color: #1aad19">正常</div>
          <div style="color: red">异常</div>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;padding: 10px;" v-for="(n,i) in 5" :key="i">
        <div style="flex-grow:5;text-align: left">
          压力表指针是否在绿区
        </div>
        <div style="display: flex;justify-content: space-between;flex-grow:1">
          <div style="">
          <!--<input type="radio" name="a" value="1" checked>-->
            <input :name="i" value="Item 1" type="radio" class="tui-checkbox tui-checkbox1 ">
          </div>
          <div style="">
            <input :name="i" value="Item 1" type="radio" class="tui-checkbox tui-checkbox2 ">
          <!--<input type="radio" name="a" value="0">-->
          </div>
        </div>
      </div>
      <mt-field label="表盘值" placeholder="最多输入20个字符" v-model="username" style="text-align: left" :attr="{ maxlength: 20 }"></mt-field>
    </div>
    <div style="border-radius: 10px;margin: 10px;overflow: hidden;background-color: rgb(255,255,255)">
      <div style="display: flex;justify-content: space-between;padding: 10px;border-bottom: 1px solid rgb(241,241,241)">
        <div style="flex-grow:25;text-align: left">测点</div>
      </div>
      <mt-field label="A相电压" placeholder="3.5" v-model="username" style="text-align: left;"  type="number" ></mt-field>
      <mt-field label="B相电压" placeholder="3.5" v-model="username" style="text-align: left;"  type="number" ></mt-field>
    </div>
    <div style="border-radius: 10px;margin: 10px;overflow: hidden;background-color: rgb(255,255,255)">
      <div style="display: flex;justify-content: space-between;padding: 10px;border-bottom: 1px solid rgb(241,241,241)">
        <div style="flex-grow:25;text-align: left">问题描述</div>
      </div>
      <mt-field placeholder="这里用文本描述问题" v-model="username" rows="4" style="text-align: left;"  type="textarea" ></mt-field>
      <div style="text-align: left;border: 1px solid rgb(241,241,241);margin: 5px auto;">
        <div>上传图片</div>
        <div style="display: flex">
          <div>
          <img src="../assets/imgs/web-icon-.png" alt="" width="50" height="50">
          </div>
          <div>
            <img src="../assets/imgs/web-icon-.png" alt="" width="50" height="50">
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between;margin: 10px;">
        <div style="flex: 1">
        <input name="jg" value="Item 1" type="radio" class="tui-checkbox tui-checkbox3 ">当场处理
        </div>
        <div style="flex: 2;">
        <input name="jg" value="Item 2" type="radio" class="tui-checkbox tui-checkbox3 ">上报维修
        </div>
      </div>
    </div>
    <div style="margin: 20px;overflow: hidden;display: flex;justify-content: space-around">
      <mt-button type="danger" style="width: 40%;border-radius: 20px;">跳过</mt-button>
      <mt-button type="primary" style="width: 40%;border-radius: 20px;">提交</mt-button>
    </div>
    </div>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui'
  import * as dd from 'dingtalk-jsapi';
  export default {
    name: 'page-field',
    mounted(){
      /*this.$store.commit('SET_SHOWTABBAR', false);
      alert(this.$store.getters.ifshowtabbar)*/
      this.getDeviceDetail(this.$route.params.id);
      this.getAccessToken();
    },
    data () {
      return {
        baseDevice:{},
        username:'',
        _confing:{},
        dw:{},
        options:[
          {
            label: '',
            value: '值A'
          },
          {
            label: '',
            value: '值B'
          }],
        jcx:"",
        loginForm:{
          username:'',
          password:'loginByWorkNo'
        },
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    },
    methods: {
      async getAccessToken(){
        let _this = this;
        //鉴权
        await  _this.getDDConfig();
        setTimeout(function(){
          _this.testJsApi();
        },1000);
      },
      async testJsApi(){
        const self = this;
        let jsapilist = [
          'device.geolocation.get' //获取当前地理位置信息(单次定位)
        ] //需要使用的jsapi列表
        //1、鉴权
        dd.config({
          agentId: self._confing.agentId,
          corpId: self._confing.corpId, //必填，企业ID
          timeStamp: self._confing.timestamp, // 必填，生成签名的时间戳
          nonceStr: self._confing.nonceStr, // 必填，生成签名的随机串
          signature: self._confing.signature, // 必填，签名
          jsApiList: jsapilist // 必填，需要使用的jsapi列表，注意：不要带dd。
        });
        dd.error(function(err) { //验证失败
          alert("进入到error中");
          alert('dd error: ' + JSON.stringify(err));
        })
        dd.ready(()=> {
          dd.device.geolocation.get({
            targetAccuracy : 200,
            coordinate : 1,
            withReGeocode : false,
            useCache:true, //默认是true，如果需要频繁获取地理位置，请设置false
            onSuccess : function(result) {
              self.dw.longitude = result.longitude;//经度
              self.dw.latitude = result.latitude;//经度
              self.$forceUpdate();//手动调用,触发render函数进行自动更新
            },
            onFail : function(err) {
              alert(JSON.stringify(err))
            }
          });

        });
      },
      async getDDConfig(){
        let _this=this;
        this.api({
          url: "/ddUser/getDDConfig.do",
          method: "get",
          params:{"url":localStorage.getItem("originalUrl")}
        }).then(data => {
          _this._confing=data;
        })
      },
      getDeviceDetail(id){
        let _this=this;
        this.api({
          url: "/baseDeviceController/getDivDetail.do",
          method: "get",
          params:{"id":id}
        }).then(data => {
          _this.baseDevice=data.data[0];
        })
      },
      login() {
        let _this=this;

      },
      handleClick(){
        let _this=this;
        this.api({
          url: "/reportTest/test",
          method: "get",
          data:{}
        }).then(data => {
          console.log(data);
          this.chartData.rows=data;
        })
      }
    }
  };
</script>
<style scoped>
  .tui-checkbox1:checked {
    background:green;
  }
  .tui-checkbox2:checked {
    background:red;
  }
  .tui-checkbox3:checked {
    background:green;
  }
  .tui-checkbox {
    width:25px;
    height:25px;
    background-color:#ffffff;
    border:solid 1px #dddddd;
    -webkit-border-radius:50%;
    border-radius:50%;
    font-size:0.8rem;
    margin:0;
    padding:0;
    position:relative;
    display:inline-block;
    vertical-align:top;
    cursor:default;
    -webkit-appearance:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-transition:background-color ease 0.1s;
    transition:background-color ease 0.1s;
  }
  .tui-checkbox1:checked::after {
     content:'';
     top:5px;
     left:5px;
     position:absolute;
     background:transparent;
     border:#fff solid 2px;
     border-top:none;
     border-right:none;
     height:6px;
     width:10px;
     -moz-transform:rotate(-45deg);
     -ms-transform:rotate(-45deg);
     -webkit-transform:rotate(-45deg);
     transform:rotate(-45deg);
   }
  .tui-checkbox2:checked::after {
    content:'';
    top: 3px;
    right: 11px;
    position:absolute;
    background:transparent;
    border:#fff solid 2px;
    border-top:none;
    border-right:none;
    height: 16px;
    width: 0px;
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  .tui-checkbox2:checked::before{
    content:'';
    top: 1px;
    right: 10px;
    position:absolute;
    background:transparent;
    border:#fff solid 2px;
    border-top:none;
    border-right:none;
    height: 19px;
    width: 0px;
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  /*input[type="radio"] {
    padding: 2px;
    zoom:1.5;
  }
  input[type="radio"]:checked {
    background-color: green;
    background-clip: content-box;
    padding: 2px;
  }*/

</style>