vue2-client 1.3.1 → 1.3.4

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

@@ -1,452 +0,0 @@
-<template>
-  <a-drawer
-    title="设备品牌详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <form-group-query
-      @getColumnJson="getColumnJson"
-      :visible.sync="createQueryVisible"
-      @saveQueryParams="saveQueryParams"
-    />
-    <form-group-edit
-      @getColumnJson="getColumnJson"
-      :visible.sync="editQueryVisible"
-      :modifyModelData="this.details.f_params_json ? JSON.parse(this.details.f_params_json) : {}"
-      @onSubmit="saveDeviceParams"
-    />
-    <a-spin :spinning="loadDeviceBrandDetails">
-      <a-page-header :title="details.f_brand">
-        <div class="row">
-          <div class="content">
-            <a-descriptions size="small" :column="isMobile ? 1 : 2">
-              <a-descriptions-item label="设备厂家">{{ details.f_manufactor }}</a-descriptions-item>
-              <a-descriptions-item label="设备别名">{{ details.f_alias }}</a-descriptions-item>
-              <a-descriptions-item label="设备兼容方式">{{ details.f_compatible_mode }}</a-descriptions-item>
-              <a-descriptions-item label="创建人">{{ details.f_inputtor }}</a-descriptions-item>
-              <a-descriptions-item label="创建时间">{{ details.f_input_date }}</a-descriptions-item>
-            </a-descriptions>
-          </div>
-        </div>
-        <!-- actions -->
-        <template v-slot:extra>
-          <a-button-group style="margin-right: 4px;">
-            <a-button type="dashed" @click="initView" :loading="loadDeviceBrandDetails">刷新</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="!loadDeviceBrandDetails">
-            <x-form-table
-              v-if="tabActiveKey === '1'"
-              title="设备型号"
-              :fixed-add-form="fixedAddForm"
-              :fixed-query-form="fixedQueryForm"
-              queryParamsName="deviceModelQueryParams">
-            </x-form-table>
-            <div v-if="tabActiveKey === '2'">
-              <a-transfer
-                :data-source="mockData"
-                :target-keys="targetKeys"
-                :show-search="true"
-                :titles="['已配置的指令', '可加入的指令']"
-                :operations="['移除', '加入']"
-                :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
-                :show-select-all="false"
-                @change="onChange"
-              >
-                <template
-                  slot="children"
-                  slot-scope="{
-                    props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
-                    on: { itemSelectAll, itemSelect },
-                  }"
-                >
-                  <a-table
-                    :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
-                    :columns="direction === 'left' ? leftColumns : rightColumns"
-                    :data-source="filteredItems"
-                    size="small"
-                    :style="{ pointerEvents: listDisabled ? 'none' : null }"
-                    :custom-row="({ key, disabled: itemDisabled }) => ({
-                      on: {
-                        click: () => {
-                          if (itemDisabled || listDisabled) return;
-                          itemSelect(key, !selectedKeys.includes(key));
-                        },
-                      },
-                    })"
-                  />
-                </template>
-              </a-transfer>
-              <span :style="{ float: 'right', overflow: 'hidden', marginTop: '8px' }">
-                <a-button-group>
-                  <a-button type="primary" @click="saveInstructType" :loading="saveInstructTypeLoading">保存配置</a-button>
-                </a-button-group>
-              </span>
-            </div>
-            <div v-if="tabActiveKey === '3'">
-              <a-space>
-                <a-button type="primary" @click="toCreateQuery">
-                  <a-icon :style="iconStyle" type="api"/>编辑设备品牌参数项
-                </a-button>
-                <a-button type="primary" @click="toEditQuery">
-                  <a-icon :style="iconStyle" type="interaction"/>设置参数项默认值
-                </a-button>
-              </a-space>
-              <a-card title="设备品牌参数预览" :bordered="true" size="small" style="margin-top: 20px;">
-                <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="getColumnJson()" :expand-depth="parseInt('100')" style="overflow: auto;max-height: 440px"></json-viewer>
-              </a-card>
-            </div>
-          </div>
-        </template>
-      </a-page-header>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-import JsonViewer from 'vue-json-viewer'
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-import { DeviceBrandDetailsViewApi, post } from '@vue2-client/services/api'
-import { mapGetters, mapState } from 'vuex'
-
-const leftTableColumns = [
-  {
-    dataIndex: 'title',
-    title: '指令类型'
-  },
-  {
-    dataIndex: 'description',
-    title: '指令说明'
-  }
-]
-
-export default {
-  name: 'DeviceBrandDetailsView',
-  components: {
-    JsonViewer,
-    XFormTable
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // Tab页签
-      tabActiveKey: '1',
-      // 设备品牌详情
-      details: {
-        f_brand: '',
-        f_alias: '',
-        f_manufactor: '',
-        f_compatible_mode: '',
-        f_input_date: '',
-        f_inputtor: '',
-        f_brand_set_params_json: '',
-        f_params_json: ''
-      },
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      },
-      tabList: [
-        { key: '1', tab: '设备型号' },
-        { key: '2', tab: '指令配置' },
-        { key: '3', tab: '参数项配置' }
-      ],
-      fixedAddForm: {},
-      fixedQueryForm: {},
-      // 是否显示生成查询配置抽屉
-      createQueryVisible: false,
-      // 是否显示修改设备品牌默认参数抽屉
-      editQueryVisible: false,
-      // 设备品牌详情加载
-      loadDeviceBrandDetails: true,
-      // 支持的指令保存加载
-      saveInstructTypeLoading: false,
-      // 穿梭框
-      mockData: [],
-      targetKeys: [],
-      leftColumns: leftTableColumns,
-      rightColumns: leftTableColumns
-    }
-  },
-  mounted () {
-    this.initView()
-  },
-  computed: {
-    ...mapGetters(['account/user']),
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    brandId: {
-      type: Number,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView () {
-      this.tabActiveKey = '1'
-      this.fixedQueryForm['m_f_brand_id'] = this.brandId
-      this.fixedAddForm['m_f_brand_id'] = this.brandId
-      this.getDeviceBrand(this.brandId)
-    },
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    // 通用徽标过滤器
-    badgeFilter (key, value) {
-      const object = this.$appdata.getParam(key)
-      if (object.hasOwnProperty(value)) {
-        return object[value]
-      } else {
-        return {
-          'status': 'default',
-          'text': '未知类型：' + value
-        }
-      }
-    },
-    // 获取设备品牌详情信息
-    getDeviceBrand (brandId) {
-      this.loadDeviceBrandDetails = true
-      return post(DeviceBrandDetailsViewApi.getDeviceBrandDetails, {
-        id: brandId
-      }).then(res => {
-          this.details = res
-          this.loadDeviceBrandDetails = false
-        }, err => {
-          this.loadDeviceBrandDetails = false
-          console.error(err)
-        })
-    },
-    // Tab切换
-    handleTabChange (key) {
-      this.tabActiveKey = key
-      if (key === '2') {
-        this.getDeviceBrandInstruct(this.details.f_type_id)
-      }
-    },
-    // 获取指令
-    getDeviceBrandInstruct (typeId) {
-      return post(DeviceBrandDetailsViewApi.getDeviceBrandInstructs, {
-        typeId: typeId
-      }).then(res => {
-        for (const i of res.keys()) {
-          res[i].key = res[i].key + ''
-          res[i].disabled = false
-        }
-        const instructKeys = this.details.f_instruct_array ? this.details.f_instruct_array : []
-        const resKeys = this.getRealTargetKeys(instructKeys, res)
-        this.mockData = res
-        this.targetKeys = resKeys
-      }, err => {
-        console.error(err)
-      })
-    },
-    // 穿梭框
-    onChange (nextTargetKeys) {
-      this.targetKeys = nextTargetKeys
-    },
-    getRowSelection ({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
-      const _this = this
-      return {
-        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
-        onSelectAll (selected, selectedRows) {
-          const treeSelectedKeys = selectedRows
-            .filter(item => !item.disabled)
-            .map(({ key }) => key)
-          const diffKeys = selected
-            ? _this.difference(treeSelectedKeys, selectedKeys)
-            : _this.difference(selectedKeys, treeSelectedKeys)
-          itemSelectAll(diffKeys, selected)
-        },
-        onSelect ({ key }, selected) {
-          itemSelect(key, selected)
-        },
-        selectedRowKeys: selectedKeys
-      }
-    },
-    difference (keysA, keysB) {
-      const result = []
-      let isSame = false
-      for (const itemA in keysA) {
-        for (const itemB in keysB) {
-          if (itemA === itemB) {
-            isSame = true
-            break
-          }
-        }
-        if (!isSame) {
-          result.push(itemA)
-        }
-      }
-      return Object.assign(result, keysA)
-    },
-    saveInstructType () {
-      this.saveInstructTypeLoading = true
-      const resKeys = this.getRealTargetKeys(this.targetKeys, this.mockData)
-      return post(DeviceBrandDetailsViewApi.updateBrandInstructKeys, {
-        brandId: this.brandId,
-        resKeys: resKeys
-      }).then(res => {
-        this.$message.success('保存成功')
-        this.getDeviceBrand(this.brandId)
-        this.saveInstructTypeLoading = false
-      }, err => {
-        console.error(err)
-        this.saveInstructTypeLoading = false
-      })
-    },
-    getRealTargetKeys (targetKeys, mockData) {
-      const resKeys = mockData.map(({ key }) => key)
-      for (const instructKey of targetKeys) {
-        for (const i in resKeys) {
-          if (instructKey === resKeys[i]) {
-            resKeys.splice(i, 1)
-          }
-        }
-      }
-      return resKeys
-    },
-    toCreateQuery () {
-      this.createQueryVisible = true
-    },
-    toEditQuery () {
-      this.editQueryVisible = true
-    },
-    // 获取参数项配置
-    getColumnJson (callback) {
-      let data
-      if (this.details.f_brand_set_params_json) {
-        data = JSON.parse(this.details.f_brand_set_params_json)
-      } else {
-        data = {}
-      }
-      if (callback) {
-        callback(data)
-      }
-      return data
-    },
-    // 存储查询配置信息
-    saveQueryParams (source) {
-      return post(DeviceBrandDetailsViewApi.updateDeviceBrandJsonParams, {
-        id: this.brandId,
-        source: source
-      }).then(res => {
-        this.$message.success('保存查询配置成功')
-        this.getDeviceBrand(this.brandId)
-      }, err => {
-        console.error(err)
-      })
-    },
-    // 存储设备品牌默认参数值
-    saveDeviceParams (source, callback) {
-      source['id'] = this.brandId
-      return post(DeviceBrandDetailsViewApi.updateDeviceDefaultParams, source).then(res => {
-        const result = true
-        callback(result)
-        this.initView()
-        this.tabActiveKey = '3'
-      }).catch(e => {
-        const result = false
-        callback(result)
-      })
-    }
-  },
-  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/DeviceBrandDetailsView/index.js

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

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

@@ -1,232 +0,0 @@
-<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-id="details.id" v-if="tabActiveKey === '2'"/>
-            <device-details-instruct :device-no="details.f_device_no" v-if="tabActiveKey === '3'"/>
-            <device-details-singular :device-id="details.id" v-if="tabActiveKey === '4'"/>
-            <device-details-instruct-operate :device="details" v-if="tabActiveKey === '5'"/>
-            <device-details-count :device-id="details.id" v-if="tabActiveKey === '6'"/>
-          </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 { DeviceDetailsViewApi, post } from '@vue2-client/services/api'
-import { mapState } from 'vuex'
-
-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: '指令操作' },
-        { key: '6', tab: '数据分析' }
-      ],
-      // 设备详情加载
-      loadDeviceDetails: true
-    }
-  },
-  mounted () {
-    this.initView()
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    deviceNo: {
-      type: String || Number,
-      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

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