vue2-client 1.0.0 → 1.2.1

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

@@ -1,472 +1,472 @@
-<template>
-  <a-drawer
-    title="指令详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <a-spin :spinning="loadInstructDetails">
-      <meter-details-view
-        :visible.sync="detailVisible"
-        :select-org-name="selectOrgName"
-        :userid="selectUserId"
-        v-if="selectUserId && isShowUserFiles"
-      />
-      <a-page-header
-        :title="'指令：' + details.f_instruct_type"
-      >
-        <div class="row">
-          <div class="content">
-            <a-descriptions size="small" :column="isMobile ? 1 : 2">
-              <a-descriptions-item label="指令编号" :span="isMobile ? 1 : 2">{{ details.id }}</a-descriptions-item>
-              <a-descriptions-item label="表编号">
-                <a v-if="isShowUserFiles" @click="openUserFilesDetails">{{ details.userid }}</a>
-                <span v-else>{{ details.userid }}</span>
-              </a-descriptions-item>
-              <a-descriptions-item label="表号">{{ details.f_meternumber }}</a-descriptions-item>
-              <a-descriptions-item label="操作人员">{{ details.f_inputtor }}</a-descriptions-item>
-              <a-descriptions-item label="指令说明">{{ details.f_instruct_title }}</a-descriptions-item>
-              <a-descriptions-item label="生成时间">{{ format(details.f_instruct_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
-              <a-descriptions-item label="表厂别名">{{ details.f_alias }}</a-descriptions-item>
-              <a-descriptions-item label="最后发送时间">{{ format(details.f_send_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
-              <a-descriptions-item label="最后响应时间">{{ format(details.f_callback_date,'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 :value="details.f_instruct_state" badge-key="instructStateMap" :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">{{ details.f_receive_state }}</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="loadInstructDetails">刷新</a-button>
-          </a-button-group>
-          <a-button-group style="margin-right: 4px;">
-            <a-popover title="重新发送" placement="bottomLeft">
-              <template slot="content">
-                <p>将指令标记为待发送状态</p>
-                <p>指令将在 定时器轮询/表具上报 后重新发送</p>
-                <p style="color: red">此操作不可撤销</p>
-              </template>
-              <a-button type="primary" @click="againSend(details.id)" :disabled="againSendBtnHide()">重新发送</a-button>
-            </a-popover>
-            <a-popover title="取消发送" placement="bottomLeft">
-              <template slot="content">
-                <p>该指令将被<span style="color: red;font-weight: bold">取消</span>，请谨慎操作</p>
-                <p>只有待发送或已发送的指令可以取消发送</p>
-                <p style="color: red">此操作不可撤销</p>
-              </template>
-              <a-button type="danger" @click="cancelSend(details.id)" :disabled="cancelSendBtnHide()">取消发送</a-button>
-            </a-popover>
-          </a-button-group>
-        </template>
-
-        <!-- 操作 -->
-        <a-card :bordered="false" title="指令状态">
-          <a-steps :direction="'horizontal'" :current="step" :status="status">
-            <a-step>
-              <template v-slot:title><span>待发送</span></template>
-              <template v-slot:description>
-                <div>指令已经就绪，待发送<div>{{ format(details.f_instruct_date,'yyyy-MM-dd hh:mm:ss') }}</div></div>
-              </template>
-            </a-step>
-            <a-step>
-              <template v-slot:title><span>已发送</span></template>
-              <template v-slot:description>
-                <div>{{ getIntroduction() }}<div>{{ format(details.f_send_date,'yyyy-MM-dd hh:mm:ss') }}</div></div>
-              </template>
-            </a-step>
-            <a-step>
-              <template v-slot:title><span>{{ instructResult }}</span></template>
-              <template v-slot:description>
-                <div>{{ getResultText(instructResult) }}<div>{{ format(details.f_callback_date,'yyyy-MM-dd hh:mm:ss') }}</div></div>
-              </template>
-            </a-step>
-          </a-steps>
-        </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-card type="inner" title="指令内容">
-              <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="details.f_instruct_content === undefined ? {} : toJSON(details.f_instruct_content)"></json-viewer>
-            </a-card>
-            <a-card type="inner" title="指令元数据">
-              <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="details.f_instruct_meta_data === undefined ? {} : toJSON(details.f_instruct_meta_data)"></json-viewer>
-            </a-card>
-          </div>
-
-          <x-table
-            v-if="loaded && operationActiveTabKey === '2'"
-            :json-data="showColumns"
-            :queryParamsName="queryParamsName"
-            @loadData="loadData"
-            :form="form"
-          />
-          <div v-else-if="operationActiveTabKey === '3'" class="no-data"><a-icon type="frown-o"/>暂无数据</div>
-        </a-card>
-      </a-page-header>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-import JsonViewer from 'vue-json-viewer'
-import { formatDate } from '@/utils/util'
-import { InstructDetailsViewApi } from '@/services/api/InstructDetailsViewApi'
-import { post } from '@/services/api/restTools'
-import { query, commonApi } from '@/services/api/common'
-import XTable from '@/base-client/components/common/XTable/XTable'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'InstructDetailsView',
-  components: {
-    JsonViewer,
-    XTable
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 指令详情
-      details: {
-        id: 0,
-        userid: 0,
-        f_meternumber: '',
-        f_instruct_type: '',
-        f_instruct_title: '',
-        f_instruct_state: '待发送',
-        f_receive_state: '',
-        f_inputtor: '',
-        f_alias: '',
-        f_instruct_date: '',
-        f_send_date: '',
-        f_callback_date: '',
-        f_instruct_meta_data: {},
-        f_instruct_content: {}
-      },
-      // 当前步骤
-      step: 0,
-      // 当前状态,
-      status: 'process',
-      // 指令状态结果
-      instructResult: '执行成功',
-      // 档案详情组件显示
-      detailVisible: false,
-      // 查询的档案id
-      selectUserId: undefined,
-      // 档案id
-      userId: undefined,
-      // 指令详情加载
-      loadInstructDetails: true,
-      // 查询配置文件名
-      queryParamsName: 'recordQueryParams',
-      // 查询列集合
-      showColumns: [],
-      // queryJson加载是否完成
-      loaded: false,
-      // 查询操作日志表单
-      form: {
-        f_data_id: this.instructid,
-        f_org_name: this.selectOrgName
-      },
-      operationTabList: [
-        {
-          key: '1',
-          tab: '开发者信息'
-        },
-        {
-          key: '2',
-          tab: '操作日志'
-        },
-        {
-          key: '3',
-          tab: '维护教程'
-        }
-      ],
-      operationActiveTabKey: '1'
-    }
-  },
-  created () {
-    this.getColumnsJson()
-  },
-  mounted () {
-    this.initView()
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    instructid: {
-      type: String,
-      required: true
-    },
-    selectOrgName: {
-      type: String,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    isShowUserFiles: {
-      type: Boolean,
-      default: true
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView () {
-      this.getInstruct(this.instructid, this.selectOrgName)
-    },
-    // 获取查询配置JSON
-    getColumnsJson () {
-      post(commonApi.getColumnsJson, { str: this.queryParamsName }).then((res) => {
-        this.showColumns = res.columnJson
-        this.loaded = true
-      })
-    },
-    // 关闭抽屉时回调
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    // 加载xTable数据
-    loadData (requestParameters, callback) {
-      callback(query(requestParameters))
-    },
-    // 获取指令详情信息
-    getInstruct (instructId, selectOrgName) {
-      this.loadInstructDetails = true
-      return post(InstructDetailsViewApi.getInstructDetails, {
-        id: instructId,
-        orgName: selectOrgName
-      })
-        .then(res => {
-          this.details = res
-          this.userId = res.userid + ''
-          // 判断当前指令状态是不是最终流程
-          if (this.details.f_instruct_state === '待发送') {
-            this.status = 'process'
-            this.step = 0
-            this.instructResult = '执行成功'
-          } else if (this.details.f_instruct_state === '已发送') {
-            this.status = 'process'
-            this.step = 1
-            this.instructResult = '执行成功'
-          } else {
-            this.step = 2
-            this.instructResult = this.details.f_instruct_state
-            if (this.details.f_instruct_state === '发送失败' || this.details.f_instruct_state === '执行失败' ||
-              this.details.f_instruct_state === '响应超时') {
-              this.status = 'error'
-            } else if (this.details.f_instruct_state === '忽略冗余' || this.details.f_instruct_state === '无响应' || this.details.f_instruct_state === '已延迟') {
-              this.status = 'wait'
-            } else {
-              this.status = 'finish'
-            }
-          }
-          this.loadInstructDetails = false
-        }, err => {
-          this.loadInstructDetails = false
-          console.error(err)
-        })
-    },
-    // 获取指令操作记录
-    getRecord (requestParameters) {
-      return post(InstructDetailsViewApi.getInstructRecordList, requestParameters)
-        .then(res => {
-          return res
-        })
-    },
-    // 日期格式化
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    // 重新发送指令
-    againSend (id) {
-      const _this = this
-      this.$confirm({
-        title: '您确定要重新发送该指令吗？',
-        content: '指令状态将被标记为待发送',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk () {
-          return post(InstructDetailsViewApi.againSendInstruct, {
-            id: id,
-            orgName: _this.selectOrgName,
-            username: _this.currUser.username
-          }).then(res => {
-            _this.getInstruct(id, _this.selectOrgName)
-            if (res.nums === 1) {
-              _this.$message.success('操作成功')
-            } else {
-              _this.$message.error('操作失败')
-            }
-          })
-        }
-      })
-    },
-    // 取消发送指令
-    cancelSend (id) {
-      const _this = this
-      this.$confirm({
-        title: '您确定要取消发送该指令吗？',
-        content: '指令状态将被标记为忽略冗余',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk () {
-          return post(InstructDetailsViewApi.cancelSendInstruct, {
-            id: id,
-            orgName: _this.selectOrgName,
-            username: _this.currUser.username
-          }).then(res => {
-            _this.getInstruct(id, _this.selectOrgName)
-            if (res.nums === 1) {
-              _this.$message.success('操作成功')
-            } else {
-              _this.$message.error('操作失败')
-            }
-          })
-        }
-      })
-    },
-    // 控制重新发送按钮的显示
-    againSendBtnHide () {
-      return this.step === 0 || this.loadInstructDetails
-    },
-    // 控制取消发送按钮的显示
-    cancelSendBtnHide () {
-      return (this.step !== 0 && this.step !== 1 && this.details.f_instruct_state !== '已延迟') || this.loadInstructDetails
-    },
-    // 转换JSON
-    toJSON (value) {
-      try {
-        return JSON.parse(value)
-      } catch (e) {
-        return value
-      }
-    },
-    // 获取指令过程说明
-    getIntroduction () {
-      if (this.step > 0) {
-        return '已发送，等待响应结果'
-      } else if (this.step === 0) {
-        return ''
-      }
-    },
-    // 获取指令结果说明
-    getResultText (value) {
-      if (this.step === 2) {
-        if (value === '执行成功') {
-          return '指令已发送成功'
-        } else if (value === '执行失败') {
-          return '失败，请查看响应结果'
-        } else if (value === '忽略冗余') {
-          return '指令已被取消发送'
-        } else if (value === '无响应') {
-          return '无法得到指令响应结果'
-        } else if (value === '响应超时') {
-          return '未得到指令响应结果'
-        } else if (value === '已延迟') {
-          return '由于表具限制，指令已被延迟发送'
-        }
-      }
-    },
-    // 打开档案详情抽屉
-    openUserFilesDetails () {
-      this.selectUserId = this.userId
-      this.detailVisible = true
-    }
-  },
-  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="loadInstructDetails">
+      <meter-details-view
+        :visible.sync="detailVisible"
+        :select-org-name="selectOrgName"
+        :userid="selectUserId"
+        v-if="selectUserId && isShowUserFiles"
+      />
+      <a-page-header
+        :title="'指令：' + details.f_instruct_type"
+      >
+        <div class="row">
+          <div class="content">
+            <a-descriptions size="small" :column="isMobile ? 1 : 2">
+              <a-descriptions-item label="指令编号" :span="isMobile ? 1 : 2">{{ details.id }}</a-descriptions-item>
+              <a-descriptions-item label="表编号">
+                <a v-if="isShowUserFiles" @click="openUserFilesDetails">{{ details.userid }}</a>
+                <span v-else>{{ details.userid }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="表号">{{ details.f_meternumber }}</a-descriptions-item>
+              <a-descriptions-item label="操作人员">{{ details.f_inputtor }}</a-descriptions-item>
+              <a-descriptions-item label="指令说明">{{ details.f_instruct_title }}</a-descriptions-item>
+              <a-descriptions-item label="生成时间">{{ format(details.f_instruct_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
+              <a-descriptions-item label="表厂别名">{{ details.f_alias }}</a-descriptions-item>
+              <a-descriptions-item label="最后发送时间">{{ format(details.f_send_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
+              <a-descriptions-item label="最后响应时间">{{ format(details.f_callback_date,'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 :value="details.f_instruct_state" badge-key="instructStateMap" :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">{{ details.f_receive_state }}</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="loadInstructDetails">刷新</a-button>
+          </a-button-group>
+          <a-button-group style="margin-right: 4px;">
+            <a-popover title="重新发送" placement="bottomLeft">
+              <template slot="content">
+                <p>将指令标记为待发送状态</p>
+                <p>指令将在 定时器轮询/表具上报 后重新发送</p>
+                <p style="color: red">此操作不可撤销</p>
+              </template>
+              <a-button type="primary" @click="againSend(details.id)" :disabled="againSendBtnHide()">重新发送</a-button>
+            </a-popover>
+            <a-popover title="取消发送" placement="bottomLeft">
+              <template slot="content">
+                <p>该指令将被<span style="color: red;font-weight: bold">取消</span>，请谨慎操作</p>
+                <p>只有待发送或已发送的指令可以取消发送</p>
+                <p style="color: red">此操作不可撤销</p>
+              </template>
+              <a-button type="danger" @click="cancelSend(details.id)" :disabled="cancelSendBtnHide()">取消发送</a-button>
+            </a-popover>
+          </a-button-group>
+        </template>
+
+        <!-- 操作 -->
+        <a-card :bordered="false" title="指令状态">
+          <a-steps :direction="'horizontal'" :current="step" :status="status">
+            <a-step>
+              <template v-slot:title><span>待发送</span></template>
+              <template v-slot:description>
+                <div>指令已经就绪，待发送<div>{{ format(details.f_instruct_date,'yyyy-MM-dd hh:mm:ss') }}</div></div>
+              </template>
+            </a-step>
+            <a-step>
+              <template v-slot:title><span>已发送</span></template>
+              <template v-slot:description>
+                <div>{{ getIntroduction() }}<div>{{ format(details.f_send_date,'yyyy-MM-dd hh:mm:ss') }}</div></div>
+              </template>
+            </a-step>
+            <a-step>
+              <template v-slot:title><span>{{ instructResult }}</span></template>
+              <template v-slot:description>
+                <div>{{ getResultText(instructResult) }}<div>{{ format(details.f_callback_date,'yyyy-MM-dd hh:mm:ss') }}</div></div>
+              </template>
+            </a-step>
+          </a-steps>
+        </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-card type="inner" title="指令内容">
+              <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="details.f_instruct_content === undefined ? {} : toJSON(details.f_instruct_content)"></json-viewer>
+            </a-card>
+            <a-card type="inner" title="指令元数据">
+              <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="details.f_instruct_meta_data === undefined ? {} : toJSON(details.f_instruct_meta_data)"></json-viewer>
+            </a-card>
+          </div>
+
+          <x-table
+            v-if="loaded && operationActiveTabKey === '2'"
+            :json-data="showColumns"
+            :queryParamsName="queryParamsName"
+            @loadData="loadData"
+            :form="form"
+          />
+          <div v-else-if="operationActiveTabKey === '3'" class="no-data"><a-icon type="frown-o"/>暂无数据</div>
+        </a-card>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import JsonViewer from 'vue-json-viewer'
+import { formatDate } from '@vue2-client/utils/util'
+import { InstructDetailsViewApi } from '@vue2-client/services/api/InstructDetailsViewApi'
+import { post } from '@vue2-client/services/api/restTools'
+import { query, commonApi } from '@vue2-client/services/api/common'
+import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'InstructDetailsView',
+  components: {
+    JsonViewer,
+    XTable
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 指令详情
+      details: {
+        id: 0,
+        userid: 0,
+        f_meternumber: '',
+        f_instruct_type: '',
+        f_instruct_title: '',
+        f_instruct_state: '待发送',
+        f_receive_state: '',
+        f_inputtor: '',
+        f_alias: '',
+        f_instruct_date: '',
+        f_send_date: '',
+        f_callback_date: '',
+        f_instruct_meta_data: {},
+        f_instruct_content: {}
+      },
+      // 当前步骤
+      step: 0,
+      // 当前状态,
+      status: 'process',
+      // 指令状态结果
+      instructResult: '执行成功',
+      // 档案详情组件显示
+      detailVisible: false,
+      // 查询的档案id
+      selectUserId: undefined,
+      // 档案id
+      userId: undefined,
+      // 指令详情加载
+      loadInstructDetails: true,
+      // 查询配置文件名
+      queryParamsName: 'recordQueryParams',
+      // 查询列集合
+      showColumns: [],
+      // queryJson加载是否完成
+      loaded: false,
+      // 查询操作日志表单
+      form: {
+        f_data_id: this.instructid,
+        f_org_name: this.selectOrgName
+      },
+      operationTabList: [
+        {
+          key: '1',
+          tab: '开发者信息'
+        },
+        {
+          key: '2',
+          tab: '操作日志'
+        },
+        {
+          key: '3',
+          tab: '维护教程'
+        }
+      ],
+      operationActiveTabKey: '1'
+    }
+  },
+  created () {
+    this.getColumnsJson()
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    instructid: {
+      type: String,
+      required: true
+    },
+    selectOrgName: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    isShowUserFiles: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.getInstruct(this.instructid, this.selectOrgName)
+    },
+    // 获取查询配置JSON
+    getColumnsJson () {
+      post(commonApi.getColumnsJson, { str: this.queryParamsName }).then((res) => {
+        this.showColumns = res.columnJson
+        this.loaded = true
+      })
+    },
+    // 关闭抽屉时回调
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 加载xTable数据
+    loadData (requestParameters, callback) {
+      callback(query(requestParameters))
+    },
+    // 获取指令详情信息
+    getInstruct (instructId, selectOrgName) {
+      this.loadInstructDetails = true
+      return post(InstructDetailsViewApi.getInstructDetails, {
+        id: instructId,
+        orgName: selectOrgName
+      })
+        .then(res => {
+          this.details = res
+          this.userId = res.userid + ''
+          // 判断当前指令状态是不是最终流程
+          if (this.details.f_instruct_state === '待发送') {
+            this.status = 'process'
+            this.step = 0
+            this.instructResult = '执行成功'
+          } else if (this.details.f_instruct_state === '已发送') {
+            this.status = 'process'
+            this.step = 1
+            this.instructResult = '执行成功'
+          } else {
+            this.step = 2
+            this.instructResult = this.details.f_instruct_state
+            if (this.details.f_instruct_state === '发送失败' || this.details.f_instruct_state === '执行失败' ||
+              this.details.f_instruct_state === '响应超时') {
+              this.status = 'error'
+            } else if (this.details.f_instruct_state === '忽略冗余' || this.details.f_instruct_state === '无响应' || this.details.f_instruct_state === '已延迟') {
+              this.status = 'wait'
+            } else {
+              this.status = 'finish'
+            }
+          }
+          this.loadInstructDetails = false
+        }, err => {
+          this.loadInstructDetails = false
+          console.error(err)
+        })
+    },
+    // 获取指令操作记录
+    getRecord (requestParameters) {
+      return post(InstructDetailsViewApi.getInstructRecordList, requestParameters)
+        .then(res => {
+          return res
+        })
+    },
+    // 日期格式化
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    // 重新发送指令
+    againSend (id) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要重新发送该指令吗？',
+        content: '指令状态将被标记为待发送',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          return post(InstructDetailsViewApi.againSendInstruct, {
+            id: id,
+            orgName: _this.selectOrgName,
+            username: _this.currUser.username
+          }).then(res => {
+            _this.getInstruct(id, _this.selectOrgName)
+            if (res.nums === 1) {
+              _this.$message.success('操作成功')
+            } else {
+              _this.$message.error('操作失败')
+            }
+          })
+        }
+      })
+    },
+    // 取消发送指令
+    cancelSend (id) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要取消发送该指令吗？',
+        content: '指令状态将被标记为忽略冗余',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          return post(InstructDetailsViewApi.cancelSendInstruct, {
+            id: id,
+            orgName: _this.selectOrgName,
+            username: _this.currUser.username
+          }).then(res => {
+            _this.getInstruct(id, _this.selectOrgName)
+            if (res.nums === 1) {
+              _this.$message.success('操作成功')
+            } else {
+              _this.$message.error('操作失败')
+            }
+          })
+        }
+      })
+    },
+    // 控制重新发送按钮的显示
+    againSendBtnHide () {
+      return this.step === 0 || this.loadInstructDetails
+    },
+    // 控制取消发送按钮的显示
+    cancelSendBtnHide () {
+      return (this.step !== 0 && this.step !== 1 && this.details.f_instruct_state !== '已延迟') || this.loadInstructDetails
+    },
+    // 转换JSON
+    toJSON (value) {
+      try {
+        return JSON.parse(value)
+      } catch (e) {
+        return value
+      }
+    },
+    // 获取指令过程说明
+    getIntroduction () {
+      if (this.step > 0) {
+        return '已发送，等待响应结果'
+      } else if (this.step === 0) {
+        return ''
+      }
+    },
+    // 获取指令结果说明
+    getResultText (value) {
+      if (this.step === 2) {
+        if (value === '执行成功') {
+          return '指令已发送成功'
+        } else if (value === '执行失败') {
+          return '失败，请查看响应结果'
+        } else if (value === '忽略冗余') {
+          return '指令已被取消发送'
+        } else if (value === '无响应') {
+          return '无法得到指令响应结果'
+        } else if (value === '响应超时') {
+          return '未得到指令响应结果'
+        } else if (value === '已延迟') {
+          return '由于表具限制，指令已被延迟发送'
+        }
+      }
+    },
+    // 打开档案详情抽屉
+    openUserFilesDetails () {
+      this.selectUserId = this.userId
+      this.detailVisible = true
+    }
+  },
+  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>