故障手册模块上传、可框选折线散点图模块上传

src/router/index.js

@@ -885,6 +885,12 @@ const routes = [{
 		import('../views/Knowledge/Knowledge1.vue'),
 },
 {
+	path: '/others/faultManual', //故障手册
+	name: 'faultManual',
+	component: () =>
+		import('../views/faultManual/index.vue'),
+},
+{
 	path: '/others/knowledge/knowledge2', //安全措施知识
 	name: 'knowledge2',
 	component: () =>

src/views/About.vue

@@ -26,7 +26,7 @@
         border
         style="width: 100%"
       >
-        <el-table-column prop="name" label="部件"> </el-table-column>
+        <el-table-column prop="name" label="部件" />
         <el-table-column
           prop="amount1"
           sortable
@@ -103,312 +103,20 @@ export default {
   },
 
   mounted() {
-    var myChart = echarts.init(document.getElementById("box"));
-    const series = [
-      {
-        name: "散点数据",
-        type: "effectScatter",
-        showEffectOn: "emphasis",
-        data: [
-          [174.0, 65.6],
-          [175.3, 71.8],
-          [193.5, 80.7],
-          [186.5, 72.6],
-          [187.2, 78.8],
-          [181.5, 74.8],
-          [184.0, 86.4],
-          [184.5, 78.4],
-          [175.0, 62.0],
-          [184.0, 81.6],
-          [180.0, 76.6],
-          [177.8, 83.6],
-          [192.0, 90.0],
-          [176.0, 74.6],
-          [174.0, 71.0],
-          [184.0, 79.6],
-          [192.7, 93.8],
-          [171.5, 70.0],
-          [173.0, 72.4],
-          [176.0, 85.9],
-          [176.0, 78.8],
-          [180.5, 77.8],
-        ],
-        xAxisIndex: 1,
-      },
-      {
-        name: "折线数据",
-        type: "line",
-        smooth: true, //这个是把线变成曲线
-        data: [
-          10, 20, 30, 40, 30, 20, 50, 80, 50, 80, 50, 80, 60, 40, 20, 40, 60,
-          80, 60, 40, 20,
-        ],
-        itemStyle: {
-          normal: {
-            color: "#05bb4c",
-            lineStyle: {
-              color: "#05bb4c",
-            },
-          },
-        },
-        xAxisIndex: 0,
-      },
-      {
-        name: "散点图内折线图数据",
-        type: "line",
-        smooth: true, //这个是把线变成曲线
-        data: [
-          0, 10, 20, 30, 40, 50, 60, 70, 80, 80, 80, 80, 90, 90, 90, 95, 95,
-          100, 100, 100, 100,
-        ],
-        itemStyle: {
-          normal: {
-            color: "#f8de5b",
-            lineStyle: {
-              color: "#f8de5b",
-            },
-          },
-        },
-        xAxisIndex: 0,
-      },
-    ];
-    //指定图表的配置项和数据
-    var option = {
-      //标题
-      title: {
-        text: "生鲜销量统计",
-        textStyle: {
-          fontSize: util.vh(16),
-          color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-        },
-      },
-      backgroundColor:
-        this.$store.state.themeName === "dark"
-          ? "rgba(0,0,0,0.4)"
-          : "rgba(255,255,255,0.5)",
-      //工具箱
-      toolbox: {
-        show: true,
-        x: "right",
-        position: [10, 10],
-        backgroundColor:
-          this.$store.state.themeName === "dark"
-            ? "rgba(0,0,0,0.4)"
-            : "rgba(255,255,255,0.5)",
-        borderColor:
-          this.$store.state.themeName === "dark"
-            ? partten.getColor("gray")
-            : "#000",
-        textStyle: {
-          fontSize: util.vh(16),
-          color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-        },
-        iconStyle: {
-          borderColor: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-        },
-        emphasis: {
-          iconStyle: {
-            borderColor:
-              this.$store.state.themeName === "dark" ? "#fff" : "#000",
-          },
-        },
-        // feature: {
-        //   dataZoom: {
-        //     yAxisIndex: "none",
-        //   },
-        //   dataView: { readOnly: false },
-        //   magicType: { type: ["line", "bar"] },
-        //   restore: {},
-        //   saveAsImage: {},
-        // },
+    const that = this;
+    that.API.requestData({
+      method: "POST",
+      baseURL: "http://192.168.1.18:9002/",
+      subUrl: "scatter/list",
+      data: {
+        station: "NSS_FDC",
+        wtId: "NG01_01",
+        time: "2022-02",
       },
-      tooltip: {
-        trigger: "item",
-        axisPointer: {
-          type: "cross",
-        },
-        backgroundColor:
-          this.$store.state.themeName === "dark"
-            ? "rgba(0,0,0,0.4)"
-            : "rgba(255,255,255,0.5)",
-        borderColor:
-          this.$store.state.themeName === "dark"
-            ? partten.getColor("gray")
-            : "#000",
-        textStyle: {
-          fontSize: util.vh(16),
-          color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-        },
-        formatter(params) {
-          return params.seriesName + "<br>" + params.name + "：" + params.data;
-        },
-      },
-      brush: {
-        xAxisIndex: "all",
-        yAxisIndex: "all",
-        transformable: true,
-        throttleType: "debounce",
-        throttleDelay: 600,
-        removeOnClick: false,
-        brushType: "polygon",
-        brushMode: "multiple",
-        brushStyle: {
-          borderWidth: 1,
-          color: "rgba(255,36,36,0.2)",
-          borderColor: "#ff2424",
-        },
-        // outOfBrush: {
-        //   colorAlpha: 0.5,
-        // },
-      },
-      dataZoom: [
-        {
-          type: "inside", //图表下方的伸缩条
-          show: true, //是否显示
-          realtime: true, //拖动时，是否实时更新系列的视图
-          start: 0, //伸缩条开始位置（1-100），可以随时更改
-          end: 100, //伸缩条结束位置（1-100），可以随时更改
-        },
-        {
-          type: "slider", //图表下方的伸缩条
-          show: true, //是否显示
-          realtime: true, //拖动时，是否实时更新系列的视图
-          start: 0, //伸缩条开始位置（1-100），可以随时更改
-          end: 100, //伸缩条结束位置（1-100），可以随时更改
-        },
-      ],
-      textStyle: {
-        fontSize: util.vh(16),
-        color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-      },
-      //图例-每一条数据的名字叫销量
-      legend: {
-        show: true,
-        data: ["销量"],
-        inactiveColor:
-          this.$store.state.themeName === "dark"
-            ? partten.getColor("gray")
-            : "#000",
-        textStyle: {
-          color:
-            this.$store.state.themeName === "dark"
-              ? partten.getColor("grayl")
-              : "#000",
-          fontSize: 12,
-        },
-      },
-      grid: {
-        top: 32,
-        left: 40,
-        right: 40,
-        bottom: 24,
-      },
-      //x轴
-      xAxis: [
-        {
-          data: [
-            "t1",
-            "t2",
-            "t3",
-            "t4",
-            "t5",
-            "t6",
-            "t7",
-            "t8",
-            "t9",
-            "t10",
-            "t11",
-            "t12",
-            "t13",
-            "t14",
-            "t15",
-            "t16",
-            "t17",
-            "t18",
-            "t19",
-            "t20",
-            "t21",
-            "t22",
-          ],
-          axisLabel: {
-            formatter: "{value}",
-            fontSize: util.vh(14),
-          },
-          textStyle: {
-            color:
-              this.$store.state.themeName === "dark"
-                ? partten.getColor("gray")
-                : "#000",
-          },
-        },
-        {
-          show: false,
-          type: "category",
-          max: 150,
-        },
-      ],
-      //y轴没有显式设置，根据值自动生成y轴
-      yAxis: {
-        splitLine: { show: false },
-      },
-      //数据-data是最终要显示的数据
-      series,
-    };
-
-    myChart.on("brushSelected", (params) => {
-      const selected = params.batch[0]?.selected;
-      let selectRes = [];
-      selected?.forEach((pEle) => {
-        if (pEle.dataIndex.length) {
-          let item = {
-            name: pEle.seriesName,
-            data: [],
-          };
-          pEle.dataIndex.forEach((cEle) => {
-            item.data.push(
-              Array.isArray(series[pEle.seriesIndex].data[cEle])
-                ? series[pEle.seriesIndex].data[cEle][
-                    series[pEle.seriesIndex].data[cEle].length - 1
-                  ]
-                : series[pEle.seriesIndex].data[cEle]
-            );
-          });
-          selectRes.push(item);
-        }
-      });
-      let altMsg = "选中了";
-      if (selectRes.length) {
-        selectRes.forEach((ele) => {
-          altMsg +=
-            ele.data.length +
-            "条" +
-            ele.name +
-            "：[" +
-            ele.data.toString() +
-            "].";
-        });
-        this.BASE.showMsg({
-          type: "success",
-          msg: altMsg,
-        });
-      }
-    });
-
-    //使用刚刚指定的配置项和数据项显示图表
-    myChart.setOption(option);
-
-    myChart.dispatchAction({
-      type: "takeGlobalCursor",
-      // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
-      key: "brush",
-      brushOption: {
-        // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
-        brushType: "polygon",
-        // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。
-        brushMode: "multiple",
+      success(res) {
+        that.initChart(res);
       },
     });
-
     return;
     let thArray = [
       [
@@ -450,6 +158,346 @@ export default {
   },
 
   methods: {
+    initChart(res) {
+      let myChart = echarts.init(document.getElementById("box"));
+
+      let sjgl = [];
+      let zygl = [];
+      let xAxisData = [];
+
+      res.data.lineactual.forEach((ele, index) => {
+        sjgl.push(ele[1]);
+        xAxisData.push(index);
+      });
+
+      res.data.lineoptimal.forEach((ele) => {
+        zygl.push(ele[1]);
+      });
+
+      const series = [
+        {
+          name: "风速功率",
+          type: "effectScatter",
+          showEffectOn: "emphasis",
+          symbolSize: 5,
+          data: res.data.scatter || [
+            [174.0, 65.6],
+            [175.3, 71.8],
+            [193.5, 80.7],
+            [186.5, 72.6],
+            [187.2, 78.8],
+            [181.5, 74.8],
+            [184.0, 86.4],
+            [184.5, 78.4],
+            [175.0, 62.0],
+            [184.0, 81.6],
+            [180.0, 76.6],
+            [177.8, 83.6],
+            [192.0, 90.0],
+            [176.0, 74.6],
+            [174.0, 71.0],
+            [184.0, 79.6],
+            [192.7, 93.8],
+            [171.5, 70.0],
+            [173.0, 72.4],
+            [176.0, 85.9],
+            [176.0, 78.8],
+            [180.5, 77.8],
+          ],
+          xAxisIndex: 1,
+        },
+        {
+          name: "实际功率",
+          type: "line",
+          smooth: true, //这个是把线变成曲线
+          data: sjgl || [
+            10, 20, 30, 40, 30, 20, 50, 80, 50, 80, 50, 80, 60, 40, 20, 40, 60,
+            80, 60, 40, 20,
+          ],
+          itemStyle: {
+            normal: {
+              color: "#05bb4c",
+              lineStyle: {
+                color: "#05bb4c",
+              },
+            },
+          },
+          xAxisIndex: 0,
+        },
+        {
+          name: "最优功率",
+          type: "line",
+          smooth: true, //这个是把线变成曲线
+          data: zygl || [
+            0, 10, 20, 30, 40, 50, 60, 70, 80, 80, 80, 80, 90, 90, 90, 95, 95,
+            100, 100, 100, 100,
+          ],
+          itemStyle: {
+            normal: {
+              color: "#f8de5b",
+              lineStyle: {
+                color: "#f8de5b",
+              },
+            },
+          },
+          xAxisIndex: 0,
+        },
+      ];
+      //指定图表的配置项和数据
+      var option = {
+        //标题
+        title: {
+          text: "折线散点图",
+          textStyle: {
+            fontSize: util.vh(16),
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+        },
+        backgroundColor:
+          this.$store.state.themeName === "dark"
+            ? "rgba(0,0,0,0.4)"
+            : "rgba(255,255,255,0.5)",
+        //工具箱
+        toolbox: {
+          show: true,
+          x: "right",
+          position: [10, 10],
+          backgroundColor:
+            this.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor:
+            this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
+          textStyle: {
+            fontSize: util.vh(16),
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+          iconStyle: {
+            borderColor:
+              this.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+          emphasis: {
+            iconStyle: {
+              borderColor:
+                this.$store.state.themeName === "dark" ? "#fff" : "#000",
+            },
+          },
+          // feature: {
+          //   dataZoom: {
+          //     yAxisIndex: "none",
+          //   },
+          //   dataView: { readOnly: false },
+          //   magicType: { type: ["line", "bar"] },
+          //   restore: {},
+          //   saveAsImage: {},
+          // },
+        },
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "cross",
+          },
+          backgroundColor:
+            this.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor:
+            this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
+          textStyle: {
+            fontSize: util.vh(16),
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+          formatter(params) {
+            return params.name
+              ? `${params.seriesName}<br />风速：${params.name}米/s<br />功率：${params.value}KW`
+              : `${params.seriesName}<br />风速：${params.data[0]}米/s<br />功率：${params.data[1]}KW`;
+          },
+        },
+        brush: {
+          xAxisIndex: "all",
+          yAxisIndex: "all",
+          transformable: true,
+          throttleType: "debounce",
+          throttleDelay: 600,
+          removeOnClick: false,
+          brushType: "polygon",
+          brushMode: "multiple",
+          brushStyle: {
+            borderWidth: 1,
+            color: "rgba(255,36,36,0.2)",
+            borderColor: "#ff2424",
+          },
+          // outOfBrush: {
+          //   colorAlpha: 0.5,
+          // },
+        },
+        dataZoom: [
+          {
+            type: "inside", //图表下方的伸缩条
+            show: true, //是否显示
+            realtime: true, //拖动时，是否实时更新系列的视图
+            start: 0, //伸缩条开始位置（1-100），可以随时更改
+            end: 100, //伸缩条结束位置（1-100），可以随时更改
+          },
+          {
+            type: "slider", //图表下方的伸缩条
+            show: true, //是否显示
+            realtime: true, //拖动时，是否实时更新系列的视图
+            start: 0, //伸缩条开始位置（1-100），可以随时更改
+            end: 100, //伸缩条结束位置（1-100），可以随时更改
+          },
+        ],
+        textStyle: {
+          fontSize: util.vh(16),
+          color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+        },
+        //图例-每一条数据的名字叫销量
+        legend: {
+          show: true,
+          data: ["风速功率", "实际功率", "最优功率"],
+          right: "120",
+          top:"5",
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
+          textStyle: {
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 32,
+          left: 40,
+          right: 40,
+          bottom: 24,
+        },
+        //x轴
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData || [
+              "0",
+              "1",
+              "2",
+              "3",
+              "4",
+              "5",
+              "6",
+              "7",
+              "8",
+              "9",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+              "24",
+              "25",
+            ],
+            min: 0,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(14),
+            },
+            textStyle: {
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#000",
+            },
+          },
+          {
+            // name: this.xTitle,
+            show: false,
+            type: "value",
+            boundaryGap: false,
+            min: xAxisData[0],
+            max: xAxisData[xAxisData.length - 1],
+            scale: true,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        //y轴没有显式设置，根据值自动生成y轴
+        yAxis: {
+          splitLine: { show: false },
+        },
+        //数据-data是最终要显示的数据
+        series,
+      };
+
+      myChart.on("brushSelected", (params) => {
+        const selected = params.batch[0]?.selected;
+        let selectRes = [];
+        selected?.forEach((pEle) => {
+          if (pEle.dataIndex.length) {
+            let item = {
+              name: pEle.seriesName,
+              data: [],
+            };
+            pEle.dataIndex.forEach((cEle) => {
+              item.data.push(
+                Array.isArray(series[pEle.seriesIndex].data[cEle])
+                  ? series[pEle.seriesIndex].data[cEle][
+                      series[pEle.seriesIndex].data[cEle].length - 1
+                    ]
+                  : series[pEle.seriesIndex].data[cEle]
+              );
+            });
+            selectRes.push(item);
+          }
+        });
+        let altMsg = "选中了";
+        if (selectRes.length) {
+          selectRes.forEach((ele) => {
+            altMsg +=
+              ele.data.length +
+              "条" +
+              ele.name +
+              "：[" +
+              ele.data.toString() +
+              "].";
+          });
+          this.BASE.showMsg({
+            type: "success",
+            msg: altMsg,
+          });
+        }
+      });
+
+      //使用刚刚指定的配置项和数据项显示图表
+      myChart.setOption(option);
+
+      myChart.dispatchAction({
+        type: "takeGlobalCursor",
+        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+        key: "brush",
+        brushOption: {
+          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+          brushType: "polygon",
+          // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。
+          brushMode: "multiple",
+        },
+      });
+    },
     showDialog() {
       this.show = true;
     },

src/views/Knowledge/knowinfo.vue

@@ -44,7 +44,6 @@ export default {
   watch: {
     data(value) {
       this.infoObj = value;
-      console.log(value);
     },
   },
 };

src/views/faultManual/index.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="knowledge-1">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">机组型号：</div>
+          <div class="search-input">
+            <el-select
+              v-model="processType"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+              @change="getWidgetArray"
+            >
+              <el-option
+                v-for="item in processTypeArray"
+                :key="item.category"
+                :label="item.name"
+                :value="item.category"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">故障类型：</div>
+          <div class="search-input">
+            <el-select
+              v-model="WidgetType"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+              @change="getTableData"
+            >
+              <el-option
+                v-for="item in WidgetArray"
+                :key="item.code"
+                :label="item.widget"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="getTableData">搜索</button>
+      </div>
+    </div>
+    <div class="table-box">
+      <ComTable :data="tableData" height="85vh"></ComTable>
+    </div>
+    <div class="dialog-box">
+      <el-dialog
+        title="详细信息"
+        v-model="showDetails"
+        custom-class="modal"
+        :close-on-click-modal="false"
+      >
+        <know-info :data="infoData"></know-info>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ComTable from "@com/coms/table/table.vue";
+import KnowInfo from "./knowinfo.vue";
+
+export default {
+  components: { ComTable, KnowInfo },
+  data() {
+    const that = this;
+    return {
+      processTypeArray: [],
+      processType: "",
+      WidgetArray: [],
+      WidgetType: "",
+      nameArray: [],
+      nameType: "",
+      showDetails: false,
+      infoData: [],
+      tableData: {
+        column: [
+          {
+            name: "故障分类",
+            field: "widget",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "故障名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "故障原因",
+            field: "cause",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "处理方法",
+            field: "process",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+              return "<el-button type='text' style='cursor: pointer;'>查看详情</el-button>";
+            },
+            click(e, row) {
+              that.getDetails(row);
+            },
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+  created() {
+    this.getProcessType();
+  },
+  methods: {
+    getProcessType() {
+      const that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9002/",
+        subUrl: "know/process/type",
+        data: {},
+        success(res) {
+          that.processTypeArray = res.data;
+          that.processType = res?.data[0]?.category;
+          that.getWidgetArray();
+        },
+      });
+    },
+    getWidgetArray() {
+      const that = this;
+      that.WidgetType = [];
+      if (that.processType) {
+        that.API.requestData({
+          method: "GET",
+          baseURL: "http://192.168.1.18:9002/",
+          subUrl: "know/process/widget/list",
+          data: {
+            category: that.processType,
+          },
+          success(res) {
+            that.WidgetArray = res.data;
+            that.WidgetType = res?.data[0]?.widget;
+            that.getTableData();
+          },
+        });
+      }
+    },
+    getTableData() {
+      const that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9002/",
+        subUrl: "know/process/name/list",
+        data: {
+          category: that.processType,
+          code: that.WidgetType,
+        },
+        success(res) {
+          that.tableData.data = res.data;
+        },
+      });
+    },
+    getDetails(row) {
+      const that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9002/",
+        subUrl: "know/process/list",
+        data: {
+          id: row.id,
+        },
+        success(res) {
+          console.log(111, res.data);
+          if (res.data?.length) {
+            that.infoData = res.data;
+            that.showDetails = true;
+          } else {
+            that.BASE.showMsg({
+              msg: "暂无数据",
+            });
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-1 {
+  .el-select {
+    width: 200px;
+  }
+  .el-input {
+    width: 200px;
+  }
+  .dialog-box {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-dialog {
+    min-width: 500px;
+    min-height: 500px;
+  }
+}
+</style>

src/views/faultManual/knowinfo.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="know-info">
+    <table class="table-card" v-for="(item, index) in infoObj" :key="index">
+      <tr>
+        <th>故障分类</th>
+        <td>{{ item.widget || "" }}</td>
+        <th>故障类型</th>
+        <td>{{ item.type || "" }}</td>
+      </tr>
+      <tr>
+        <th>故障名称</th>
+        <td>{{ item.name || "" }}</td>
+        <th>故障标识</th>
+        <td>{{ item.identification || "" }}</td>
+      </tr>
+      <tr>
+        <th>故障原因</th>
+        <td colspan="3">{{ item.cause || "" }}</td>
+      </tr>
+      <tr>
+        <th>处理方法</th>
+        <td colspan="3">{{ item.process || "" }}</td>
+      </tr>
+      <tr>
+        <th>风机厂家</th>
+        <td>{{ item.manufacturer || "" }}</td>
+        <th>风机型号</th>
+        <td>{{ item.model || "" }}</td>
+      </tr>
+      <tr>
+        <th>创建时间</th>
+        <td colspan="3">{{ item.createtime || "" }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "know-info",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      infoObj: [],
+    };
+  },
+
+  mounted() {
+    this.infoObj = this.data;
+  },
+
+  watch: {
+    data(value) {
+      this.infoObj = value;
+    },
+  },
+};
+</script>
+
+
+<style lang="less" scoped>
+.know-info {
+  max-height: 600px;
+    overflow-y: scroll;
+  .table-card {
+    border-collapse: collapse;
+    width: 100%;
+    color: @white;
+    margin-bottom: 32px;
+
+    tr {
+      font-size: 12px;
+      th {
+        width: 120px;
+        height: 60px;
+        border: 0.093vh solid @darkgray;
+        line-height: 27px;
+        padding: 0 4px;
+      }
+      td {
+        height: 60px;
+        border: 0.093vh solid @darkgray;
+        line-height: 27px;
+        padding: 0 8px;
+      }
+    }
+  }
+
+  .el-dialog__body {
+    
+  }
+}
+</style>