vue2-client 0.1.0 → 1.1.0

package/src/{components → base-client/components/iot}/MeterDetailsView/part/MeterDetailsMain.vue

@@ -1,247 +1,257 @@
-<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_meter_brand }}
-          </template>
-          <p class="card_details_value">{{ details.f_meter_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_meter_type }}
-          </template>
-          <p class="card_details_value">{{ details.f_meter_type }}</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_meternumber }}
-          </template>
-          <p class="card_details_value">{{ details.f_meternumber }}</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_meter_style }}
-          </template>
-          <p class="card_details_value">{{ details.f_meter_style }}</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_type }}
-          </template>
-          <p class="card_details_value">{{ details.f_type }}</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">剩余金额</p>
-        <a-tooltip>
-          <template slot="title">
-            {{ details.f_balance_amount }}
-          </template>
-          <p class="card_details_value">{{ details.f_balance_amount }}</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">累计用气量</p>
-        <a-tooltip>
-          <template slot="title">
-            {{ details.f_meter_base }}
-          </template>
-          <p class="card_details_value">{{ details.f_meter_base }}</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 Vue from 'vue'
-  import { businessApi } from '@/vue2-client/api/business'
-  import { formatDate } from '@/utils/util'
-  import { baseMixin } from '@/store/app-mixin'
-
-  export default {
-    name: 'MeterDetailsMain',
-    props: {
-      userid: {
-        type: String,
-        required: true
-      },
-      details: {
-        type: Object,
-        required: true
-      }
-    },
-    mounted () {
-      this.getWorkFlow()
-    },
-    mixins: [baseMixin],
-    data () {
-      return {
-        // 历史操作 展开/关闭
-        advanced: false,
-        workList: [],
-        loading: false
-      }
-    },
-    methods: {
-      format (date, format) {
-        return formatDate(date, format)
-      },
-      getWorkFlow () {
-        this.loading = true
-        Vue.resetpost(businessApi.meterManageDetailWorkFlow, { id: this.userid }).then(res => {
-          this.workList = []
-          for (let i = 0, len = res.length; i < len; i++) {
-            this.workList.push({
-              name: res[i].f_base_type,
-              type: res[i].f_type,
-              tableName: res[i].f_table_name,
-              date: res[i].f_date,
-              state: res[i].f_state,
-              info: res[i].f_info
-            })
-          }
-          this.loading = false
-        })
-      },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      }
-    },
-    watch: {
-      'userid' (val) {
-        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_meter_brand }}
+          </template>
+          <p class="card_details_value">{{ details.f_meter_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_meter_type }}
+          </template>
+          <p class="card_details_value">{{ details.f_meter_type }}</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_meternumber }}
+          </template>
+          <p class="card_details_value">{{ details.f_meternumber }}</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_meter_style }}
+          </template>
+          <p class="card_details_value">{{ details.f_meter_style }}</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_type }}
+          </template>
+          <p class="card_details_value">{{ details.f_type }}</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">剩余金额</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_balance_amount }}
+          </template>
+          <p class="card_details_value">{{ details.f_balance_amount }}</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">累计用气量</p>
+        <a-tooltip>
+          <template slot="title">
+            {{ details.f_meter_base }}
+          </template>
+          <p class="card_details_value">{{ details.f_meter_base }}</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 '@/utils/util'
+  import { post } from '@/services/api/restTools'
+  import { MeterDetailsViewApi } from '@/services/api/MeterDetailsViewApi'
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'MeterDetailsMain',
+    props: {
+      selectOrgName: {
+        type: String,
+        required: true
+      },
+      userid: {
+        type: String,
+        required: true
+      },
+      details: {
+        type: Object,
+        required: true
+      }
+    },
+    computed: {
+      ...mapState('setting', ['isMobile'])
+    },
+    mounted () {
+      this.getWorkFlow()
+    },
+    data () {
+      return {
+        // 历史操作 展开/关闭
+        advanced: false,
+        workList: [],
+        loading: false
+      }
+    },
+    methods: {
+      format (date, format) {
+        return formatDate(date, format)
+      },
+      getWorkFlow () {
+        this.loading = true
+        return post(MeterDetailsViewApi.getWorkFlowList, {
+          id: this.userid,
+          orgName: this.selectOrgName
+        }).then(res => {
+            this.workList = []
+            for (let i = 0, len = res.length; i < len; i++) {
+              this.workList.push({
+                name: res[i].f_base_type,
+                type: res[i].f_type,
+                tableName: res[i].f_table_name,
+                date: res[i].f_date,
+                state: res[i].f_state,
+                info: res[i].f_info
+              })
+            }
+            this.workList = this.workList.reverse()
+            this.loading = false
+          })
+      },
+      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>