vue2-client 1.2.0 → 1.2.1

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

@@ -1,225 +1,225 @@
-<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-col>
-    </a-card>
-  </div>
-</template>
-<script>
-  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 () {
-    },
-    data () {
-      return {
-        // 历史操作 展开/关闭
-        advanced: false,
-        workList: [],
-        loading: false
-      }
-    },
-    methods: {
-      format (date, format) {
-        return formatDate(date, format)
-      },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      }
-    },
-    watch: {
-      'userid' () {
-        this.getWorkFlow()
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-  .card_view {
-    width: 70%;
-    min-width: 700px;
-  }
-
-  .card_view_mobile {
-    width: 100%;
-  }
-
-  .card_details_title {
-    margin: 4px 0;
-    font-size: 14px;
-  }
-
-  .card_details_value {
-    font-size: 16px;
-    font-weight: bold;
-    color: #444;
-    margin-bottom: 0;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-  }
-
-  .card_guid {
-    width: 25%;
-    text-align:left;
-  }
-
-  .card_guid_mobile {
-    width: 50%;
-    text-align:left;
-  }
-
-  .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;
-    }
-  }
-</style>
+<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-col>
+    </a-card>
+  </div>
+</template>
+<script>
+  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 () {
+    },
+    data () {
+      return {
+        // 历史操作 展开/关闭
+        advanced: false,
+        workList: [],
+        loading: false
+      }
+    },
+    methods: {
+      format (date, format) {
+        return formatDate(date, format)
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      }
+    },
+    watch: {
+      'userid' () {
+        this.getWorkFlow()
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .card_view {
+    width: 70%;
+    min-width: 700px;
+  }
+
+  .card_view_mobile {
+    width: 100%;
+  }
+
+  .card_details_title {
+    margin: 4px 0;
+    font-size: 14px;
+  }
+
+  .card_details_value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #444;
+    margin-bottom: 0;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+
+  .card_guid {
+    width: 25%;
+    text-align:left;
+  }
+
+  .card_guid_mobile {
+    width: 50%;
+    text-align:left;
+  }
+
+  .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;
+    }
+  }
+</style>