vue2-client 0.1.1 → 1.2.0

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

@@ -0,0 +1,380 @@
+<template>
+  <a-drawer
+    title="日志详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-spin :spinning="loadLogDetails">
+      <a-page-header
+        :title="details.f_log_type + ': '+details.f_error_title"
+      >
+        <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_service }}</a-descriptions-item>
+              <a-descriptions-item label="网络路径">{{ details.f_web_url }}</a-descriptions-item>
+              <a-descriptions-item label="源路径">{{ details.f_src }}</a-descriptions-item>
+              <a-descriptions-item label="简述">
+                {{ details.f_error_title }}
+              </a-descriptions-item>
+              <a-descriptions-item label="发生次数">
+                {{ details.f_times }}
+              </a-descriptions-item>
+              <a-descriptions-item label="首次发生时间">
+                {{ format(details.f_first_update_time,'yyyy-MM-dd hh:mm:ss') }}
+              </a-descriptions-item>
+              <a-descriptions-item label="最后发生时间">
+                {{ format(details.f_last_update_time,'yyyy-MM-dd hh:mm:ss') }}
+              </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="logTypeMap" :value="details.f_log_type" :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">
+                  <a-dropdown :trigger="['click']">
+                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
+                      <a-icon style="margin-right: 4px;" :type="details.f_status | statusIconFilter" :style="details.f_status | statusIconStyleFilter"/>
+                      <span style="color:rgba(0, 0, 0, 0.85);">{{ details.f_status }}</span>
+                      <a-icon type="edit" style="font-size: 14px;color:#999;cursor: pointer;"/>
+                    </a>
+                    <a-menu slot="overlay" style="margin-top: 10px;width: 200px;">
+                      <a-menu-item style="padding: 10px 15px;">
+                        <a @click="updateLogStatus('待办的')">
+                          <a-icon :type="'待办的' | statusIconFilter" :style="'待办的' | statusIconStyleFilter"/>
+                          待办的
+                        </a>
+                      </a-menu-item>
+                      <a-menu-item style="padding: 10px 15px;">
+                        <a @click="updateLogStatus('进行中')">
+                          <a-icon :type="'进行中' | statusIconFilter" :style="'进行中' | statusIconStyleFilter"/>
+                          进行中
+                        </a>
+                      </a-menu-item>
+                      <a-menu-item style="padding: 10px 15px;">
+                        <a @click="updateLogStatus('已完成')">
+                          <a-icon :type="'已完成' | statusIconFilter" :style="'已完成' | statusIconStyleFilter"/>
+                          已完成
+                        </a>
+                      </a-menu-item>
+                      <a-menu-item style="padding: 10px 15px;">
+                        <a @click="updateLogStatus('已关闭')">
+                          <a-icon :type="'已关闭' | statusIconFilter" :style="'已关闭' | statusIconStyleFilter"/>
+                          已关闭
+                        </a>
+                      </a-menu-item>
+                    </a-menu>
+                  </a-dropdown>
+                </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="loadLogDetails">刷新</a-button>
+          </a-button-group>
+        </template>
+
+        <!-- 操作 -->
+        <a-card :bordered="false" title="处理情况">
+          <a-timeline :reverse="true">
+            <a-timeline-item color="#666">
+              <a-icon slot="dot" type="plus-square" style="font-size: 16px;" />
+              异常检测模块 捕获到了异常事件
+              <span style="padding-left: 5px;font-size: 12px;color:#8c92a4;">{{ format(details.f_first_update_time,'yyyy-MM-dd hh:mm:ss') }}</span>
+            </a-timeline-item>
+            <a-timeline-item color="red">
+              <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
+              异常检测模块 已确认最后发生时间
+              <span style="padding-left: 5px;font-size: 12px;color:#8c92a4;">{{ format(details.f_last_update_time,'yyyy-MM-dd hh:mm:ss') }}</span>
+            </a-timeline-item>
+            <a-timeline-item :key="index" v-for="(item, index) in eventList">
+              <a-icon slot="dot" :type="item.f_info | eventIconFilter" :style="item.f_info | eventIconStyleFilter"/>
+              {{ item.f_china_name }} {{ item.f_info }}
+              <span style="padding-left: 5px;font-size: 12px;color:#8c92a4;">{{ format(item.f_input_date,'yyyy-MM-dd hh:mm:ss') }}</span>
+            </a-timeline-item>
+          </a-timeline>
+        </a-card>
+        <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="日志内容"><p style="margin: 0;white-space: pre;" v-html="details.f_error_msg === '' ? '--' : toText(details.f_error_msg)"></p></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 { LogDetailsViewApi } from '@vue2-client/services/api/LogDetailsViewApi'
+import { post } from '@vue2-client/services/api/restTools'
+import { mapState } from 'vuex'
+
+const statusIconMap = {
+  '待办的': {
+    icon: 'info-circle',
+    style: 'color: #fe7300;'
+  },
+  '进行中': {
+    icon: 'clock-circle',
+    style: 'color: #2d81d7;'
+  },
+  '已完成': {
+    icon: 'check-circle',
+    style: 'color:#4baf50;'
+  },
+  '已关闭': {
+    icon: 'issues-close',
+    style: 'color:#ec0019;'
+  }
+}
+
+const eventIconMap = {
+  '开始处理事件': {
+    icon: 'forward',
+    style: 'color: #fe7300;'
+  },
+  '将事件状态修改为 代办的': {
+    icon: 'edit',
+    style: 'color: #2d81d7;'
+  },
+  '将事件状态修改为 已关闭': {
+    icon: 'issues-close',
+    style: 'color:#ec0019;'
+  },
+  '已完成对事件的处理': {
+    icon: 'check-circle',
+    style: 'color:#4baf50;'
+  }
+}
+
+export default {
+  name: 'LogDetailsView',
+  data () {
+    return {
+      // 日志ID
+      id: 0,
+      // 日志详情加载,
+      loadLogDetails: true,
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 日志详情
+      details: {
+        id: 0,
+        f_service: '',
+        f_src: '',
+        f_web_url: '',
+        f_log_type: '',
+        f_error_title: '',
+        f_times: '',
+        f_first_update_time: '',
+        f_last_update_time: '',
+        f_status: '待办的',
+        f_error_msg: ''
+      },
+      // 处理情况数组
+      eventList: [],
+      // 处理情况描述
+      remark: '',
+      operationTabList: [
+        {
+          key: '1',
+          tab: '基本信息'
+        }
+      ],
+      operationActiveTabKey: '1'
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  filters: {
+    statusIconFilter (type) {
+      return statusIconMap[type].icon
+    },
+    statusIconStyleFilter (type) {
+      return statusIconMap[type].style
+    },
+    eventIconFilter (type) {
+      return eventIconMap[type].icon
+    },
+    eventIconStyleFilter (type) {
+      return eventIconMap[type].style
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    logid: {
+      type: String,
+      required: true
+    },
+    selectOrgName: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.getLog(this.logid, this.selectOrgName)
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 获取日志详情信息
+    getLog (logId, selectOrgName) {
+      this.loadLogDetails = true
+      return post(LogDetailsViewApi.getLogDetails, {
+        id: logId,
+        orgName: selectOrgName
+      })
+        .then(res => {
+          this.details = res
+          this.getRecord()
+          this.loadLogDetails = false
+        }, err => {
+          this.loadLogDetails = false
+          console.warn(err)
+        })
+    },
+    getRecord () {
+      return post(LogDetailsViewApi.getLogRecordList, {
+        pageNo: 1,
+        pageSize: 500,
+        dataId: this.logid,
+        type: '异常处理',
+        orgName: this.selectOrgName
+      })
+        .then(res => {
+          this.eventList = res.data.reverse()
+        })
+    },
+    updateLogStatus (status) {
+      if (this.loadLogDetails) {
+        return
+      }
+      const _this = this
+      return post(LogDetailsViewApi.updateLogStatusData, {
+        id: _this.logid,
+        status: status,
+        orgName: _this.selectOrgName,
+        username: _this.currUser.name
+      }).then(res => {
+        _this.getLog(_this.logid, _this.selectOrgName)
+        if (res.nums === 1) {
+          _this.$message.success('操作成功')
+        } else {
+          _this.$message.error('操作失败')
+        }
+      })
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    toText (text) {
+      return text
+        .replace(new RegExp('<-', 'g'), '<span style="color: red;font-weight: bold;"><-</span>')
+        .replace(new RegExp('Caused by:', 'g'), '<span style="color: red;font-weight: bold;">Caused by:</span>')
+    }
+  },
+  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/LogDetailsView/index.js

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

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

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