vue2-client 0.1.1 → 1.2.0

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

@@ -0,0 +1,226 @@
+<template>
+  <a-drawer
+    title="客户详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-spin :spinning="loading">
+      <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="创建时间">{{ format(details.f_input_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
+              <a-descriptions-item label="所属大区">{{ details.f_region }}</a-descriptions-item>
+              <a-descriptions-item label="系统版本">
+                {{ details.f_system_version }}
+              </a-descriptions-item>
+              <a-descriptions-item label="数据库类型">
+                {{ details.f_data_source }}
+              </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="customerStateMap" :value="details.f_state" :is-external-text="true"/>
+                </div>
+              </a-col>
+            </a-row>
+            <p></p>
+            <a-row class="status-list">
+              <a-col :xs="12" :sm="24">
+                <div class="text">日志持久化状态</div>
+                <div class="heading">
+                  <x-badge badge-key="logPersistenceStateMap" :value="details.f_log_persistence" :is-external-text="true"/>
+                </div>
+              </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="loading">刷新</a-button>
+          </a-button-group>
+        </template>
+        <!-- 操作 -->
+        <a-card
+          style="margin-top: 24px"
+          :bordered="false"
+          :tabList="operationTabList"
+          :activeTabKey="operationActiveTabKey"
+          @tabChange="(key) => {this.operationActiveTabKey = key}"
+        >
+          <div v-if="operationActiveTabKey === '1'">
+            <a-descriptions layout="vertical" bordered>
+              <a-descriptions-item label="联系方式">{{ details.f_contact }}</a-descriptions-item>
+              <a-descriptions-item label="地址" span="2">{{ details.f_address }}</a-descriptions-item>
+              <a-descriptions-item label="备注">{{ details.f_remark }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+          <div v-else-if="operationActiveTabKey === '2'" class="no-data"><a-icon type="frown-o"/>暂无数据</div>
+        </a-card>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { formatDate } from '@vue2-client/utils/util'
+import { CustomerDetailsViewApi } from '@vue2-client/services/api/CustomerDetailsViewApi'
+import { post } from '@vue2-client/services/api/restTools'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'CustomerDetailsView',
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 客户详情
+      details: {
+        id: 0,
+        f_name: '',
+        f_region: '',
+        f_system_version: '',
+        f_contact: '',
+        f_address: '',
+        f_remark: '',
+        f_state: '正常',
+        f_input_date: '',
+        f_data_source: '',
+        f_log_persistence: '支持'
+      },
+      // 是否刷新加载中
+      loading: false,
+      operationTabList: [
+        {
+          key: '1',
+          tab: '基本信息'
+        },
+        {
+          key: '2',
+          tab: '操作日志'
+        }
+      ],
+      operationActiveTabKey: '1'
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    customerName: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.getCustomers(this.customerName)
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    getCustomers (customerName) {
+      this.loading = true
+      return post(CustomerDetailsViewApi.getCustomerDetails, {
+        customerName: customerName
+      })
+        .then(res => {
+          res.f_state = res.f_state === '1' ? '正常' : '停用'
+          this.details = res
+          this.loading = false
+        }, err => {
+          this.loading = false
+          console.warn(err)
+        })
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView()
+      }
+    }
+  }
+}
+</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;
+  }
+}
+
+.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/CustomerDetailsView/index.js

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

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

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

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

@@ -0,0 +1,127 @@
+<template>
+  <a-card
+    :closable="false"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    @close="onClose"
+  >
+    <!--<x-form-table
+      :queryParamsName="queryParamsName"
+      :isFormShow="false"
+      ref="xtablefrom"
+    >
+    </x-form-table>-->
+    <div
+      :style="{
+        position: 'absolute',
+        bottom: 0,
+        width: '100%',
+        borderTop: '1px solid #e8e8e8',
+        padding: '10px 16px',
+        textAlign: 'right',
+        left: 0,
+        background: '#fff',
+        borderRadius: '0 0 4px 4px',
+      }"
+    >
+    </div>
+  </a-card>
+</template>
+
+<script>
+  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+  import { mapState } from 'vuex'
+  export default {
+    components: {
+      XFormTable
+    },
+    data () {
+      return {
+        // 页面宽度
+        screenWidth: document.documentElement.clientWidth,
+        childrenDrawer: false,
+        queryParamsName: 'dataAnalysityQuery'
+      }
+    },
+    computed: {
+      ...mapState('setting', ['isMobile'])
+    },
+      props: {
+        address: {
+          type: Object,
+          default: () => {
+            return null
+          }
+        }
+    },
+    methods: {
+      onClose () {
+        this.$emit('onClose')
+      },
+      searchComm () {
+        console.log('看看走动没')
+        this.$refs.xtablefrom.getColumnsJson()
+      }
+    },
+    watch: {
+     }
+  }
+</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;
+    }
+  }
+
+  .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/DataAnalysisUser/index.js

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

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

@@ -0,0 +1,250 @@
+<template>
+  <a-row type="flex">
+    <baidu-map
+      :mapStyle="mapStyle"
+      class="bm-view"
+      :center="'西安'"
+      :scroll-wheel-zoom="true"
+      :zoom="zoom"
+      @ready="handler"
+      @click="searchClick"
+      ak="YOUR_APP_KEY">
+      <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
+      <bm-control :offset="{width: '10px', height: '10px'}">
+        <bm-auto-complete :sugStyle="{zIndex: 1}">
+          <a-input v-model="keyword" type="text" placeholder="地区信息搜索" style="width: 150px;height: 50px" /> <!-- 这里指代一个自定义搜索框组件 -->
+        </bm-auto-complete>
+      </bm-control>
+      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
+      <bm-local-search :keyword="keyword" :panel="false" :auto-viewport="true" zoom="12.8" style="display: none" ></bm-local-search>
+    </baidu-map>
+  </a-row>
+</template>
+
+<script>
+    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
+    import BmView from 'vue-baidu-map/components/map/MapView.vue'
+    import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
+    import BMCityList from 'vue-baidu-map/components/controls/CityList.vue'
+    import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
+    import BmControl from 'vue-baidu-map/components/others/AutoComplete'
+    import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'
+    export default {
+        components: {
+            BaiduMap,
+            BmNavigation,
+            BmView,
+            BMCityList,
+            BmGeolocation,
+            BmControl,
+            BmLocalSearch
+        },
+        data () {
+            return {
+              keyword: '',
+                center: {
+                    lng: 12131693.03,
+                    lat: 4063684.53
+                },
+                zoom: 17,
+                address: {
+                  propprovince: '', // 省
+                  propcity: '', // 市
+                  propcounty: '', // 县
+                  propaddress: '' // 详细地址
+                },
+              mapStyle: {
+                styleJson: [
+                  {
+                    featureType: 'water',
+                    elementType: 'all',
+                    stylers: {
+                      color: '#021019'
+                    }
+                  },
+                  {
+                    featureType: 'highway',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'highway',
+                    elementType: 'geometry.stroke',
+                    stylers: {
+                      color: '#147a92'
+                    }
+                  },
+                  {
+                    featureType: 'arterial',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'arterial',
+                    elementType: 'geometry.stroke',
+                    stylers: {
+                      color: '#0b3d51'
+                    }
+                  },
+                  {
+                    featureType: 'local',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'land',
+                    elementType: 'all',
+                    stylers: {
+                      color: '#08304b'
+                    }
+                  },
+                  {
+                    featureType: 'railway',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'railway',
+                    elementType: 'geometry.stroke',
+                    stylers: {
+                      color: '#08304b'
+                    }
+                  },
+                  {
+                    featureType: 'subway',
+                    elementType: 'geometry',
+                    stylers: {
+                      lightness: -70
+                    }
+                  },
+                  {
+                    featureType: 'building',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.text.fill',
+                    stylers: {
+                      color: '#857f7f'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.text.stroke',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'building',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#022338'
+                    }
+                  },
+                  {
+                    featureType: 'green',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#062032'
+                    }
+                  },
+                  {
+                    featureType: 'boundary',
+                    elementType: 'all',
+                    stylers: {
+                      color: '#1e1c1c'
+                    }
+                  },
+                  {
+                    featureType: 'manmade',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#022338'
+                    }
+                  },
+                  {
+                    featureType: 'poi',
+                    elementType: 'all',
+                    stylers: {
+                      visibility: 'off'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.icon',
+                    stylers: {
+                      visibility: 'off'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.text.fill',
+                    stylers: {
+                      color: '#2da0c6',
+                      visibility: 'on'
+                    }
+                  }
+                ]
+              }
+            }
+        },
+        methods: {
+            searchClick (e) {
+                const _this = this
+                this.longitude = e.point.lng// 经度
+                this.latitude = e.point.lat// 维度
+                this.center.lng = _this.longitude // 中心点
+                this.center.lat = _this.latitude// 中心点
+                // eslint-disable-next-line no-undef
+                const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
+                geocoder.getLocation(e.point, function (rs) {
+                    console.log(rs)
+                    _this.address.propprovince = rs.addressComponents.province // 省
+                    _this.address.propcity = rs.addressComponents.city // 市
+                    _this.address.propcounty = rs.addressComponents.district // 县
+                    _this.address.propaddress = rs.address// 详细地址
+                })
+                console.log('geocoder', _this.address)
+                this.$emit('togShow', _this.address)
+            },
+
+            handler ({ BMap, map }) {
+                console.log(BMap, map)
+                this.center.lng = 116.404
+                this.center.lat = 39.915
+                this.zoom = 15
+            }
+        },
+      watch: {
+        'keyword' (val) {
+          console.log(val)
+        }
+      }
+    }
+</script>
+
+<style>
+    .bm-view {
+        width: 100%;
+        height:500px;
+    }
+    .BMap_cpyCtrl {
+        display: none;
+    }
+    .anchorBL {
+        display: none;
+    }
+</style>

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

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