vue2-client 0.1.0 → 1.1.0

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

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

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

@@ -0,0 +1,48 @@
+# WebmeterAnalysisView 物联网表综合分析页
+
+提供一个可以对物联网表模块综合分析，展示图表，排行等汇总数据界面的抽屉实现
+
+
+
+## 何时使用
+
+允许用户查看物联网表模块整体的综合分析图表，排行等汇总数据。
+
+
+
+引用方式：
+
+```javascript
+import WebmeterAnalysisView from '@/base-client/components/WebmeterAnalysisView'
+
+export default {
+    components: {
+      WebmeterAnalysisView
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<webmeter-analysis-view
+  :visible.sync="detailVisible"
+  :select-org-name="selectOrgName"
+  :webmeter-url="selectUrl"
+  :system-version="selectSystemVersion"
+  :data-source="selectDataSource"
+  v-if="selectUrl"
+/>
+```
+
+## API
+
+| 参数            | 说明        | 类型      | 默认值   |
+|---------------|-----------|---------|-------|
+| visible       | 是否显示      | Boolean | false |
+| selectOrgName | 燃气公司客户名   | String  | null  |
+| webmeterUrl   | 物联网表服务名   | String  | null  |
+| systemVersion | 系统所属版本    | String  | null  |
+| dataSource    | 系统所属数据库版本 | String  | null  |

package/src/base-client/components/system/DictionaryDetailsView/DictionaryDetailsView.vue

@@ -0,0 +1,232 @@
+<template>
+  <a-drawer
+    title="字典详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-spin :spinning="loadDetails">
+      <a-page-header
+        :title="'字典名称：' + details.f_name"
+      >
+        <div class="row">
+          <div class="content">
+            <a-descriptions size="small" :column="isMobile ? 1 : 2">
+              <a-descriptions-item label="字典编号">{{ details.id }}</a-descriptions-item>
+              <a-descriptions-item label="字典键">{{ details.f_key }}</a-descriptions-item>
+              <a-descriptions-item label="备注">{{ details.f_remark }}</a-descriptions-item>
+              <a-descriptions-item label="创建时间">{{ format(details.f_input_date) }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+          <div class="extra">
+            <a-row class="status-list">
+              <a-col :xs="12" :sm="24">
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+        <!-- actions -->
+        <template v-slot:extra>
+          <a-button-group style="margin-right: 4px;">
+            <a-button type="dashed" @click="initView" :loading="loadDetails">刷新</a-button>
+          </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="!loadDetails">
+            <template v-if="tabActiveKey === '1'">
+              <x-form-table
+                title="字典数据配置"
+                :fixed-add-form="fixedAddForm"
+                :fixed-query-form="fixedQueryForm"
+                queryParamsName="dictionaryValueQueryParams"
+                @afterSubmit="afterSubmit"
+              >
+              </x-form-table>
+            </template>
+          </div>
+        </template>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { DictionaryDetailsViewApi } from '@/services/api/DictionaryDetailsViewApi'
+import { post } from '@/services/api/restTools'
+import { mapState } from 'vuex'
+import { formatDate } from '@/utils/util'
+import XFormTable from '@/base-client/components/common/XFormTable/XFormTable'
+
+export default {
+  name: 'DictionaryDetailsView',
+  components: {
+    XFormTable
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // Tab页签
+      tabActiveKey: '1',
+      // 字典详情
+      details: {
+        id: 0,
+        f_name: '',
+        f_key: '',
+        f_remark: '',
+        f_input_date: '',
+        f_state: 0
+      },
+      tabList: [
+        { key: '1', tab: '字典数据' }
+      ],
+      // 固定新增数据
+      fixedAddForm: {},
+      // 固定查询数据
+      fixedQueryForm: {},
+      // 详情加载
+      loadDetails: true
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.tabActiveKey = '1'
+      this.fixedQueryForm['v_f_dictionary_id'] = this.id
+      this.fixedAddForm['v_f_dictionary_id'] = this.id
+      this.getDetails(this.id)
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 获取详情信息
+    getDetails (userId) {
+      this.loadDetails = true
+      return post(DictionaryDetailsViewApi.getDictionaryDetails, {
+        id: userId
+      })
+        .then(res => {
+          this.details = res
+          this.loadDetails = false
+        }, err => {
+          this.loadDetails = false
+          console.error(err)
+        })
+    },
+    // Tab切换
+    handleTabChange (key) {
+      this.tabActiveKey = key
+    },
+    // 日期格式化
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    afterSubmit () {
+      this.$appdata.load()
+    }
+  },
+  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/system/DictionaryDetailsView/index.js

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

package/src/base-client/components/system/DictionaryDetailsView/index.md

@@ -0,0 +1,41 @@
+# DictionaryDetailsView 字典详情页
+
+提供一个可以对单个字典项进行一系列通用业务操作的抽屉实现
+
+
+
+## 何时使用
+
+允许用户对单个字典项进行一系列通用业务操作，常用于作为字典详情页的通用实现。
+
+
+
+引用方式：
+
+```javascript
+import DictionaryDetailsView from '@/base-client/components/DictionaryDetailsView'
+
+export default {
+    components: {
+      DictionaryDetailsView
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<dictionary-details-view
+  :visible.sync="detailVisible"
+  :id="selectId"
+  v-if="selectId" />
+```
+
+## API
+
+| 参数      | 说明   | 类型      | 默认值   |
+|---------|------|---------|-------|
+| visible | 是否显示 | Boolean | false |
+| id      | ID   | String  | null  |

package/src/base-client/components/system/QueryParamsDetailsView/QueryParamsDetailsView.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <a-drawer
+      title="查询配置详情"
+      placement="right"
+      :width="isMobile ? screenWidth : screenWidth * 0.85"
+      :visible="visible"
+      @close="onClose"
+    >
+      <create-query
+        :to-edit-json="getColumnJson()"
+        :visible.sync="createQueryVisible"
+        @saveQueryParams="saveQueryParams"
+      />
+      <a-spin :spinning="loadDetails">
+        <a-page-header :title="details.f_name+(details.f_remark ? '（' + details.f_remark + '）' : '')">
+          <div class="row">
+            <div class="content">
+              <a-descriptions size="small" :column="isMobile ? 1 : 2">
+                <a-descriptions-item label="所属模块">{{ details.f_module }}</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-item label="描述">{{ details.f_remark }}</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="loadDetails">刷新</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="!loadDetails">
+              <div v-if="tabActiveKey === '1'">
+                <a-button type="primary" @click="toCreateQuery">
+                  <a-icon :style="iconStyle" type="api"/>编辑查询配置
+                </a-button>
+                <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>
+  </div>
+</template>
+
+<script>
+import JsonViewer from 'vue-json-viewer'
+import { mapState, mapGetters } from 'vuex'
+import { post } from '@/services/api/restTools'
+import XFormTable from '@/base-client/components/common/XFormTable/XFormTable'
+import { QueryParamsDetailsViewApi } from '@/services/api/QueryParamsDetailsViewApi'
+
+export default {
+  name: 'DeviceTypeDetailsView',
+  components: {
+    JsonViewer,
+    XFormTable
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // Tab页签
+      tabActiveKey: '1',
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      },
+      // 是否显示生成查询配置抽屉
+      createQueryVisible: false,
+      // 设备类型详情
+      details: {
+        f_module: '',
+        f_name: '',
+        f_remark: '',
+        f_content: '',
+        f_input_date: '',
+        f_inputtor: ''
+      },
+      tabList: [
+        { key: '1', tab: '编辑查询配置' }
+      ],
+      // 详情加载
+      loadDetails: false
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapGetters(['account/user']),
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.tabActiveKey = '1'
+      this.getDetails(this.id)
+    },
+    toCreateQuery () {
+      this.createQueryVisible = true
+    },
+    getColumnJson () {
+      if (this.details.f_content) {
+        return JSON.parse(this.details.f_content)
+      } else {
+        return {}
+      }
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 获取详情信息
+    getDetails (id) {
+      this.loadDetails = true
+      return post(QueryParamsDetailsViewApi.getQueryParamsDetails, {
+        id: id
+      }).then(res => {
+        this.details = res
+        this.loadDetails = false
+      }, err => {
+        this.loadDetails = false
+        console.error(err)
+      })
+    },
+    // 存储查询配置信息
+    saveQueryParams (source) {
+      return post('/webmeterapi/updateQueryParamsData', {
+        id: this.id,
+        source: source
+      }).then(res => {
+        this.$message.success('保存查询配置成功')
+        this.getDetails(this.id)
+      }, err => {
+        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/system/QueryParamsDetailsView/index.js

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