vue2-client 0.1.1 → 1.2.0

package/src/base-client/components/iot/DeviceDetailsView/DeviceDetailsView.vue

@@ -0,0 +1,231 @@
+<template>
+  <a-drawer
+    title="设备详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-spin :spinning="loadDeviceDetails">
+      <a-page-header :title="'设备号：' + details.f_device_no">
+        <div class="row">
+          <div class="content">
+            <a-descriptions size="small" :column="isMobile ? 1 : 2">
+              <a-descriptions-item label="设备IOT标识">{{ details.deviceid }}</a-descriptions-item>
+              <<a-descriptions-item/>
+              <a-descriptions-item label="创建时间">{{ details.f_input_date }}</a-descriptions-item>
+              <a-descriptions-item label="创建人">{{ details.f_inputtor }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+          <div class="extra">
+            <a-row class="status-list">
+              <a-col :xs="12" :sm="24">
+                <div class="text">设备状态</div>
+                <div class="heading">
+                  <x-badge badge-key="deviceStateMap" :value="details.f_state" :is-external-text="true"/>
+                </div>
+              </a-col>
+            </a-row>
+            <p></p>
+          </div>
+        </div>
+        <!-- actions -->
+        <template v-slot:extra>
+          <a-button-group style="margin-right: 4px;">
+            <a-button type="dashed" @click="initView" :loading="loadDeviceDetails">刷新</a-button>
+          </a-button-group>
+          <a-button-group style="margin-right: 4px;">
+          </a-button-group>
+        </template>
+        <template slot="footer">
+          <a-tabs :default-active-key="tabActiveKey" :activeKey="tabActiveKey" @change="handleTabChange" style="margin-bottom: 23px;">
+            <template v-for="value in tabList">
+              <a-tab-pane :key="value.key" :tab="value.tab"/>
+            </template>
+          </a-tabs>
+          <div v-if="!loadDeviceDetails">
+            <device-details-main :details="details" v-if="tabActiveKey === '1'"/>
+            <device-details-read :device-no="details.f_device_no" :device-id="details.id" v-if="tabActiveKey === '2'"/>
+            <device-details-instruct :device-no="details.f_device_no" v-if="tabActiveKey === '3'"/>
+            <device-details-singular :device-no="details.f_device_no" v-if="tabActiveKey === '4'"/>
+            <device-details-instruct-operate :device="details" v-if="tabActiveKey === '5'"/>
+          </div>
+        </template>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { DeviceDetailsMain, DeviceDetailsCount, DeviceDetailsInstruct, DeviceDetailsRead, DeviceDetailsSingular, DeviceDetailsInstructOperate } from '@vue2-client/base-client/components/iot/DeviceDetailsView/part'
+import { post } from '@vue2-client/services/api/restTools'
+import { mapState } from 'vuex'
+import { DeviceDetailsViewApi } from '@vue2-client/services/api/DeviceDetailsViewApi'
+
+export default {
+  name: 'DeviceDetailsView',
+  components: {
+    DeviceDetailsMain,
+    DeviceDetailsCount,
+    DeviceDetailsInstruct,
+    DeviceDetailsRead,
+    DeviceDetailsSingular,
+    DeviceDetailsInstructOperate
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // Tab页签
+      tabActiveKey: '1',
+      // 设备详情
+      details: {
+        f_device_no: '',
+        f_imei: '',
+        f_imsi: '',
+        f_state: '正常',
+        f_device_id: '',
+        f_manufactor: '',
+        f_brand: '',
+        f_alias: '',
+        f_model: '',
+        f_input_date: '',
+        f_inputtor: ''
+      },
+      tabList: [
+        { key: '1', tab: '基本' },
+        { key: '2', tab: '抄表' },
+        { key: '3', tab: '指令' },
+        { key: '4', tab: '异常' },
+        { key: '5', tab: '指令操作' }
+      ],
+      // 设备详情加载
+      loadDeviceDetails: true
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    deviceNo: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.tabActiveKey = '1'
+      this.getIotDevice(this.deviceNo)
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 获取设备详情信息
+    getIotDevice (deviceNo) {
+      this.loadDeviceDetails = true
+      return post(DeviceDetailsViewApi.getDeviceDetails, {
+        id: deviceNo
+      }).then(res => {
+        this.details = res
+        this.loadDeviceDetails = false
+      }, err => {
+        this.loadDeviceDetails = false
+        console.error(err)
+      })
+    },
+    // Tab切换
+    handleTabChange (key) {
+      this.tabActiveKey = key
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.business {
+  color: #ffffff;
+}
+.business:enabled:hover {
+  background-color: #85CE61 !important;
+  border-color: #85CE61 !important;
+}
+.business:enabled {
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+.business:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, .45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
+
+.no-data {
+  color: rgba(0, 0, 0, .25);
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.mobile {
+  .detail-layout {
+    margin-left: unset;
+  }
+  .text {
+
+  }
+  .status-list {
+    text-align: left;
+  }
+}
+
+.row {
+  display: flex;
+
+  .content {
+    -webkit-box-flex: 1;
+    flex: auto;
+    -ms-flex: auto;
+  }
+
+  .extra {
+    flex: 0 1 auto;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+</style>

package/src/base-client/components/iot/DeviceDetailsView/index.js

@@ -0,0 +1,3 @@
+import DeviceDetailsView from './DeviceDetailsView'
+
+export default DeviceDetailsView

package/src/base-client/components/iot/DeviceDetailsView/index.md

@@ -0,0 +1,43 @@
+# MeterDetailsView 档案详情页
+
+提供一个可以对单个表具档案进行一系列通用业务操作的抽屉实现
+
+
+
+## 何时使用
+
+允许用户对单个表具档案进行一系列通用业务操作，常用于作为表具详情页的通用实现。
+
+
+
+引用方式：
+
+```javascript
+import MeterDetailsView from '@vue2-client/base-client/components/MeterDetailsView'
+
+export default {
+    components: {
+      MeterDetailsView
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<meter-details-view
+  :visible.sync="detailVisible"
+  :select-org-name="selectOrgName"
+  :userid="selectUserId"
+  v-if="selectUserId" />
+```
+
+## API
+
+| 参数            | 说明      | 类型      | 默认值   |
+|---------------|---------|---------|-------|
+| visible       | 是否显示    | Boolean | false |
+| selectOrgName | 燃气公司客户名 | String  | null  |
+| userid        | 表档案ID   | String  | null  |

package/src/base-client/components/iot/DeviceDetailsView/part/DeviceDetailsCount.vue

@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <a-row :gutter="24">
+      <!--    <a-col :md="12" :sm="24">
+        <a-card
+          hoverable
+          title="累计用气量"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading3" active />
+            <div style="height: 200px" id="container2" v-show="!radarLoading3"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="日用气量"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading" active />
+            <div style="height: 200px" id="container" v-show="!radarLoading"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="日用气金额"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading2" active />
+            <div style="height: 200px" id="containerUseMoney" v-show="!radarLoading2"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="12" :sm="24">
+        <a-card
+          hoverable
+          title="剩余余额"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading4" active />
+            <div style="height: 200px" id="container3" v-show="!radarLoading4"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="电压情况"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading5" active />
+            <div style="height: 200px" id="container4" v-show="!radarLoading5"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="信号强度情况"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading6" active />
+            <div style="height: 200px" id="container5" v-show="!radarLoading6"/>
+          </div>
+        </a-card>
+      </a-col>-->
+    </a-row>
+  </div>
+</template>
+<script>
+  import { Area, Line } from '@antv/g2plot/lib/index'
+  import ARow from 'ant-design-vue/es/grid/Row'
+  import ACol from 'ant-design-vue/es/grid/Col'
+  import { MeterDetailsViewApi } from '@vue2-client/services/api/MeterDetailsViewApi'
+
+  export default {
+    name: 'DeviceDetailsCount',
+    components: {
+      ACol,
+      ARow
+    },
+    props: {
+      deviceNo: {
+        type: String,
+        required: true
+      }
+    },
+    data () {
+      return {
+        radarLoading: true,
+        radarLoading2: true,
+        radarLoading3: true,
+        radarLoading4: true,
+        radarLoading5: true,
+        radarLoading6: true
+      }
+    },
+    mounted () {
+      this.loadGasView()
+    },
+    methods: {
+      loadGasView () {
+        const _this = this
+        fetch(MeterDetailsViewApi.getGasConsumptionData, {
+          method: 'POST',
+          body: JSON.stringify({
+            userId: this.userid
+          })
+        })
+          .then((res) => res.json())
+          .then((data) => {
+            const line = new Line('container', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'scales',
+              smooth: true,
+              color: 'l(0) 0:#3ED474 1:#399EFC',
+              lineStyle: {
+                lineWidth: 5
+              },
+              tooltip: {
+                fields: ['date', 'scales'],
+                formatter: (datum) => {
+                  return { name: '用气量', value: datum.scales + '方' }
+                }
+              }
+            })
+            line.render()
+            _this.radarLoading = false
+            const areaUseMoney = new Line('containerUseMoney', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'oughtfee',
+              smooth: true,
+              color: 'l(0) 0:#9EFCFF 1:#9E87FF',
+              lineStyle: {
+                lineWidth: 5
+              },
+              tooltip: {
+                fields: ['date', 'oughtfee'],
+                formatter: (datum) => {
+                  return { name: '用气金额', value: datum.oughtfee + '元' }
+                }
+              }
+            })
+            areaUseMoney.render()
+            _this.radarLoading2 = false
+            const column = new Area('container2', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'used',
+              point: {
+                size: 5,
+                shape: 'diamond',
+                style: {
+                  fill: 'white',
+                  stroke: 'l(0) 0:#3ED474 1:#399EFC',
+                  lineWidth: 2
+                }
+              },
+              color: 'l(270) 0:#3ED474 1:#399EFC',
+              areaStyle: () => {
+                return {
+                  fill: 'l(270) 0:#3ED474 1:#399EFC'
+                }
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'used'],
+                formatter: (datum) => {
+                  return { name: '累计用气量', value: datum.used + '方' }
+                }
+              }
+            })
+            column.render()
+            _this.radarLoading3 = false
+            const area2 = new Area('container3', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'balance',
+              point: {
+                size: 5,
+                shape: 'diamond',
+                style: {
+                  fill: 'white',
+                  stroke: 'l(270) 0:#3ED474 1:#399EFC',
+                  lineWidth: 2
+                }
+              },
+              color: 'l(270) 0:#3ED474 1:#399EFC',
+              lineStyle: {
+                lineWidth: 5
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'balance'],
+                formatter: (datum) => {
+                  return { name: '剩余金额', value: datum.balance + '元' }
+                }
+              },
+              annotations: [
+                // 低于中位数颜色变化
+                {
+                  type: 'regionFilter',
+                  start: ['max', '0'],
+                  end: ['min', '-999999']
+                },
+                {
+                  type: 'text',
+                  position: ['min', '0'],
+                  content: '欠费线',
+                  offsetY: -4,
+                  style: {
+                    textBaseline: 'bottom'
+                  }
+                },
+                {
+                  type: 'line',
+                  start: ['min', '0'],
+                  end: ['max', '0'],
+                  style: {
+                    stroke: 'l(0) 0:#FEB692 1:#EA5455',
+                    lineDash: [2, 2]
+                  }
+                }
+              ]
+            })
+            area2.render()
+            _this.radarLoading4 = false
+            const line2 = new Line('container4', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'batterylevel',
+              color: 'l(0) 0:#3ED474 1:#399EFC',
+              lineStyle: {
+                lineWidth: 5
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'batterylevel'],
+                formatter: (datum) => {
+                  return { name: '电压', value: datum.batterylevel + 'V' }
+                }
+              }
+            })
+            line2.render()
+            _this.radarLoading5 = false
+            const line3 = new Line('container5', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'signal',
+              color: 'l(0) 0:#9EFCFF 1:#9E87FF',
+              lineStyle: {
+                lineWidth: 5
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'signal'],
+                formatter: (datum) => {
+                  return { name: '信号强度', value: datum.signal + 'dBm' }
+                }
+              }
+            })
+            line3.render()
+            _this.radarLoading6 = false
+          })
+      }
+    },
+    watch: {
+      'userid' () {
+        this.loadGasView()
+      }
+    }
+  }
+</script>
+
+<style lang='less' scoped>
+  .detail-layout {
+    margin-left: 44px
+  }
+  .text {
+    color: rgba(0, 0, 0, .45)
+  }
+
+  .heading {
+    color: rgba(0, 0, 0, .85);
+    font-size: 20px
+  }
+
+  .no-data {
+    color: rgba(0, 0, 0, .25);
+    text-align: center;
+    line-height: 64px;
+    font-size: 16px
+
+    /*i {*/
+    /*  font-size: 24px*/
+    /*  margin-right: 16px*/
+    /*  position: relative*/
+    /*  top: 3px*/
+    /*}*/
+  }
+
+  .mobile {
+    .detail-layout {
+      margin-left: unset
+    }
+    .text {
+
+    }
+    .status-list {
+      text-align: left
+    }
+  }
+</style>

package/src/base-client/components/iot/DeviceDetailsView/part/DeviceDetailsException.vue

@@ -0,0 +1,57 @@
+<template>
+  <a-card :bordered="false">
+    <x-form-table
+      v-if="tabActiveKey === '1'"
+      :queryParamsName="queryParamsName"
+      :fixedQueryForm="fixedQueryForm"
+      @onSubmit="onSubmit"
+      @action="toDetail">
+    </x-form-table>
+  </a-card>
+</template>
+
+<script>
+  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+
+  export default {
+    name: 'DeviceDetailsException',
+    components: {
+      XFormTable
+    },
+    data () {
+      return {
+        // 选中的异常编号
+        selectSingularId: undefined,
+        tabActiveKey: undefined,
+        fixedQueryForm: {},
+        // 查询配置文件名
+        queryParamsName: 'deviceToExceptionQueryParams',
+        // 是否显示设置设备参数详情抽屉
+        detailVisible: false
+      }
+    },
+    props: {
+      deviceNo: {
+        type: String,
+        required: true
+      }
+    },
+    mounted () {
+      this.initView()
+    },
+    methods: {
+      initView () {
+        this.tabActiveKey = '1'
+        this.fixedQueryForm['e_f_device_id'] = this.deviceNo
+      },
+      onSubmit (res) {
+        res.form['e_f_device_id'] = this.deviceNo
+        this.$emit('onSubmit', res)
+      },
+      toDetail (record, id) {
+        // this.selectSingularId = record.id + ''
+        // this.detailVisible = true
+      }
+    }
+  }
+</script>