vue2-client 1.0.0 → 1.2.1

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

@@ -1,380 +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 '@/utils/util'
-import { LogDetailsViewApi } from '@/services/api/LogDetailsViewApi'
-import { post } from '@/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>
+<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>