生成诊断报告

src/views/CurrentDiagnosis/components/Step3.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-tabs type="border-card">
+    <el-tab-pane>
+      <span slot="label"><i class="el-icon-warning"></i> 二级综合控制器</span>
+      <div class="flex justify-between items-center font-bold mb-5">
+        <div>故障定位</div>
+        <el-button type="primary" size="small" @click="handleSave"
+          >保存</el-button
+        >
+      </div>
+      <!-- 基础故障定位 -->
+      <el-descriptions class="margin-top" :column="3" border>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-s-tools"></i>
+            故障单机
+          </template>
+          技术阵地电缆网
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-warning"></i>
+            发生性质
+          </template>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-s-grid"></i>
+            危害等级
+          </template>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-document"></i>
+            发生原因
+          </template>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-setting"></i>
+            修复方式
+          </template>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <!-- 诊断流程/诊断详情 -->
+      <div class="mt-5">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-card>
+              <div style="height: 400px"></div>
+            </el-card>
+          </el-col>
+          <el-col :span="12">
+            <el-card class="box-card">
+              <div style="height: 400px">
+                <div slot="header" class="clearfix">
+                  <span>
+                    <i class="el-icon-document"></i>
+                    诊断详情</span
+                  >
+                </div>
+                <el-empty description="请选择诊断步骤查看详情"></el-empty>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+export default {
+  name: "Step3",
+  data() {
+    return {
+      options: [
+        {
+          value: "一般",
+          label: "一般",
+        },
+        {
+          value: "严重",
+          label: "严重",
+        },
+        {
+          value: "重大",
+          label: "重大",
+        },
+      ],
+      value: "一般",
+    };
+  },
+  methods: {
+    handleSave() {
+      this.$message.success("保存成功");
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.base-fault {
+  height: 40px;
+}
+</style>

src/views/CurrentDiagnosis/components/Step4.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane label="技术阵地电缆网">
+        <el-row :gutter="20">
+          <el-col :span="5">
+            <!-- <el-tag
+              class="mb-3"
+              v-for="tag in list"
+              :key="tag.name"
+              closable
+              type="danger"
+            >
+              {{ tag.name }}
+            </el-tag> -->
+            <div
+              class="my-tag mb-3 flex items-center justify-between"
+              v-for="tag in list"
+              :key="tag.name"
+            >
+              <div class="name">
+                {{ tag.name }}
+              </div>
+              <div><i class="el-icon-close"></i></div>
+            </div>
+          </el-col>
+          <el-col :span="19">
+            <el-tabs type="border-card">
+              <el-tab-pane label="模型诊断">模型诊断</el-tab-pane>
+              <el-tab-pane label="案例诊断">案例诊断</el-tab-pane>
+              <el-tab-pane label="故障树诊断">故障树诊断</el-tab-pane>
+              <el-tab-pane label="人工诊断">
+                <el-form
+                  :rules="rules"
+                  ref="form"
+                  :model="form"
+                  label-width="120px"
+                >
+                  <el-form-item label="故障模式名称" prop="name">
+                    <el-input v-model="form.name"></el-input>
+                  </el-form-item>
+                  <el-form-item label="故障原因" prop="reason">
+                    <el-input v-model="form.reason"></el-input>
+                  </el-form-item>
+                  <el-form-item label="处置措施" prop="measures">
+                    <el-input v-model="form.measures"></el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button icon="el-icon-plus" type="primary" @click="onAdd"
+                      >添加</el-button
+                    >
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+export default {
+  name: "Step4",
+  data() {
+    return {
+      list: [
+        {
+          name: "测试name",
+          measures: "测试measures",
+          reason: "测试reason",
+        },
+      ],
+      form: {
+        name: "",
+        measures: "",
+        reason: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        measures: [
+          { required: true, message: "请输入故障原因", trigger: "blur" },
+        ],
+        reason: {
+          required: true,
+          message: "请输入处置措施",
+          trigger: "blur",
+        },
+      },
+    };
+  },
+  methods: {
+    onAdd() {
+      this.$refs["form"].validate((valid) => {
+        if (!valid) return;
+        this.list.push({...this.form});
+        this.$refs["form"].resetFields()
+        this.$refs["form"].clearValidate()
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.my-tag {
+  background-color: #fef0f0;
+  border-color: #fde2e2;
+  color: #f56c6c;
+  height: 32px;
+  padding: 0 10px;
+  line-height: 30px;
+  font-size: 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  .name {
+    overflow: hidden; // 溢出隐藏
+    white-space: nowrap; // 强制一行
+    text-overflow: ellipsis; // 文字溢出显示省略号
+  }
+}
+</style>

src/views/CurrentDiagnosis/components/Step5.vue

@@ -1,124 +1,142 @@
 <template>
-  <div>
     <el-tabs type="border-card">
-      <el-tab-pane label="技术阵地电缆网">
-        <el-row :gutter="20">
-          <el-col :span="5">
-            <!-- <el-tag
-              class="mb-3"
-              v-for="tag in list"
-              :key="tag.name"
-              closable
-              type="danger"
-            >
-              {{ tag.name }}
-            </el-tag> -->
-            <div
-              class="my-tag mb-3 flex items-center justify-between"
-              v-for="tag in list"
-              :key="tag.name"
-            >
-              <div class="name">
-                {{ tag.name }}
-              </div>
-              <div><i class="el-icon-close"></i></div>
-            </div>
-          </el-col>
-          <el-col :span="19">
-            <el-tabs type="border-card">
-              <el-tab-pane label="模型诊断">模型诊断</el-tab-pane>
-              <el-tab-pane label="案例诊断">案例诊断</el-tab-pane>
-              <el-tab-pane label="故障树诊断">故障树诊断</el-tab-pane>
-              <el-tab-pane label="人工诊断">
-                <el-form
-                  :rules="rules"
-                  ref="form"
-                  :model="form"
-                  label-width="120px"
-                >
-                  <el-form-item label="故障模式名称" prop="name">
-                    <el-input v-model="form.name"></el-input>
-                  </el-form-item>
-                  <el-form-item label="故障原因" prop="reason">
-                    <el-input v-model="form.reason"></el-input>
-                  </el-form-item>
-                  <el-form-item label="处置措施" prop="measures">
-                    <el-input v-model="form.measures"></el-input>
-                  </el-form-item>
-                  <el-form-item>
-                    <el-button icon="el-icon-plus" type="primary" @click="onAdd"
-                      >添加</el-button
+      <el-tab-pane>
+        <span slot="label"><i class="el-icon-warning"></i> 二级综合控制器</span>
+        <div class="flex justify-between items-center font-bold mb-5">
+          <div>故障定位</div>
+          <el-button type="primary" size="small" @click="handleSave"
+            >保存</el-button
+          >
+        </div>
+        <!-- 基础故障定位 -->
+        <el-descriptions class="margin-top" :column="3" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-s-tools"></i>
+              故障单机
+            </template>
+            技术阵地电缆网
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-warning"></i>
+              发生性质
+            </template>
+            <el-select v-model="value">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-s-grid"></i>
+              危害等级
+            </template>
+            <el-select v-model="value">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-document"></i>
+              发生原因
+            </template>
+            <el-select v-model="value">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-setting"></i>
+              修复方式
+            </template>
+            <el-select v-model="value">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-descriptions-item>
+        </el-descriptions>
+  
+        <!-- 诊断流程/诊断详情 -->
+        <div class="mt-5">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-card>
+                <div style="height: 400px"></div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card class="box-card">
+                <div style="height: 400px">
+                  <div slot="header" class="clearfix">
+                    <span>
+                      <i class="el-icon-document"></i>
+                      诊断详情</span
                     >
-                  </el-form-item>
-                </el-form>
-              </el-tab-pane>
-            </el-tabs>
-          </el-col>
-        </el-row>
+                  </div>
+                  <el-empty description="请选择诊断步骤查看详情"></el-empty>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
       </el-tab-pane>
     </el-tabs>
-  </div>
-</template>
-<script>
-export default {
-  name: "",
-  data() {
-    return {
-      list: [
-        {
-          name: "测试name",
-          measures: "测试measures",
-          reason: "测试reason",
-        },
-      ],
-      form: {
-        name: "",
-        measures: "",
-        reason: "",
-      },
-      rules: {
-        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
-        measures: [
-          { required: true, message: "请输入故障原因", trigger: "blur" },
+  </template>
+  <script>
+  export default {
+    name: "Step5",
+    data() {
+      return {
+        options: [
+          {
+            value: "一般",
+            label: "一般",
+          },
+          {
+            value: "严重",
+            label: "严重",
+          },
+          {
+            value: "重大",
+            label: "重大",
+          },
         ],
-        reason: {
-          required: true,
-          message: "请输入处置措施",
-          trigger: "blur",
-        },
+        value: "一般",
+      };
+    },
+    methods: {
+      handleSave() {
+        this.$message.success("保存成功");
       },
-    };
-  },
-  methods: {
-    onAdd() {
-      this.$refs["form"].validate((valid) => {
-        if (!valid) return;
-        this.list.push({...this.form});
-        this.$refs["form"].resetFields()
-        this.$refs["form"].clearValidate()
-      });
     },
-  },
-};
-</script>
-<style scoped lang="scss">
-.my-tag {
-  background-color: #fef0f0;
-  border-color: #fde2e2;
-  color: #f56c6c;
-  height: 32px;
-  padding: 0 10px;
-  line-height: 30px;
-  font-size: 12px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  box-sizing: border-box;
-  white-space: nowrap;
-  .name {
-    overflow: hidden; // 溢出隐藏
-    white-space: nowrap; // 强制一行
-    text-overflow: ellipsis; // 文字溢出显示省略号
+  };
+  </script>
+  <style scoped lang="scss">
+  .base-fault {
+    height: 40px;
   }
-}
-</style>
+  </style>
+  

src/views/CurrentDiagnosis/components/Step6.vue

@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <!-- top -->
+    <div class="flex items-center">
+      <el-button type="primary" size="small">上传报告</el-button>
+      <div class="ml-6 flex items-center justify-center">
+        <div class="mr-2 text-sm">报告模板</div>
+        <el-select v-model="value" placeholder="请选择" size="small">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <!-- 报告模板 -->
+    <div class="flex items-center justify-center mt-6">
+      <div class="template-panel">
+        <div class="title font-bold">诊断报告</div>
+
+        <div class="bg-white mt-3 p-3">
+          <div class="mb-2 font-bold text-sm">基础信息</div>
+          <el-table border size="small" :data="tableData" style="width: 100%">
+            <el-table-column
+              prop="date"
+              label="导弹编号"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="数据编号"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="所属型号"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="症状数量"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="测试开始时间"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="测试结束时间"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="故障现象"
+              align="center"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <div class="bg-white mt-2 p-3">
+          <div class="mb-2 font-bold text-sm">异常参数</div>
+          <div
+            class="bg-gray-300 p-3 text-yellow-500"
+            style="min-height: 100px"
+          >
+            1.遥测综合控制器【RET17】：参数不正确
+          </div>
+        </div>
+
+        <div class="bg-white mt-2 p-3">
+          <div class="mb-2 font-bold text-sm">现场图片</div>
+          <el-empty :image-size="100" description="暂无图片"></el-empty>
+        </div>
+
+        <div class="bg-white mt-2 p-3">
+          <div class="mb-2 font-bold text-sm">故障定位</div>
+          <el-table border size="small" :data="tableData" style="width: 100%">
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="单机名称"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="故障概率"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="故障描述"
+              align="center"
+            ></el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 循环故障  -->
+        <div>
+          <div class="bg-white mt-2 p-3">
+            <div class="mb-2 font-bold text-sm">故障信息</div>
+            <el-descriptions class="margin-top" :column="3" border>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-s-tools"></i>
+                  故障名称
+                </template>
+                56
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-s-tools"></i>
+                  故障单机
+                </template>
+                技术阵地电缆网
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-warning"></i>
+                  发生性质
+                </template>
+                严重
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-s-grid"></i>
+                  危害等级
+                </template>
+                一般
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-document"></i>
+                  发生原因
+                </template>
+                无
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  <i class="el-icon-setting"></i>
+                  修复方式
+                </template>
+                上机检修
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+          <div class="bg-white mt-2 p-3">
+            <div class="mb-2 font-bold text-sm">诊断知识</div>
+            <div class="text-base mb-3">人工录入故障</div>
+
+            <el-descriptions class="margin-top" :column="1" size="small" border>
+              <el-descriptions-item>
+                <template slot="label"> 故障模式名称 </template>
+                kooriookami
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label"> 故障原因 </template>
+                18100000000
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label"> 居住地 </template>
+                苏州市
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+          <div class="bg-white mt-2 p-3">
+            <div class="mb-2 font-bold text-sm">故障处置</div>
+            <div>没有合适的处置建议</div>
+          </div>
+        </div>
+
+        <div class="bg-white mt-2 p-3">
+          <div class="mb-2 font-bold text-sm">数据详情</div>
+          <LeeTable :tableData="tableData1" :tableTitle="tableTitle">
+            <el-table-column align="center" slot="status" label="状态">
+              <template slot-scope="scope">
+                <i
+                  class="el-icon-success"
+                  style="color: #24d500; font-size: 20px"
+                ></i>
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              type="index"
+              slot="index"
+              label="序号"
+              width="70"
+            >
+            </el-table-column>
+          </LeeTable>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Step6",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+      options: [
+        {
+          value:
+            "故障诊断报告模板：基础信息，现场图片，异常参数，数据详情，故障信息",
+          label:
+            "故障诊断报告模板：基础信息，现场图片，异常参数，数据详情，故障信息",
+        },
+        {
+          value: "test模板",
+          label: "test模板",
+        },
+      ],
+      value: "test模板",
+      tableTitle: [
+        { slot: "status" },
+        { slot: "index" },
+        { label: "参数名称", property: "name" },
+        { label: "测试子项", property: "date" },
+        { label: "测试项", property: "date" },
+        { label: "理论值", property: "date" },
+        { label: "实测值", property: "date" },
+        { label: "误差", property: "date" },
+      ],
+      tableData1: [],
+    };
+  },
+  mounted() {
+    const item = {
+      date: "2016-05-02",
+      name: "王小虎",
+      address: "上海市普陀区金沙江路 1518 弄",
+    };
+    this.tableData1 = Array(26).fill(item);
+  },
+};
+</script>
+<style scoped lang="scss">
+.base-layout {
+  // @apply
+}
+.template-panel {
+  min-width: 1200px;
+  padding: 15px;
+  background-color: #002d5e;
+  .title {
+    color: #9de6fd;
+  }
+}
+</style>

src/views/CurrentDiagnosis/index.vue

@@ -31,22 +31,32 @@
 
     <!-- content -->
     <div class="content">
-      <Step1 v-show="active==1"></Step1>
-      <Step2 v-show="active==2"></Step2>
-      <Step5 v-show="active==4"></Step5>
+      <Step1 v-show="active == 1"></Step1>
+      <Step2 v-show="active == 2"></Step2>
+      <Step3 v-show="active == 3"></Step3>
+      <Step4 v-show="active == 4"></Step4>
+      <Step5 v-show="active == 5"></Step5>
+      <Step6 v-show="active == 6"></Step6>
+      
     </div>
   </div>
 </template>
 <script>
 import Step1 from "./components/Step1.vue";
 import Step2 from "./components/Step2.vue";
+import Step3 from "./components/Step3.vue";
+import Step4 from "./components/Step4.vue";
 import Step5 from "./components/Step5.vue";
+import Step6 from "./components/Step6.vue";
 export default {
   name: "currentDiagosis",
   components: {
     Step1,
     Step2,
+    Step3,
+    Step4,
     Step5,
+    Step6,
   },
   data() {
     return {

src/views/FaultDetail/index.vue

@@ -71,7 +71,6 @@
                   <i class="el-icon-success" style="color:#24d500;font-size: 20px;" ></i>
                 </template>
               </el-table-column>
-
               <el-table-column align="center" type="index" slot="index" label="序号" width="70">
             </el-table-column>
             </LeeTable>