system-phone 1.4.0 → 3.0.1

package/src/components/iot/InstructMessage.vue

@@ -0,0 +1,313 @@
+<template>
+<div class="flex " style="background: #f8f8f8">
+  <div  class="auto bg-white" style="line-height: 32px;padding: 10px">
+   <label style="float: left">指令：{{row.f_instruct_title}} </label>
+    <div class="auto" style="float: right">
+      <!--<button type="button" class="btn btn-default btn-sm"  @click="$back">返回</button>-->
+      <button type="button" class="btn btn-default btn-sm"  @click="refresh">刷新</button>
+      <button type="button" class="btn btn-primary btn-sm"  @click="cancle">取消</button>
+      <button type="button" class="btn  btn-primary btn-sm"  @click="resend">重送</button>
+    </div>
+  </div>
+  <div class="instruct-state flex-row bg-white" style="margin-top: 5px;height:auto;padding: 10px">
+    <div class="instruct-left col-sm-12 auto">
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+        <p  class="flex-row">
+          <span >指令状态:</span>
+          <span class="instruct-content" style="color: #499edf;font-size: 16px;font-weight: bold">{{row.f_instruct_state}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+        <p  class="flex-row">
+          <span>执行状态:</span>
+          <span class="instruct-content" style="color: #499edf;font-size: 16px;font-weight: bold">{{row.f_receive_state}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+        <p  class="flex-row">
+          <span>指令编号:</span>
+          <span class="instruct-content">{{row.id}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+
+        <p  class="flex-row">
+          <span>表编号:</span>
+          <span class="instruct-content">{{row.f_user_id}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+        <p  class="flex-row">
+          <span>表号:</span>
+          <span class="instruct-content">{{row.f_meternumber}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+        <p  class="flex-row">
+          <span>操作人员:</span>
+          <span class="instruct-content">{{row.f_inputtor}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+        <p  class="flex-row">
+          <span>指令说明:</span>
+          <span class="instruct-content">{{row.f_instruct_state}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-6 auto">
+        <p  class="flex-row">
+          <span>表厂别名:</span>
+          <span class="instruct-content">{{row.f_alias}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-12 auto">
+        <p  class="flex-row">
+          <span>生成时间:</span>
+          <span class="instruct-content" style="flex:3 !important;">{{row.f_instruct_date}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-12 auto">
+        <p  class="flex-row">
+          <span>最后发送时间:</span>
+          <span class="instruct-content" style="flex:3 !important;">{{row.f_send_date}}</span>
+        </p>
+      </div>
+      <div class="col-sm-6 col-md-6 col-xs-12 auto">
+        <p  class="flex-row">
+          <span>最后响应时间:</span>
+          <span class="instruct-content" style="flex:3 !important;">{{row.f_callback_date}}</span>
+        </p>
+      </div>
+    </div>
+
+  </div>
+<div class="auto bg-white" style="margin-top: 5px;padding: 10px">
+  <div class="title auto">
+    <span>指令状态</span>
+  </div>
+  <div class="flex-row" style="font-size: 10px;padding: 10px">
+    <timeline>
+      <timeline-item color="#499edf">
+        <p>待发送</p>
+        <p>指令已就绪</p>
+        <p>{{row.f_instruct_date}}</p>
+      </timeline-item>
+      <timeline-item :color="row.f_instruct_state==='已发送'?'#499edf':''" >
+        <p>已发送</p>
+        <p>已发送，等待响应结果</p>
+        <p>{{row.f_send_date}}</p>
+      </timeline-item>
+      <timeline-item color="red" v-if="row.f_instruct_state==='执行失败'">
+        <p>执行失败</p>
+        <p>失败，请查看响应结果</p>
+        <p>{{row.f_callback_date}}</p>
+      </timeline-item>
+      <timeline-item :color="row.f_instruct_state==='执行成功'?'#499edf':''" v-if="row.f_instruct_state!=='执行失败'">
+        <p>执行成功</p>
+        <p>指令已执行成功</p>
+        <p>{{row.f_callback_date}}</p>
+      </timeline-item>
+    </timeline>
+    <!--<div  class="step">-->
+      <!--<div class="step-icon">-->
+        <!--<img src="../../assets/对号.png" class="send-line" style="height: 32px;width:32px;margin-bottom: 5px;padding-right: 5px" alt="" >-->
+      <!--</div>-->
+        <!--<p>待发送</p>-->
+        <!--<p>指令已就绪</p>-->
+        <!--<p>{{row.f_instruct_date}}</p>-->
+
+    <!--</div>-->
+    <!--<div class="step" >-->
+      <!--<div class="step-icon">-->
+        <!--<img src="../../assets/对号.png" style="height: 32px;width:32px;margin-bottom: 5px;padding-right: 5px" alt="" >-->
+      <!--</div>-->
+      <!--<p  class="flex-row">待发送</p>-->
+      <!--<p  class="flex-row">指令已发送</p>-->
+      <!--<p>{{row.f_send_date}}</p>-->
+      <!--</div>-->
+
+    <!--<div class="step" >-->
+      <!--<div  style="height: auto">-->
+      <!--<img src="../../assets/对号.png" class="" style="height: 32px;width:32px;margin-bottom: 5px;padding-right: 5px" alt="" >-->
+      <!--</div>-->
+      <!--<p  class="flex-row">待发送</p>-->
+      <!--<p>指令已执行成功</p>-->
+      <!--<p>{{row.f_callback_date}}</p>-->
+    <!--</div>-->
+  </div>
+
+</div>
+  <div class="row bg-white" style="margin-top: 5px;">
+    <div class="content-head" style="background: #fafafa;height: 2em;">
+      <p style="padding-left: 10px;line-height: 2em">指令内容</p>
+    </div>
+    <div  style="height: auto;padding: 10px" >
+      <p>{</p>
+      <p v-for="item in content">
+        <span>{{item}}</span>
+        <span v-if="$index<content.length-1">,</span>
+      </p>
+    <p>}</p>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+  import {HttpResetClass} from 'vue-client'
+  export default {
+    title: '指令信息',
+    data () {
+      return {
+        content:[],
+        msg: '',
+        show: false
+      }
+    },
+    props:['row'],
+    methods:{
+      refresh(){
+        let data = {
+          items: '*',
+          tablename: 't_instruct',
+          orderitem: 'id  desc',
+          condition: ` id = '${this.row.id}'`
+        }
+        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/iot_singleTable_OrderBy`, {data: data}).then((row) => {
+          // console.log('查询返回'+JSON.stringify(row))
+        this.row = row.data[0]
+      }).catch((e) => {
+        //   console.log('正在维护！')
+        // console.log('错误信息+++++++'+JSON.stringify(e))
+      })
+      },
+      cancle(){
+        this.$showMessage(`您确认要取消指令吗？`, ['confirm', 'cancel']).then(async (res) => {
+          if (res === 'confirm') {
+          let http = new HttpResetClass()
+          let condition = `id = '${this.row.id}'`
+          // console.log('修改条件===' + JSON.stringify(condition))
+          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/cancelSendInstruct`, {data: {condition: condition}}).then((row) => {
+            this.$showMessage('取消指令操作成功！')
+            this.refresh()
+          //   console.log('修改返回' + JSON.stringify(row))
+          // this.$showMessage('操作成功！将会在一段时间内重新生成开户指令！')
+        }).catch((e) => {
+            this.$showMessage('操作失败！请稍后重试！')
+          // console.log('错误信息+++++++'+JSON.stringify(e))
+        })
+        }
+      })
+      },
+      resend(){
+        this.$showMessage(`您确认要重新发送指令？`, ['confirm', 'cancel']).then(async (res) => {
+          if (res === 'confirm') {
+          let http = new HttpResetClass()
+          let condition = `id = '${this.row.id}'`
+          // console.log('修改条件===' + JSON.stringify(condition))
+          http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/againSendInstruct`, {data: {condition: condition}}).then((row) => {
+            // console.log('修改返回' + JSON.stringify(row))
+          this.refresh()
+          this.$showMessage('操作成功！将会在一段时间内重新发送指令！')
+        }).catch((e) => {
+            this.$showMessage('操作失败！请稍后重试！')
+          // console.log('错误信息+++++++'+JSON.stringify(e))
+        })
+        }
+      })
+      },
+      getInitData(){
+        let data = JSON.parse(this.row.f_instruct_content)
+        this.content = []
+        for(let key in data){
+          let param = key+':'+data[key]
+          this.content.push(param)
+        }
+      },
+    },
+    watch:{
+      'row'(val){
+        if(val){
+          this.getInitData()
+        }
+      }
+    },
+    ready () {
+     this.getInitData()
+    }
+  }
+</script>
+<style media="screen" scoped>
+div::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+div {
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+}
+
+.font-head{
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+.instruct-content{
+ flex:1.5 !important;
+}
+.font-content{
+  font-size: 12px;
+  font-weight: normal;
+  color: #666666;
+}
+  .meterinfo{
+    border:1px solid #eeeeee;
+    /*border-right: 2px solid #eeeeee;*/
+  }
+  .instruct-right div{
+    height: auto;
+  }
+  .instruct-state{
+    font-size: 14px;
+  }
+  .instruct{
+    font-size: 10px;
+  }
+  .step{
+    flex:1
+  }
+ .step-icon{
+   height: auto;
+ }
+@media screen and (max-width: 1920px){
+  .step-icon:after{
+    content: "";
+    width: 30%;
+    height: 2px;
+    margin-top: 16px;
+    background-color: #6eb0e3;
+    position: absolute;
+    /*top: 10px;*/
+
+  }
+}
+@media screen and (max-width: 768px){
+  .step-icon:after{
+    content: "";
+    width: 22%;
+    height: 2px;
+    margin-top: 16px;
+    background-color: #6eb0e3;
+    position: absolute;
+    /*top: 10px;*/
+
+  }
+}
+
+.step p{
+  margin-bottom: 5px !important;
+}
+  p span{
+    flex:1
+  }
+</style>

package/src/components/iot/IotBaseInfo.vue

@@ -0,0 +1,97 @@
+<template>
+<div class="flex">
+  <div  class="cols-sm-12 col-md-12 col-xs-12 " >
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/pinpai.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">表具品牌</span>
+        <span class="font-head">{{row.f_meter_brand}}</span>
+      </div>
+
+    </div>
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/leixing.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">表具类型</span>
+        <span class="font-head">{{row.f_meter_type}}</span>
+      </div>
+    </div>
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/biaohao.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">表号</span>
+        <span class="font-head">{{row.f_meternumber}}</span>
+      </div>
+    </div>
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/guige.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">表具规格</span>
+        <span class="font-head">{{row.f_meter_style}}</span>
+      </div>
+    </div>
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/xinghao.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">表具型号</span>
+        <span class="font-head">{{row.f_type}}</span>
+      </div>
+    </div>
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/bieming.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">表具别名</span>
+        <span class="font-head">{{row.f_alias}}</span>
+      </div>
+    </div>
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/yue.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">剩余金额</span>
+        <span class="font-head">{{row.f_balance_amount}}</span>
+      </div>
+    </div>
+    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
+      <div class="flex" style="padding: 0.5rem;align-items: center">
+        <img src="../../assets/qiliang.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
+        <span class="font-content">累计用气量</span>
+        <span class="font-head">{{row.f_balance_gas}}</span>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+  export default {
+    title: '基础信息',
+    data () {
+      return {
+        msg: '',
+        show: false
+      }
+    },
+    props:['row'],
+    ready () {
+      // this.$appdata.load().then(() => {
+      //   this.$emit('ready')
+      // })
+    }
+  }
+</script>
+<style media="screen" scoped>
+.font-head{
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+.font-content{
+  font-size: 12px;
+  font-weight: normal;
+  color: #666666;
+}
+  .meterinfo{
+    border:1px solid #eeeeee;
+    /*border-right: 2px solid #eeeeee;*/
+  }
+</style>

package/src/components/iot/IotMeterInfo.vue

@@ -0,0 +1,77 @@
+<template>
+<div>
+  <div  class="cols-sm-12 col-md-12 col-xs-12 " >
+    <div class="col-sm-12 col-md-12 col-xs-12 ">
+      <label class="font-content lb-left" style="padding-left: 0.5rem">表具信息:{{row.f_meternumber}}</label>
+    </div>
+  </div>
+<div class="row" >
+
+  <div  class="cols-sm-12 col-md-12 col-xs-12 font-content" style="">
+
+ <p class="col-sm-6 col-md-6 col-xs-6 flex-row">
+      <span>表编号:</span>
+      <span style="padding-left: 0.5rem">{{row.f_user_id}}</span>
+    </p>
+ <p class="col-sm-6 col-md-6 col-xs-6 flex-row">
+      <span>用户编号:</span>
+      <span style="padding-left: 0.5rem">{{row.f_userinfo_code}}</span>
+    </p>
+ <p class="col-sm-6 col-md-6 col-xs-6 flex-row">
+      <span>余额:</span>
+      <span style="padding-left: 0.5rem">{{row.f_jval}}</span>
+    </p>
+ <p class="col-sm-6 col-md-6 col-xs-6 flex-row">
+      <span>网络购气次数:</span>
+      <span style="padding-left: 0.5rem">{{row.f_iot_times}}</span>
+    </p>
+ <p class="col-sm-6 col-md-6 col-xs-6 flex-row">
+      <span>总购金量:</span>
+      <span style="padding-left: 0.5rem">{{row.f_total_gas}}</span>
+    </p>
+ <p class="col-sm-6 col-md-6 col-xs-6 flex-row">
+      <span>总购气量:</span>
+      <span style="padding-left: 0.5rem">{{row.f_total_fee}}</span>
+    </p>
+ <p class="col-sm-12 col-md-12 col-xs-12">
+      <span>气表品牌别名:</span>
+      <span style="padding-left: 0.5rem">{{row.f_alias}}</span>
+
+    </p>
+  </div>
+</div>
+</div>
+</template>
+
+<script>
+  export default {
+    title: '表具信息',
+    data () {
+      return {
+        msg: '',
+        show: false
+      }
+    },
+    props:['row'],
+    ready () {
+      // this.$appdata.load().then(() => {
+      //   this.$emit('ready')
+      // })
+    }
+  }
+</script>
+<style media="screen" scoped>
+.font-head{
+  font-size: 16px;
+  font-weight: bold;
+  color: #666;
+}
+.font-content{
+  font-size: 14px;
+  font-weight: normal;
+  color: #666666;
+}
+  p span{
+    flex:1
+  }
+</style>