vue2-client 1.2.49 → 1.2.50

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

@@ -29,8 +29,7 @@ export default {
 ```html
 <log-details-view
   :visible.sync="detailVisible"
-  :customer-name="selectOrgName"
-  v-if="selectOrgName" />
+/>
 ```
 
 ## API

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

@@ -190,7 +190,7 @@ export default {
   },
   props: {
     brandId: {
-      type: String,
+      type: String || Number,
       required: true
     },
     visible: {

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

@@ -49,7 +49,6 @@
             <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'"/>
-            <AmapPointRendering :markers="details" :describeList="describeList" v-if="tabActiveKey === '6'"/>
           </div>
         </template>
       </a-page-header>
@@ -101,11 +100,7 @@ export default {
         { key: '6', tab: '设备位置' }
       ],
       // 设备详情加载
-      loadDeviceDetails: true,
-      describeList: [
-        { describe: '设备号', field: 'f_device_no' },
-        { describe: '设备型号', field: 'f_brand' }
-      ]
+      loadDeviceDetails: true
     }
   },
   mounted () {
@@ -117,7 +112,7 @@ export default {
   },
   props: {
     deviceNo: {
-      type: String,
+      type: String || Number,
       required: true
     },
     visible: {

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

@@ -29,7 +29,6 @@ export default {
 ```html
 <meter-details-view
   :visible.sync="detailVisible"
-  :select-org-name="selectOrgName"
   :userid="selectUserId"
   v-if="selectUserId" />
 ```
@@ -39,5 +38,4 @@ export default {
 | 参数            | 说明      | 类型      | 默认值   |
 |---------------|---------|---------|-------|
 | visible       | 是否显示    | Boolean | false |
-| selectOrgName | 燃气公司客户名 | String  | null  |
 | userid        | 表档案ID   | String  | null  |

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

@@ -1,57 +1,57 @@
-<template>
-  <a-card :bordered="false">
-    <x-form-table
-      v-if="tabActiveKey === '1'"
-      :queryParamsName="queryParamsName"
-      :fixedQueryForm="fixedQueryForm"
-      @onSubmit="onSubmit"
-      @action="toDetail">
-    </x-form-table>
-  </a-card>
-</template>
-
-<script>
-  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-
-  export default {
-    name: 'DeviceDetailsException',
-    components: {
-      XFormTable
-    },
-    data () {
-      return {
-        // 选中的异常编号
-        selectSingularId: undefined,
-        tabActiveKey: undefined,
-        fixedQueryForm: {},
-        // 查询配置文件名
-        queryParamsName: 'deviceToExceptionQueryParams',
-        // 是否显示设置设备参数详情抽屉
-        detailVisible: false
-      }
-    },
-    props: {
-      deviceId: {
-        type: Number,
-        required: true
-      }
-    },
-    mounted () {
-      this.initView()
-    },
-    methods: {
-      initView () {
-        this.tabActiveKey = '1'
-        this.fixedQueryForm['e_f_device_id'] = this.deviceId
-      },
-      onSubmit (res) {
-        res.form['e_f_device_id'] = this.deviceId
-        this.$emit('onSubmit', res)
-      },
-      toDetail (record, id) {
-        // this.selectSingularId = record.id + ''
-        // this.detailVisible = true
-      }
-    }
-  }
-</script>
+<template>
+  <a-card :bordered="false">
+    <x-form-table
+      v-if="tabActiveKey === '1'"
+      :queryParamsName="queryParamsName"
+      :fixedQueryForm="fixedQueryForm"
+      @onSubmit="onSubmit"
+      @action="toDetail">
+    </x-form-table>
+  </a-card>
+</template>
+
+<script>
+  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+
+  export default {
+    name: 'DeviceDetailsException',
+    components: {
+      XFormTable
+    },
+    data () {
+      return {
+        // 选中的异常编号
+        selectSingularId: undefined,
+        tabActiveKey: undefined,
+        fixedQueryForm: {},
+        // 查询配置文件名
+        queryParamsName: 'deviceToExceptionQueryParams',
+        // 是否显示设置设备参数详情抽屉
+        detailVisible: false
+      }
+    },
+    props: {
+      deviceId: {
+        type: Number,
+        required: true
+      }
+    },
+    mounted () {
+      this.initView()
+    },
+    methods: {
+      initView () {
+        this.tabActiveKey = '1'
+        this.fixedQueryForm['e_f_device_id'] = this.deviceId
+      },
+      onSubmit (res) {
+        res.form['e_f_device_id'] = this.deviceId
+        this.$emit('onSubmit', res)
+      },
+      toDetail (record, id) {
+        // this.selectSingularId = record.id + ''
+        // this.detailVisible = true
+      }
+    }
+  }
+</script>

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

@@ -1,225 +1,269 @@
 <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-row :gutter="24">
+      <a-col :span="12">
+        <a-card :bordered="false" title="基本信息">
+          <a-row>
+            <a-col :span="8">
+              <device-brand-details-view
+                :visible.sync="deviceBrandDetailVisible"
+                :brand-id="details.f_brand_id"
+                v-if="details.f_brand_id"
+              />
+              <a-card-grid class="card_guid" @click="toggleDeviceBrandDetailsView">
+                <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-col>
+            <a-col :span="8">
+              <device-type-details-view
+                :visible.sync="deviceTypeDetailVisible"
+                :type-id="details.f_type_id"
+                v-if="details.f_type_id"
+              />
+              <a-card-grid class="card_guid" @click="toggleDeviceTypeDetailsView">
+                <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-col>
+            <a-col :span="8">
+              <a-card-grid class="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-col>
+          </a-row>
+          <a-row>
+            <a-col :span="8">
+              <a-card-grid class="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-col>
+            <a-col :span="8">
+              <a-card-grid class="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-col>
+            <a-col :span="8">
+              <a-card-grid class="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-col>
+          </a-row>
+          <a-row>
+            <a-col :span="8">
+              <a-card-grid class="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-col>
+            <a-col :span="8">
+              <a-card-grid class="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-col>
+          </a-row>
+        </a-card>
       </a-col>
-    </a-card>
+      <a-col :span="12">
+        <a-card :bordered="false" title="设备位置" :loading="loading">
+          <AmapPointRendering :markers="details" :describeList="describeList" :mapStyle="{width: '100%',height: '381px',border: '2px solid lightgray','border-radius': '5px'}"/>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row>
+      <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>
+    </a-row>
   </div>
 </template>
 <script>
-  import { formatDate } from '@vue2-client/utils/util'
-  import { mapState } from 'vuex'
+import { formatDate } from '@vue2-client/utils/util'
+import { mapState } from 'vuex'
 
-  export default {
-    name: 'DeviceDetailsMain',
-    props: {
-      details: {
-        type: Object,
-        required: true
-      }
-    },
-    computed: {
-      ...mapState('setting', ['isMobile'])
-    },
-    mounted () {
+export default {
+  name: 'DeviceDetailsMain',
+  props: {
+    details: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile'])
+  },
+  mounted () {
+  },
+  data () {
+    return {
+      // 历史操作 展开/关闭
+      advanced: false,
+      workList: [],
+      loading: false,
+      describeList: [
+        { describe: '设备号', field: 'f_device_no' },
+        { describe: '设备型号', field: 'f_brand' }
+      ],
+      // 设备品牌详情抽屉
+      deviceBrandDetailVisible: false,
+      // 设备类型详情抽屉
+      deviceTypeDetailVisible: false
+    }
+  },
+  methods: {
+    format (date, format) {
+      return formatDate(date, format)
     },
-    data () {
-      return {
-        // 历史操作 展开/关闭
-        advanced: false,
-        workList: [],
-        loading: false
-      }
+    toggleAdvanced () {
+      this.advanced = !this.advanced
     },
-    methods: {
-      format (date, format) {
-        return formatDate(date, format)
-      },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      }
+    toggleDeviceBrandDetailsView () {
+      this.deviceBrandDetailVisible = !this.deviceBrandDetailVisible
     },
-    watch: {
-      'userid' () {
-        this.getWorkFlow()
-      }
+    toggleDeviceTypeDetailsView () {
+      this.deviceTypeDetailVisible = !this.deviceTypeDetailVisible
+    }
+  },
+  watch: {
+    'userid' () {
+      this.getWorkFlow()
     }
   }
+}
 </script>
 
 <style lang="less" scoped>
-  .card_view {
-    width: 70%;
-    min-width: 700px;
-  }
+.card_details_title {
+  margin: 4px 0;
+  font-size: 14px;
+}
 
-  .card_view_mobile {
-    width: 100%;
-  }
+.card_details_value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #444;
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
 
-  .card_details_title {
-    margin: 4px 0;
-    font-size: 14px;
-  }
+.card_guid {
+  width: 100%;
+  text-align:left;
+  cursor: pointer;
+}
 
-  .card_details_value {
-    font-size: 16px;
-    font-weight: bold;
-    color: #444;
-    margin-bottom: 0;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-  }
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, .45);
+}
 
-  .card_guid {
-    width: 25%;
-    text-align:left;
-  }
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
 
-  .card_guid_mobile {
-    width: 50%;
-    text-align:left;
+.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: 44px;
+    margin-left: unset;
   }
   .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;
-    }
+  .status-list {
+    text-align: left;
   }
+}
 </style>