vue2-client 0.1.1 → 1.0.0

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

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <x-form-table
+      title="指令"
+      v-if="tabActiveKey === '1'"
+      :queryParamsName="queryParamsName"
+      :fixedQueryForm="fixedQueryForm"
+      @action="toDetail">
+    </x-form-table>
+    <instruct-details-view
+      :visible.sync="detailsViewVisible"
+      :instructid="selectInstructId"
+      :isShowUserFiles="isShowUserFiles"
+      v-if="selectInstructId"
+    />
+  </div>
+</template>
+<script>
+
+import { STable, Ellipsis } from '@/components'
+import { formatDate } from '@/utils/util'
+import XFormTable from '@/base-client/components/common/XFormTable/XFormTable'
+
+export default {
+  name: 'DeviceDetailsInstruct',
+  components: {
+    STable,
+    Ellipsis,
+    XFormTable
+  },
+  props: {
+    deviceNo: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      selectInstructId: undefined,
+      tabActiveKey: undefined,
+      fixedQueryForm: {},
+      detailsViewVisible: false,
+      // 加载数据方法 必须为 Promise 对象
+      selectedRowKeys: [],
+      selectedRows: [],
+      queryParamsName: 'deviceToInstructQueryParams',
+      isShowUserFiles: false
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  methods: {
+    initView () {
+      this.tabActiveKey = '1'
+      this.fixedQueryForm['t_f_meternumber'] = this.deviceNo
+    },
+    refresh () {
+      this.$refs.table.refresh(true)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    toDetail (record) {
+      this.selectInstructId = record.id + ''
+      this.detailsViewVisible = true
+    }
+  }
+}
+</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/DeviceDetailsInstructOperate.vue

@@ -0,0 +1,122 @@
+<template>
+  <div v-if="details">
+    <div v-for="item in details" :key="item">
+      <div style="margin-top: 20px;margin-left: 20px">
+        <p> <a-button type="primary" @click="submit(item)" style="width: 150px;margin-right: 30px"> {{ item.f_name }} </a-button>
+          {{ item.f_describe }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+  import { STable, Ellipsis } from '@/components'
+  import { post } from '@/services/api/restTools'
+  import XFormTable from '@/base-client/components/common/XFormTable/XFormTable'
+  import { DeviceDetailsViewApi } from '@/services/api/DeviceDetailsViewApi'
+
+  export default {
+    name: 'DeviceDetailsInstructOperate',
+    components: {
+      STable,
+      Ellipsis,
+      XFormTable
+    },
+    props: {
+      device: {
+        type: Object,
+        required: true
+      }
+    },
+    data () {
+      return {
+        // 加载数据方法 必须为 Promise 对象
+        selectedRowKeys: [],
+        selectedRows: [],
+        details: undefined
+      }
+    },
+    computed: {
+    },
+    mounted () {
+      this.initView()
+    },
+    methods: {
+      initView () {
+        return post(DeviceDetailsViewApi.getDeviceInstructOperate, {
+          id: this.device.deviceid
+        }).then(res => {
+          this.details = res
+        }, err => {
+          console.error(err)
+        })
+      },
+      submit (item) {
+        const _this = this
+        this.$confirm({
+          title: '您确定要对档案生成' + item.f_name + '指令吗?',
+          content: '生成指令后，可以在指令界面查看和操作',
+          okText: '确定',
+          okType: 'danger',
+          cancelText: '取消',
+          onOk () {
+            return post(DeviceDetailsViewApi.saveInstructOperate, {
+              device: _this.device,
+              instruct: item
+            }).then(res => {
+              console.log(res)
+            })
+          }
+        })
+      },
+      refresh () {
+        this.$refs.table.refresh(true)
+      },
+      onSelectChange (selectedRowKeys, selectedRows) {
+        this.selectedRowKeys = selectedRowKeys
+        this.selectedRows = selectedRows
+      }
+    }
+  }
+</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/DeviceDetailsMain.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <a-card :class="isMobile ? 'card_view_mobile' : 'card_view'">
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="project" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">设备品牌</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_brand }}
+          </template>
+          <p class="card_details_value">{{ details.f_brand }}</p>
+        </a-tooltip>
+      </a-card-grid>
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="api" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">设备类型</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_name }}
+          </template>
+          <p class="card_details_value">{{ details.f_name }}</p>
+        </a-tooltip>
+      </a-card-grid>
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="profile" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">设备号</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_device_no }}
+          </template>
+          <p class="card_details_value">{{ details.f_device_no }}</p>
+        </a-tooltip>
+      </a-card-grid>
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="pushpin" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">设备厂家</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_manufactor }}
+          </template>
+          <p class="card_details_value">{{ details.f_manufactor }}</p>
+        </a-tooltip>
+      </a-card-grid>
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="select" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">设备型号</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_model }}
+          </template>
+          <p class="card_details_value">{{ details.f_model }}</p>
+        </a-tooltip>
+      </a-card-grid>
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="tool" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">设备别名</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_alias }}
+          </template>
+          <p class="card_details_value">{{ details.f_alias }}</p>
+        </a-tooltip>
+      </a-card-grid>
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="pay-circle" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">IMEI码</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_imei }}
+          </template>
+          <p class="card_details_value">{{ details.f_imei }}</p>
+        </a-tooltip>
+      </a-card-grid>
+      <a-card-grid :class="isMobile ? 'card_guid_mobile' : 'card_guid'">
+        <a-icon type="bg-colors" :style="{ fontSize: '24px'} "/>
+        <p class="card_details_title">IMSI码</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_imsi }}
+          </template>
+          <p class="card_details_value">{{ details.f_imsi }}</p>
+        </a-tooltip>
+      </a-card-grid>
+    </a-card>
+    <a-card :bordered="false" title="业务操作记录" :loading="loading">
+      <a-button @click="getWorkFlow()" type="primary">刷新</a-button>
+      <a-timeline pending="持续记录中..." :reverse="true" mode="alternate" style="max-width: 800px;margin: 0 auto;">
+        <a-timeline-item v-if="index < 3 ? true : advanced" :key="index" v-for="(value,index) in workList" color="green">
+          <div style="color: #0d1a26;font-weight: 500;">
+            <span style="font-size: 16px;">{{ value.name }}</span>
+            <span style="margin-left: 5px;">({{ value.type }}，{{ format(value.date,'yyyy-MM-dd hh:mm:ss') }})</span>
+          </div>
+          <div class="antd-pro-pages-profile-advanced-style-stepDescription" >
+            状态：{{ value.state }}
+          </div>
+          <div class="antd-pro-pages-profile-advanced-style-stepDescription">
+            相关信息：<br/><p style="margin-left: 2em;">{{ value.info }}</p>
+          </div>
+        </a-timeline-item>
+      </a-timeline>
+      <a-col :md="!advanced && 8 || 24" :sm="24" v-if="workList.length > 3">
+        <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+          <a @click="toggleAdvanced" style="margin-left: 8px">
+            {{ advanced ? '收起' : '展开' }}
+            <a-icon :type="advanced ? 'up' : 'down'"/>
+          </a>
+        </span>
+      </a-col>
+    </a-card>
+  </div>
+</template>
+<script>
+  import { formatDate } from '@/utils/util'
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'DeviceDetailsMain',
+    props: {
+      details: {
+        type: Object,
+        required: true
+      }
+    },
+    computed: {
+      ...mapState('setting', ['isMobile'])
+    },
+    mounted () {
+    },
+    data () {
+      return {
+        // 历史操作 展开/关闭
+        advanced: false,
+        workList: [],
+        loading: false
+      }
+    },
+    methods: {
+      format (date, format) {
+        return formatDate(date, format)
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      }
+    },
+    watch: {
+      'userid' () {
+        this.getWorkFlow()
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .card_view {
+    width: 70%;
+    min-width: 700px;
+  }
+
+  .card_view_mobile {
+    width: 100%;
+  }
+
+  .card_details_title {
+    margin: 4px 0;
+    font-size: 14px;
+  }
+
+  .card_details_value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #444;
+    margin-bottom: 0;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+
+  .card_guid {
+    width: 25%;
+    text-align:left;
+  }
+
+  .card_guid_mobile {
+    width: 50%;
+    text-align:left;
+  }
+
+  .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/DeviceDetailsRead.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <x-form-table
+      :logicName="logicName"
+      :logicParam="logicParam"
+      :fixedQueryForm="fixedQueryForm"
+      @onSubmit="onSubmit"
+      @action="toDetail">
+    </x-form-table>
+  </div>
+</template>
+<script>
+
+  import { STable, Ellipsis } from '@/components'
+  import { formatDate } from '@/utils/util'
+  import XFormTable from '@/base-client/components/common/XFormTable/XFormTable'
+
+  export default {
+    name: 'DeviceDetailsInstruct',
+    components: {
+      STable,
+      Ellipsis,
+      XFormTable
+    },
+    props: {
+      deviceNo: {
+        type: String,
+        required: true
+      },
+      deviceId: {
+        type: Number,
+        required: true
+      }
+    },
+    data () {
+      return {
+        selectInstructId: undefined,
+        startForm: {},
+        fixedQueryForm: {},
+        detailsViewVisible: false,
+        // 加载数据方法 必须为 Promise 对象
+        selectedRowKeys: [],
+        selectedRows: [],
+        logicName: 'getIotRead',
+        logicParam: null,
+        // 默认表格数据
+        defaultData: {
+          data: [],
+          pageSize: 0,
+          pageNo: 0,
+          totalPage: 0,
+          totalCount: 0
+        },
+        isShowUserFiles: false
+      }
+    },
+    computed: {
+      rowSelection () {
+        return {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      }
+    },
+    mounted () {
+      this.initView()
+    },
+    methods: {
+      initView () {
+        this.logicParam = {
+          id: this.deviceNo
+        }
+        this.fixedQueryForm['i_id'] = this.deviceId
+      },
+      onSubmit (res) {
+        res.form['i_id'] = this.deviceId
+        this.$emit('onSubmit', res)
+      },
+      refresh () {
+        this.$refs.table.refresh(true)
+      },
+      onSelectChange (selectedRowKeys, selectedRows) {
+        this.selectedRowKeys = selectedRowKeys
+        this.selectedRows = selectedRows
+      },
+      format (date, format) {
+        return formatDate(date, format)
+      },
+      toDetail (record) {
+        this.selectInstructId = record.id + ''
+        this.detailsViewVisible = true
+      }
+    }
+  }
+</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/index.js

@@ -0,0 +1,8 @@
+import DeviceDetailsMain from './DeviceDetailsMain'
+import DeviceDetailsCount from './DeviceDetailsCount'
+import DeviceDetailsInstruct from './DeviceDetailsInstruct'
+import DeviceDetailsRead from './DeviceDetailsRead'
+import DeviceDetailsSingular from './DeviceDetailsException'
+import DeviceDetailsInstructOperate from './DeviceDetailsInstructOperate'
+
+export { DeviceDetailsMain, DeviceDetailsCount, DeviceDetailsInstruct, DeviceDetailsRead, DeviceDetailsSingular, DeviceDetailsInstructOperate }