vue2-client 0.1.1 → 1.2.0

package/src/base-client/components/iot/DataAnalysisViewGD/WindowTemplate/WindowInfotemp.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-show="showinfo">
+    <div id="window_test">
+      <div style="height: 35%">
+        <p style="margin: 5px">用户名称：{{ row.f_user_name }}</p>
+        <p style="margin: 5px">设备编号：123456</p>
+        <p style="margin: 5px">所在地址：{{ row.f_address }}</p>
+        <p style="margin: 5px">联&ensp;系&ensp;人：***(123456789110)</p>
+      </div>
+      <div style="border-top: 1px solid gray;border-bottom: 1px solid gray; padding: 10px 1px;height: 15%;margin:3px 0">
+        最近上报时间：2022-02-21 00:00:00
+      </div>
+      <div class="demo-infinite-container" style="height: 50%;overflow-y: scroll" >
+        <ul style="list-style: none;padding: 0;">
+          <li>
+            <div style="display: flex;border-bottom: 1px dashed gray;">
+              <div>
+                <p style="margin: 5px"><b>FPD102222066666_1</b></p>
+                <p style="margin: 5px">上报时间：2022-02-09 17:17:17</p>
+                <p style="margin: 5px">当前状态：正常</p>
+              </div>
+              <div style="display: flex;margin: auto;">
+                <div style="height: max-content;">检测数据：0</div>
+                <div style="height: max-content;">报警记录：0</div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div style="display: flex;border-bottom: 1px dashed gray;">
+              <div>
+                <p style="margin: 5px"><b>FPD102222066666_1</b></p>
+                <p style="margin: 5px">上报时间：2022-02-09 17:17:17</p>
+                <p style="margin: 5px">当前状态：正常</p>
+              </div>
+              <div style="display: flex;margin: auto;">
+                <div style="height: max-content;">检测数据：0</div>
+                <div style="height: max-content;">报警记录：0</div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div style="display: flex;border-bottom: 1px dashed gray;">
+              <div>
+                <p style="margin: 5px"><b>FPD102222066666_1</b></p>
+                <p style="margin: 5px">上报时间：2022-02-09 17:17:17</p>
+                <p style="margin: 5px">当前状态：正常</p>
+              </div>
+              <div style="display: flex;margin: auto;">
+                <div style="height: max-content;">检测数据：0</div>
+                <div style="height: max-content;">报警记录：0</div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'WindowInfoTemp',
+        props: {
+          'row': {
+            type: Object,
+            required: true
+          }
+        },
+        data () {
+          return {
+            showinfo: false
+          }
+        },
+      mounted () {
+      }
+    }
+</script>
+
+<style scoped>
+  /*滚动条样式*/
+  .demo-infinite-container::-webkit-scrollbar {
+    width: 4px;
+    /*height: 4px;*/
+  }
+  .demo-infinite-container::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0.2);
+  }
+  .demo-infinite-container::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    border-radius: 0;
+    background: rgba(0,0,0,0.1);
+
+  }
+  #window_test{
+    width: 400px; height: 300px;margin: 10px 0;
+  }
+</style>

package/src/base-client/components/iot/DataAnalysisViewGD/WindowTemplate/index.js

@@ -0,0 +1,3 @@
+import WindowInfotemp from './WindowInfotemp'
+
+export { WindowInfotemp }

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

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

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

@@ -0,0 +1,453 @@
+<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 } from '@vue2-client/services/api/DeviceBrandDetailsViewApi'
+import { post } from '@vue2-client/services/api/restTools'
+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: String,
+      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

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