搬移设备台账详情tab

src/api/ledgerAssets/index.js

@@ -110,3 +110,12 @@ export async function updateRepairUserAndGroup(data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+//批量删除
+export async function batchDel(data) {
+  const res = await request.post(`/main/asset/batchDel`, data);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/ledgerAssets/components/details/InternetDryingBox/components/chart_temp.vue

@@ -0,0 +1,448 @@
+<template>
+  <div
+    class="line-box"
+    v-loading="lineLoading"
+    element-loading-text="正在加载中..."
+  >
+    <div class="title">
+      温度(℃)
+      <div class="tools">
+        <div class="">
+          <el-date-picker
+            v-model="temperatureTime"
+            :type="active"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+        </div>
+        <div class="timeType">
+          <span
+            :class="{ active: active === 'date' }"
+            @click="dateClick('date')"
+            >日</span
+          >
+          <!-- <span
+              :class="{ active: active === 'week' }"
+              @click="dateClick('week')"
+              >周</span
+            > -->
+          <span
+            :class="{ active: active === 'month' }"
+            @click="dateClick('month')"
+            >月</span
+          >
+          <span
+            :class="{ active: active === 'year' }"
+            @click="dateClick('year')"
+            >年</span
+          >
+        </div>
+        <el-button type="primary" size="small" @click="getInfo">查询</el-button>
+      </div>
+    </div>
+    <div class="value-box">
+      最高值<span class="danger-text">{{ tempMax }}℃</span>
+      <el-divider direction="vertical"></el-divider>
+      最低值<span class="danger-text">{{ tempMin }}℃</span>
+      <el-divider direction="vertical"></el-divider>
+      平均值<span class="average-text">{{ tempAvg }}℃</span>
+    </div>
+    <div class="chart-wrapper">
+      <div ref="chart-temperature"></div>
+    </div>
+  </div>
+</template>
+<script>
+  // import {
+  //   getEquHistory,
+  //   getAlarmThreshold
+  // } from '@/api/ledgerAssets/booksList';
+  import { getMonday } from '@/utils/index';
+  export default {
+    props: ['id'],
+    data() {
+      return {
+        lineLoading: false,
+        temperatureTime: '',
+        active: 'month',
+        dict: {
+          chartTime: {
+            date: 3,
+            month: 2,
+            year: 1
+          }
+        },
+        lineDataList: {},
+        myChart: null,
+        propertyList: [
+          {
+            name: '温度1',
+            property: 'temp1'
+          },
+          {
+            name: '温度2',
+            property: 'temp2'
+          },
+          {
+            name: '温度3',
+            property: 'temp3'
+          },
+          {
+            name: '温度4',
+            property: 'temp4'
+          }
+        ]
+      };
+    },
+    computed: {
+      tempMax() {
+        let item = Object.entries(this.lineDataList);
+        if (item.length > 0) {
+          let maxList = item.map((n) => {
+            return n[1].max;
+          });
+          return Math.max(...maxList);
+        } else {
+          return null;
+        }
+      },
+      tempMin() {
+        let item = Object.entries(this.lineDataList);
+        if (item.length > 0) {
+          let minList = item.map((n) => {
+            return n[1].min;
+          });
+          return Math.min(...minList);
+        } else {
+          return null;
+        }
+      },
+      tempAvg() {
+        let item = Object.entries(this.lineDataList);
+        if (item.length > 0) {
+          let avgList = item.map((n) => {
+            return n[1].avg;
+          });
+          let sum = avgList.reduce((a, b) => {
+            return Number(a) + Number(b);
+          });
+          return (sum / avgList.length).toFixed(2);
+        } else {
+          return null;
+        }
+      }
+    },
+    created() {
+      this.setMonth();
+      this.getInfo();
+    },
+    methods: {
+      dateClick(date) {
+        this.temperatureTime = '';
+        this.active = date;
+      },
+      async getInfo() {
+        let time = this.getTimeList(this.temperatureTime);
+        let params = {
+          equId: this.id,
+          // property: "temp",
+          startTime: time.startTime,
+          endTime: time.endTime,
+          timeType: this.dict.chartTime[this.active]
+        };
+
+        this.lineLoading = true;
+
+        let dataList = [];
+        let alList = [];
+        for (const item of this.propertyList) {
+          params.property = item.property;
+
+          // let data = await getEquHistory(params);
+          // let temp = await getAlarmThreshold(params);
+          // alList.push(temp.data.length > 0 ? temp.data[0] : {});
+          // dataList.push(data);
+        }
+        this.lineLoading = false;
+
+        // let PromiseAll = Promise.all(dataList, alList);
+
+        console.log('dataList', dataList);
+        console.log('alList', alList);
+        this.initTemperature(dataList, alList);
+      },
+      // 日期数据格式化
+      getTimeList(date) {
+        function fnNum(num) {
+          return num < 10 ? '0' + num : num;
+        }
+
+        let startTime;
+        let endTime;
+
+        let ndate = date ? new Date(date) : new Date();
+        let year = ndate.getFullYear();
+        let month = ndate.getMonth() + 1;
+        let day = ndate.getDate();
+
+        switch (this.active) {
+          case 'date': {
+            let _date = `${year}-${fnNum(month)}-${fnNum(day)}`;
+            startTime = _date + ' 00:00:00';
+            endTime = _date + ' 23:59:59';
+            break;
+          }
+          case 'month': {
+            let month = getMonday(date);
+            startTime = month[0] + ' 00:00:00';
+            endTime = month[1] + ' 23:59:59';
+            break;
+          }
+          case 'year': {
+            let year = ndate.getFullYear();
+            startTime = year + '-01-01 00:00:00';
+            endTime = year + '-12-31 23:59:59';
+            break;
+          }
+          default:
+            break;
+        }
+        return {
+          startTime,
+          endTime
+        };
+      },
+      // 处理数据
+      initTemperature(resList, alList) {
+        console.log(alList, 'alll');
+        let Axis = [];
+        let seriesData = [];
+        resList.forEach((n, index) => {
+          // 最高值，最低值，平均值
+          let data = n.data;
+          let key_ineData = this.propertyList[index].property;
+          let value_ineData = {
+            max: data.maxValue.toFixed(2),
+            min: data.minValue.toFixed(2),
+            avg: data.avgValue.toFixed(2)
+          };
+          this.$set(this.lineDataList, key_ineData, value_ineData);
+
+          // 数据
+          let chartItemData = data.timeHistoryList.map((el) => {
+            return el.value.toFixed(2);
+          });
+
+          seriesData.push({
+            name: this.propertyList[index].name,
+            property: this.propertyList[index].property,
+            data: chartItemData
+          });
+        });
+        for (const item of resList[0].data.timeHistoryList) {
+          const time = item.time.split(' ');
+          switch (this.active) {
+            case 'date': {
+              Axis.push(time[1]);
+              break;
+            }
+            case 'month': {
+              Axis.push(time[0].substr(-5, 5));
+              break;
+            }
+            case 'year': {
+              Axis.push(time[0]);
+              break;
+            }
+            default:
+              break;
+          }
+        }
+        this.$nextTick(() => {
+          this.myChart = this.$echarts.init(this.$refs['chart-temperature']);
+          let option = this.getLineOption(Axis, seriesData, alList);
+          this.myChart.setOption(option);
+        });
+      },
+      checkAL(data, arr) {
+        let obj = arr.find((item) => data.property === item.alarmType);
+        if (obj) {
+          return obj.alarmValue;
+        } else {
+          return 0;
+        }
+      },
+      //
+      getMax(seriesData, alList) {
+        console.log(seriesData);
+        let arr1 = [];
+        seriesData.forEach((item) => {
+          arr1.push(...item.data);
+        });
+        let arr2 = [];
+        alList.forEach((item) => {
+          arr2.push(item.alarmValue);
+        });
+        let arr = [...arr1, ...arr2];
+        let max = Math.max(...arr);
+
+        return max;
+      },
+      getLineOption(xAxisData = [], seriesData = [], alList = []) {
+        const color = ['#0052d9', '#bbd3fb', '#157a2c', '#FF4949'];
+        let option = {
+          legend: {
+            show: true,
+            bottom: 0,
+            icon: 'rect',
+            itemHeight: 4,
+            itemWidth: 16,
+            textStyle: {
+              fontSize: 16
+            }
+          },
+          grid: {
+            top: 50,
+            left: 50,
+            right: 50,
+            bottom: 90
+          },
+          dataZoom: [
+            {
+              show: true,
+              bottom: 40,
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            type: 'category',
+            data: xAxisData
+          },
+          yAxis: {
+            type: 'value',
+            max: this.getMax(seriesData, alList)
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis'
+          },
+          series: []
+        };
+        for (const [index, item] of seriesData.entries()) {
+          if (this.checkAL(item, alList) !== 0) {
+            option.series.push({
+              data: item.data,
+              type: 'line',
+              name: `${item.name}(℃)`,
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: color[index]
+              },
+              lineStyle: {
+                color: color[index]
+              },
+              markLine: {
+                symbol: 'none',
+
+                data: [
+                  {
+                    silent: false,
+                    lineStyle: {
+                      type: 'dashed',
+                      color: color[index]
+                    },
+                    // label: {
+                    //   position: "end",
+                    // },
+                    yAxis: this.checkAL(item, alList)
+                  }
+                ]
+              }
+            });
+          } else {
+            option.series.push({
+              data: item.data,
+              type: 'line',
+              name: `${item.name}(℃)`,
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: color[index]
+              },
+              lineStyle: {
+                color: color[index]
+              }
+            });
+          }
+        }
+        return option;
+      },
+      // 默认当月
+      setMonth() {
+        this.temperatureTime = new Date();
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .line-box {
+    height: 500px;
+    // height: 50%;
+    background: #fff;
+    padding: 20px;
+    margin-top: 10px;
+    box-sizing: border-box;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .tools {
+      display: flex;
+      align-items: center;
+      .el-button {
+        margin: 0 12px;
+      }
+      .timeType {
+        margin: 0 20px;
+        // letter-spacing: 8px;
+        span {
+          cursor: pointer;
+          margin: 0 4px;
+        }
+        span.active,
+        span:hover {
+          // border-bottom: 2px solid $mainColor;
+          // color: $mainColor;
+        }
+      }
+    }
+
+    .el-icon-download {
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .chart-wrapper {
+      height: 400px;
+      > div {
+        height: 100%;
+      }
+    }
+
+    .value-box {
+      text-align: center;
+      span {
+        font-weight: bold;
+        margin-left: 4px;
+      }
+      .average-text {
+        color: #0052d9;
+      }
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/InternetExtruder/InternetExtruder.vue

@@ -0,0 +1,485 @@
+<template>
+  <!-- 物联数据-挤压机-->
+  <div class="extruder-container">
+    <div class="gauge-box">
+      <div class="chart-container">
+        <div ref="chart"></div>
+      </div>
+      <div class="info-box">
+        <el-form label-width="150px" style="width: 100%">
+          <el-row>
+            <template v-for="[key, obj] in Object.entries(realData)">
+              <!-- 过滤掉运行状态 -->
+              <el-col :span="12" v-if="!['status', 'status_m'].includes(key)">
+                <el-form-item :label="obj.name">
+                  <span>{{ obj.value }}</span>
+                  <span style="margin-left: 5px" v-if="obj.unit">{{
+                    obj.unit
+                  }}</span>
+                </el-form-item>
+              </el-col>
+            </template>
+            <!-- 运行状态设置 -->
+            <el-col :span="12" v-if="realData.status_m">
+              <el-form-item label="运行状态">
+                <div class="yx-warp">
+                  <span>{{ realData.status_m.value }}</span>
+                  <span
+                    class="sz-span"
+                    @click="handlsz"
+                    v-if="Object.keys(realData).length == 1"
+                    >设置</span
+                  >
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <chart_temp :id="info.id"></chart_temp>
+    <chart_speed :id="info.id"></chart_speed>
+    <chart_pressure :id="info.id"></chart_pressure>
+    <runningDialog
+      ref="runningDialog"
+      :id="info.id"
+      @succeed="getRealData"
+    ></runningDialog>
+  </div>
+</template>
+
+<script>
+  import chart_pressure from './components/chart_pressure.vue';
+  import chart_speed from './components/chart_speed.vue';
+  import chart_temp from './components/chart_temp.vue';
+  import runningDialog from '../components/runningDialog.vue';
+  // import { getRealData } from '@/api/ledgerAssets/equipment.js';
+  // import mqtt from '../mixins/mqtt.js';
+  // import { debounce } from 'lodash';
+  export default {
+    // mixins: [mqtt],
+    props: {
+      info: {
+        type: Object,
+        default: {}
+      }
+    },
+    components: {
+      chart_temp,
+      chart_speed,
+      chart_pressure,
+      runningDialog
+    },
+
+    data() {
+      return {
+        // 实时数据
+        realData: {},
+        dict: {
+          // 运行状态
+          status: {
+            //0-停止,1-启动,2-定值停止,3-定值启动
+            0: '停止',
+            1: '启动',
+            2: '定值停止',
+            3: '定值启动'
+          }
+        },
+        // mqtt 订阅类别
+        topIc_type: 'EXTRUDER_TOPIC'
+      };
+    },
+    computed: {
+      // mqtt topic
+      TOPIC() {
+        if (this.info.iotId) {
+          return {
+            topic: `/${this.topIc_type}/${this.info.iotId}`,
+            qos: 0
+          };
+        } else {
+          return null;
+        }
+      }
+    },
+    created() {
+      this.getRealData();
+      if (this.TOPIC) {
+        this.mqttInit();
+      }
+    },
+    methods: {
+      initGauge() {
+        let myChart = this.$echarts.init(this.$refs.chart);
+
+        // const max = data <= 100 ? 100 : Math.floor(data * 1.2)
+        // const min = 0
+
+        let option = {
+          tooltip: {
+            show: false
+          },
+          series: [
+            {
+              zlevel: 1,
+              ...this.getGaugeSeries(),
+              center: ['25%', '28%'],
+
+              splitNumber: 4,
+              min: 0,
+              max: this.getMax(this.info.measure_pressure || 0, 120),
+              name: 'Pressure',
+              backgroundColor: '#000',
+              data: [
+                {
+                  value: this.realData.measure_pressure
+                    ? this.realData.measure_pressure.value
+                    : 0,
+                  name: '压力表'
+                }
+              ],
+              detail: {
+                width: '60%',
+                lineHeight: 40,
+                height: 40,
+                fontSize: 18,
+                borderRadius: 8,
+                offsetCenter: [0, '45%'],
+                valueAnimation: true,
+                formatter: function (value) {
+                  return `${value}kg/cm²`;
+                }
+              }
+            },
+            {
+              ...this.getGaugeSeriesBg(),
+              center: ['25%', '28%']
+            },
+
+            {
+              ...this.getGaugeSeries(),
+              zlevel: 1,
+              splitNumber: 4,
+              min: 0,
+              max: this.getMax(this.info.speed || 0, 80),
+              center: ['75%', '28%'],
+              name: 'Pressure1',
+              data: [
+                {
+                  value: this.realData.speed ? this.realData.speed.value : 0,
+                  name: '速度表'
+                }
+              ],
+              detail: {
+                width: '60%',
+                lineHeight: 40,
+                height: 40,
+                fontSize: 18,
+                borderRadius: 8,
+                offsetCenter: [0, '45%'],
+                valueAnimation: true,
+                formatter: function (value) {
+                  return `${value}m/s`;
+                }
+              }
+            },
+            {
+              ...this.getGaugeSeriesBg(),
+              center: ['75%', '28%']
+            },
+            {
+              ...this.getGaugeSeries(),
+              zlevel: 1,
+              splitNumber: 4,
+              min: 0,
+              max: this.getMax(this.info.oil_temp || 0, 400),
+              center: ['25%', '75%'],
+              name: 'Pressure2',
+              data: [
+                {
+                  value: this.realData.oil_temp
+                    ? this.realData.oil_temp.value
+                    : 0,
+                  name: '油温表'
+                }
+              ],
+              detail: {
+                width: '60%',
+                lineHeight: 40,
+                height: 40,
+                fontSize: 18,
+                borderRadius: 8,
+                offsetCenter: [0, '45%'],
+                valueAnimation: true,
+                formatter: function (value) {
+                  return `${value}度`;
+                }
+              }
+            },
+            {
+              ...this.getGaugeSeriesBg(),
+              center: ['25%', '75%']
+            }
+          ]
+        };
+        myChart.setOption(option);
+      },
+
+      getGaugeSeriesBg() {
+        return {
+          data: [],
+          startAngle: 360,
+          endAngle: 0,
+          radius: '41%',
+          type: 'gauge',
+          detail: {
+            show: false
+          },
+          title: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              width: 100,
+              color: [[1, '#fff']]
+            }
+          },
+          progress: {
+            show: false
+          },
+          anchor: {
+            show: false
+          },
+          pointer: {
+            show: false
+          }
+        };
+      },
+      getGaugeSeries() {
+        return {
+          startAngle: 200,
+          endAngle: -20,
+          radius: '40%',
+          type: 'gauge',
+          detail: {
+            valueAnimation: true,
+            formatter: '{value}'
+          },
+          title: {
+            show: true,
+            offsetCenter: [0, '65%'],
+            color: '#9e9e9e',
+            fontSize: 14
+          },
+          axisLabel: {
+            rotate: 360,
+            distance: -38,
+            color: '#666666',
+            fontSize: 18
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            roundCap: true,
+            lineStyle: {
+              width: 12,
+              // color:'#dddefd',
+              color: [[1, '#B9BEFF']]
+            }
+          },
+          progress: {
+            show: true,
+            roundCap: true,
+            width: 12,
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                {
+                  offset: 0,
+                  color: '#15b4ff'
+                },
+                {
+                  offset: 1,
+                  color: '#716dff'
+                }
+              ]),
+              shadowColor: 'rgba(0,138,255,0.45)',
+              shadowBlur: 10,
+              shadowOffsetX: 2,
+              shadowOffsetY: 2
+            }
+          },
+          itemStyle: {
+            color: '#7a71ff',
+            shadowColor: 'rgba(0,138,255,0.45)',
+            shadowBlur: 10,
+            shadowOffsetX: 2,
+            shadowOffsetY: 2,
+            borderCap: 'round'
+          },
+          anchor: {
+            show: true,
+            showAbove: true
+          },
+          pointer: {
+            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+            length: '75%',
+            width: 12,
+            offsetCenter: [0, 8]
+            // itemStyle: {
+            // 	color: '#7a71ff',
+            // }
+          }
+        };
+      },
+
+      //
+      // 请求实时数据
+      async getRealData() {
+        // await getRealData(this.info.id).then((res) => {
+        //   let data = res.data;
+        //   console.log("实时数据", data);
+        //   for (const item of data) {
+        //     this.$set(this.realData, item.identifier, item);
+        //   }
+        // });
+        this.initGauge();
+      },
+      //  mqtt处理数据
+      initMqttData(items) {
+        console.log('mqtt处理数据', items);
+        for (const [key, obj] of Object.entries(items)) {
+          this.realData[key].value = obj.value;
+          this.realData[key].time = obj.time;
+        }
+        // let initGauge = debounce(this.initGauge, 1000);
+        // initGauge();
+      },
+      handlsz() {
+        this.$refs.runningDialog.open();
+      },
+      getMax(data, def = 100) {
+        let half = def / 2;
+
+        if (data <= def) {
+          return def;
+        }
+
+        const n = data % half;
+        const m = Math.floor(data / half);
+
+        return n === 0 ? m * half : (m + 1) * half;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .red {
+    color: #ff4949;
+  }
+  .green {
+    color: #157a2c;
+  }
+  .extruder-container {
+    .gauge-box {
+      display: flex;
+      align-items: stretch;
+      background: #fff;
+      padding: 0 20px;
+      height: 500px;
+      font-weight: bold;
+      .chart-container {
+        flex: 1;
+        display: flex;
+        > div {
+          flex: 1;
+        }
+      }
+      .info-box {
+        flex: 1;
+      }
+    }
+
+    .line-box {
+      height: 500px;
+      background: #fff;
+      padding: 20px;
+      margin-top: 10px;
+
+      .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .tools {
+        display: flex;
+        align-items: center;
+        .timeType {
+          margin: 0 20px;
+          // letter-spacing: 8px;
+          span {
+            cursor: pointer;
+            margin: 0 4px;
+          }
+          span.active,
+          span:hover {
+            // border-bottom: 2px solid $mainColor;
+            // color: $mainColor;
+          }
+        }
+      }
+
+      .el-icon-download {
+        font-size: 18px;
+        cursor: pointer;
+      }
+
+      .chart-wrapper {
+        height: 400px;
+        > div {
+          height: 100%;
+        }
+      }
+
+      .value-box {
+        text-align: center;
+        span {
+          font-weight: bold;
+          margin-left: 4px;
+        }
+        .average-text {
+          color: #0052d9;
+        }
+      }
+    }
+  }
+  .yx-warp {
+    display: flex;
+    align-items: center;
+    .sz-span {
+      border: 1px solid rgb(75, 121, 2);
+      padding: 0 5px;
+      color: rgb(75, 121, 2);
+      height: 25px;
+      line-height: 25px;
+      box-sizing: border-box;
+      font-size: 14px;
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/InternetExtruder/components/chart_pressure.vue

@@ -0,0 +1,360 @@
+<template>
+  <div
+    class="line-box"
+    v-loading="lineLoading"
+    element-loading-text="正在加载中..."
+  >
+    <div class="title">
+      {{ type.name }}({{ type.unit }})
+      <div class="tools">
+        <div class="">
+          <el-date-picker
+            v-model="temperatureTime"
+            :type="active"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+        </div>
+        <div class="timeType">
+          <span
+            :class="{ active: active === 'date' }"
+            @click="dateClick('date')"
+            >日</span
+          >
+          <!-- <span
+              :class="{ active: active === 'week' }"
+              @click="dateClick('week')"
+              >周</span
+            > -->
+          <span
+            :class="{ active: active === 'month' }"
+            @click="dateClick('month')"
+            >月</span
+          >
+          <span
+            :class="{ active: active === 'year' }"
+            @click="dateClick('year')"
+            >年</span
+          >
+        </div>
+        <el-button type="primary" size="small" @click="getInfo">查询</el-button>
+      </div>
+    </div>
+    <div class="value-box">
+      最高值<span class="danger-text">{{ lineData.max }} {{ type.unit }}</span>
+      <el-divider direction="vertical"></el-divider>
+      最低值<span class="danger-text">{{ lineData.min }} {{ type.unit }}</span>
+      <el-divider direction="vertical"></el-divider>
+      平均值<span class="average-text">{{ lineData.avg }} {{ type.unit }}</span>
+    </div>
+    <div class="chart-wrapper">
+      <div ref="chart_pressure"></div>
+    </div>
+  </div>
+</template>
+<script>
+  // import {
+  //   getEquHistory,
+  //   getAlarmThreshold
+  // } from '@/api/ledgerAssets/booksList';
+  import { getMonday } from '@/utils/index';
+  export default {
+    props: ['id'],
+    data() {
+      return {
+        lineLoading: false,
+        temperatureTime: '',
+        active: 'month',
+        dict: {
+          chartTime: {
+            date: 3,
+            month: 2,
+            year: 1
+          }
+        },
+        alarmValue: 0,
+
+        lineData: {
+          max: '',
+          min: '',
+          avg: ''
+        },
+        myChart: null,
+        type: {
+          name: '压力',
+          property: 'measure_pressure',
+          unit: 'Kg/cm²'
+        }
+      };
+    },
+    created() {
+      this.setMonth();
+      this.getInfo();
+    },
+    methods: {
+      dateClick(date) {
+        this.temperatureTime = '';
+        this.active = date;
+      },
+      getInfo() {
+        let time = this.getTimeList(this.temperatureTime);
+        let params = {
+          equId: this.id,
+          property: this.type.property,
+          startTime: time.startTime,
+          endTime: time.endTime,
+          timeType: this.dict.chartTime[this.active]
+        };
+
+        this.lineLoading = true;
+        // getEquHistory(params)
+        //   .then((res) => {
+        //     getAlarmThreshold(params).then((res111) => {
+        //       this.alarmValue =
+        //         res111.data.length > 0 ? res111.data[0].alarmValue : 0;
+        //       this.initTemperature(res.data.timeHistoryList);
+        //       this.lineData.max = res.data.maxValue.toFixed(2);
+        //       this.lineData.min = res.data.minValue.toFixed(2);
+        //       this.lineData.avg = res.data.avgValue.toFixed(2);
+        //     });
+        //   })
+        //   .finally(() => {
+        //     this.lineLoading = false;
+        //   });
+      },
+      // 日期数据格式化
+      getTimeList(date) {
+        function fnNum(num) {
+          return num < 10 ? '0' + num : num;
+        }
+
+        let startTime;
+        let endTime;
+
+        let ndate = date ? new Date(date) : new Date();
+        let year = ndate.getFullYear();
+        let month = ndate.getMonth() + 1;
+        let day = ndate.getDate();
+
+        switch (this.active) {
+          case 'date': {
+            let _date = `${year}-${fnNum(month)}-${fnNum(day)}`;
+            startTime = _date + ' 00:00:00';
+            endTime = _date + ' 23:59:59';
+            break;
+          }
+          case 'month': {
+            let month = getMonday(date);
+            startTime = month[0] + ' 00:00:00';
+            endTime = month[1] + ' 23:59:59';
+            break;
+          }
+          case 'year': {
+            let year = ndate.getFullYear();
+            startTime = year + '-01-01 00:00:00';
+            endTime = year + '-12-31 23:59:59';
+            break;
+          }
+          default:
+            break;
+        }
+        return {
+          startTime,
+          endTime
+        };
+      },
+      //
+      initTemperature(data) {
+        console.log(data);
+        let Axis = [];
+        let seriesData = [];
+        for (const item of data) {
+          const time = item.time.split(' ');
+          switch (this.active) {
+            case 'date': {
+              Axis.push(time[1]);
+              break;
+            }
+            case 'month': {
+              Axis.push(time[0].substr(-5, 5));
+              break;
+            }
+            case 'year': {
+              Axis.push(time[0]);
+              break;
+            }
+            default:
+              break;
+          }
+          seriesData.push(item.value.toFixed(2));
+        }
+        this.$nextTick(() => {
+          this.myChart = this.$echarts.init(this.$refs['chart_pressure']);
+          let option = this.getLineOption(Axis, seriesData);
+          this.myChart.setOption(option);
+        });
+      },
+      //
+      getLineOption(xAxisData = [], seriesData = []) {
+        // 颜色
+        const color = {
+          max: '#0052d9',
+          min: '#bbd3fb',
+          avg: '#157a2c'
+        };
+
+        let markLine = {
+          symbol: 'none',
+          //  /*symbol:"none",               //去掉警戒线最后面的箭头
+          // label: {
+          //   position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+          // },
+          data: [
+            {
+              silent: false, //鼠标悬停事件  true没有，false有
+              lineStyle: {
+                //警戒线的样式  ，虚实  颜色
+                type: 'dashed',
+                // color: "#FA3934",
+                color: this.alarmValue === 0 ? 'transparent' : '#FA3934'
+              },
+              label: {
+                position: 'end'
+                // formatter: "500",
+                // fontSize: "8",
+              },
+              yAxis: this.alarmValue
+            }
+          ]
+        };
+        let option = {
+          // legend: {
+          //   show: true,
+          //   top: 0,
+          //   icon: "rect",
+          //   itemHeight: 4,
+          //   itemWidth: 16,
+          //   textStyle: {
+          //     fontSize: 16,
+          //   },
+          // },
+          grid: {
+            top: 50,
+            left: 50,
+            right: 50,
+            bottom: 60
+          },
+          xAxis: {
+            type: 'category',
+            data: xAxisData
+          },
+          yAxis: {
+            type: 'value'
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis'
+          },
+          dataZoom: [
+            {
+              show: true,
+              bottom: 10,
+              start: 0,
+              end: 100
+            }
+          ],
+          series: [
+            {
+              data: seriesData,
+              type: 'line',
+              name: `${this.type.name}(${this.type.unit})`,
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: color.max
+              },
+              lineStyle: {
+                color: color.max
+              }
+            }
+          ]
+        };
+        if (this.alarmValue === 0) {
+          return option;
+        } else {
+          option.series[0].markLine = markLine;
+          option.yAxis.max = this.checkMax(seriesData);
+          return option;
+        }
+      },
+      checkMax(seriesData) {
+        let max = Math.max(...seriesData, this.alarmValue);
+        return max;
+      },
+      // 默认当月
+      setMonth() {
+        this.temperatureTime = new Date();
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .line-box {
+    height: 500px;
+    // height: 50%;
+    background: #fff;
+    padding: 20px;
+    margin-top: 10px;
+    box-sizing: border-box;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .tools {
+      display: flex;
+      align-items: center;
+      .el-button {
+        margin: 0 12px;
+      }
+      .timeType {
+        margin: 0 20px;
+        // letter-spacing: 8px;
+        span {
+          cursor: pointer;
+          margin: 0 4px;
+        }
+        span.active,
+        span:hover {
+          // border-bottom: 2px solid $mainColor;
+          // color: $mainColor;
+        }
+      }
+    }
+
+    .el-icon-download {
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .chart-wrapper {
+      height: 400px;
+      > div {
+        height: 100%;
+      }
+    }
+
+    .value-box {
+      text-align: center;
+      span {
+        font-weight: bold;
+        margin-left: 4px;
+      }
+      .average-text {
+        color: #0052d9;
+      }
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/InternetExtruder/components/chart_speed.vue

@@ -0,0 +1,360 @@
+<template>
+  <div
+    class="line-box"
+    v-loading="lineLoading"
+    element-loading-text="正在加载中..."
+  >
+    <div class="title">
+      {{ type.name }}({{ type.unit }})
+      <div class="tools">
+        <div class="">
+          <el-date-picker
+            v-model="temperatureTime"
+            :type="active"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+        </div>
+        <div class="timeType">
+          <span
+            :class="{ active: active === 'date' }"
+            @click="dateClick('date')"
+            >日</span
+          >
+          <!-- <span
+              :class="{ active: active === 'week' }"
+              @click="dateClick('week')"
+              >周</span
+            > -->
+          <span
+            :class="{ active: active === 'month' }"
+            @click="dateClick('month')"
+            >月</span
+          >
+          <span
+            :class="{ active: active === 'year' }"
+            @click="dateClick('year')"
+            >年</span
+          >
+        </div>
+        <el-button type="primary" size="small" @click="getInfo">查询</el-button>
+      </div>
+    </div>
+    <div class="value-box">
+      最高值<span class="danger-text">{{ lineData.max }} {{ type.unit }}</span>
+      <el-divider direction="vertical"></el-divider>
+      最低值<span class="danger-text">{{ lineData.min }} {{ type.unit }}</span>
+      <el-divider direction="vertical"></el-divider>
+      平均值<span class="average-text">{{ lineData.avg }} {{ type.unit }}</span>
+    </div>
+    <div class="chart-wrapper">
+      <div ref="chart_speed"></div>
+    </div>
+  </div>
+</template>
+<script>
+  // import {
+  //   getEquHistory,
+  //   getAlarmThreshold
+  // } from '@/api/ledgerAssets/booksList';
+  import { getMonday } from '@/utils/index';
+  export default {
+    props: ['id'],
+    data() {
+      return {
+        lineLoading: false,
+        temperatureTime: '',
+        active: 'month',
+        dict: {
+          chartTime: {
+            date: 3,
+            month: 2,
+            year: 1
+          }
+        },
+        lineData: {
+          max: '',
+          min: '',
+          avg: ''
+        },
+        alarmValue: 0,
+        myChart: null,
+        type: {
+          name: '速度',
+          property: 'speed',
+          unit: 'mm/s'
+        }
+      };
+    },
+    created() {
+      this.setMonth();
+      this.getInfo();
+    },
+    methods: {
+      dateClick(date) {
+        this.temperatureTime = '';
+        this.active = date;
+      },
+      getInfo() {
+        let time = this.getTimeList(this.temperatureTime);
+        let params = {
+          equId: this.id,
+          property: this.type.property,
+          startTime: time.startTime,
+          endTime: time.endTime,
+          timeType: this.dict.chartTime[this.active]
+        };
+
+        this.lineLoading = true;
+        // getEquHistory(params)
+        //   .then((res) => {
+        //     getAlarmThreshold(params).then((res111) => {
+        //       this.alarmValue =
+        //         res111.data.length > 0 ? res111.data[0].alarmValue : 0;
+        //       this.initTemperature(res.data.timeHistoryList);
+        //       this.lineData.max = res.data.maxValue.toFixed(2);
+        //       this.lineData.min = res.data.minValue.toFixed(2);
+        //       this.lineData.avg = res.data.avgValue.toFixed(2);
+        //     });
+        //   })
+        //   .finally(() => {
+        //     this.lineLoading = false;
+        //   });
+      },
+      // 日期数据格式化
+      getTimeList(date) {
+        function fnNum(num) {
+          return num < 10 ? '0' + num : num;
+        }
+
+        let startTime;
+        let endTime;
+
+        let ndate = date ? new Date(date) : new Date();
+        let year = ndate.getFullYear();
+        let month = ndate.getMonth() + 1;
+        let day = ndate.getDate();
+
+        switch (this.active) {
+          case 'date': {
+            let _date = `${year}-${fnNum(month)}-${fnNum(day)}`;
+            startTime = _date + ' 00:00:00';
+            endTime = _date + ' 23:59:59';
+            break;
+          }
+          case 'month': {
+            let month = getMonday(date);
+            startTime = month[0] + ' 00:00:00';
+            endTime = month[1] + ' 23:59:59';
+            break;
+          }
+          case 'year': {
+            let year = ndate.getFullYear();
+            startTime = year + '-01-01 00:00:00';
+            endTime = year + '-12-31 23:59:59';
+            break;
+          }
+          default:
+            break;
+        }
+        return {
+          startTime,
+          endTime
+        };
+      },
+      //
+      initTemperature(data) {
+        console.log(data);
+        let Axis = [];
+        let seriesData = [];
+        for (const item of data) {
+          const time = item.time.split(' ');
+          switch (this.active) {
+            case 'date': {
+              Axis.push(time[1]);
+              break;
+            }
+            case 'month': {
+              Axis.push(time[0].substr(-5, 5));
+              break;
+            }
+            case 'year': {
+              Axis.push(time[0]);
+              break;
+            }
+            default:
+              break;
+          }
+          seriesData.push(item.value.toFixed(2));
+        }
+        this.$nextTick(() => {
+          this.myChart = this.$echarts.init(this.$refs['chart_speed']);
+          let option = this.getLineOption(Axis, seriesData);
+          this.myChart.setOption(option);
+        });
+      },
+      //
+      getLineOption(xAxisData = [], seriesData = []) {
+        // 颜色
+        const color = {
+          max: '#0052d9',
+          min: '#bbd3fb',
+          avg: '#157a2c'
+        };
+
+        let markLine = {
+          symbol: 'none',
+          //  /*symbol:"none",               //去掉警戒线最后面的箭头
+          // label: {
+          //   position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+          // },
+          data: [
+            {
+              silent: false, //鼠标悬停事件  true没有，false有
+              lineStyle: {
+                //警戒线的样式  ，虚实  颜色
+                type: 'dashed',
+                // color: "#FA3934",
+                color: this.alarmValue === 0 ? 'transparent' : '#FA3934'
+              },
+              label: {
+                position: 'end'
+                // formatter: "500",
+                // fontSize: "8",
+              },
+              yAxis: this.alarmValue
+            }
+          ]
+        };
+        let option = {
+          // legend: {
+          //   show: true,
+          //   top: 0,
+          //   icon: "rect",
+          //   itemHeight: 4,
+          //   itemWidth: 16,
+          //   textStyle: {
+          //     fontSize: 16,
+          //   },
+          // },
+          grid: {
+            top: 50,
+            left: 50,
+            right: 50,
+            bottom: 60
+          },
+          xAxis: {
+            type: 'category',
+            data: xAxisData
+          },
+          yAxis: {
+            type: 'value'
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis'
+          },
+          dataZoom: [
+            {
+              show: true,
+              bottom: 10,
+              start: 0,
+              end: 100
+            }
+          ],
+          series: [
+            {
+              data: seriesData,
+              type: 'line',
+              name: `${this.type.name}(${this.type.unit})`,
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: color.max
+              },
+              lineStyle: {
+                color: color.max
+              }
+            }
+          ]
+        };
+        if (this.alarmValue === 0) {
+          return option;
+        } else {
+          option.series[0].markLine = markLine;
+          option.yAxis.max = this.checkMax(seriesData);
+
+          return option;
+        }
+      },
+      checkMax(seriesData) {
+        let max = Math.max(...seriesData, this.alarmValue);
+        return max;
+      },
+      // 默认当月
+      setMonth() {
+        this.temperatureTime = new Date();
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .line-box {
+    height: 500px;
+    // height: 50%;
+    background: #fff;
+    padding: 20px;
+    margin-top: 10px;
+    box-sizing: border-box;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .tools {
+      display: flex;
+      align-items: center;
+      .el-button {
+        margin: 0 12px;
+      }
+      .timeType {
+        margin: 0 20px;
+        // letter-spacing: 8px;
+        span {
+          cursor: pointer;
+          margin: 0 4px;
+        }
+        span.active,
+        span:hover {
+          // border-bottom: 2px solid $mainColor;
+          // color: $mainColor;
+        }
+      }
+    }
+
+    .el-icon-download {
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .chart-wrapper {
+      height: 400px;
+      > div {
+        height: 100%;
+      }
+    }
+
+    .value-box {
+      text-align: center;
+      span {
+        font-weight: bold;
+        margin-left: 4px;
+      }
+      .average-text {
+        color: #0052d9;
+      }
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/InternetExtruder/components/chart_temp.vue

@@ -0,0 +1,360 @@
+<template>
+  <div
+    class="line-box"
+    v-loading="lineLoading"
+    element-loading-text="正在加载中..."
+  >
+    <div class="title">
+      {{ type.name }}({{ type.unit }})
+      <div class="tools">
+        <div class="">
+          <el-date-picker
+            v-model="temperatureTime"
+            :type="active"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+        </div>
+        <div class="timeType">
+          <span
+            :class="{ active: active === 'date' }"
+            @click="dateClick('date')"
+            >日</span
+          >
+          <!-- <span
+              :class="{ active: active === 'week' }"
+              @click="dateClick('week')"
+              >周</span
+            > -->
+          <span
+            :class="{ active: active === 'month' }"
+            @click="dateClick('month')"
+            >月</span
+          >
+          <span
+            :class="{ active: active === 'year' }"
+            @click="dateClick('year')"
+            >年</span
+          >
+        </div>
+        <el-button type="primary" size="small" @click="getInfo">查询</el-button>
+      </div>
+    </div>
+    <div class="value-box">
+      最高值<span class="danger-text">{{ lineData.max }} {{ type.unit }}</span>
+      <el-divider direction="vertical"></el-divider>
+      最低值<span class="danger-text">{{ lineData.min }} {{ type.unit }}</span>
+      <el-divider direction="vertical"></el-divider>
+      平均值<span class="average-text">{{ lineData.avg }} {{ type.unit }}</span>
+    </div>
+    <div class="chart-wrapper">
+      <div ref="chart-temperature"></div>
+    </div>
+  </div>
+</template>
+<script>
+  // import { getEquHistory, getAlarmThreshold } from "@/api/ledgerAssets/booksList";
+  import { getMonday } from '@/utils/index';
+  export default {
+    props: ['id'],
+    data() {
+      return {
+        lineLoading: false,
+        temperatureTime: '',
+        alarmValue: 0,
+        active: 'month',
+        dict: {
+          chartTime: {
+            date: 3,
+            month: 2,
+            year: 1
+          }
+        },
+        lineData: {
+          max: '',
+          min: '',
+          avg: ''
+        },
+        myChart: null,
+        type: {
+          name: '油温',
+          property: 'oil_temp',
+          unit: '℃'
+        }
+      };
+    },
+    created() {
+      this.setMonth();
+      this.getInfo();
+    },
+    methods: {
+      dateClick(date) {
+        this.temperatureTime = '';
+        this.active = date;
+      },
+      getInfo() {
+        let time = this.getTimeList(this.temperatureTime);
+        let params = {
+          equId: this.id,
+          property: this.type.property,
+          startTime: time.startTime,
+          endTime: time.endTime,
+          timeType: this.dict.chartTime[this.active]
+        };
+
+        this.lineLoading = true;
+        // getEquHistory(params)
+        //   .then((res) => {
+        //     getAlarmThreshold(params).then((res111) => {
+        //       this.alarmValue =
+        //         res111.data.length > 0 ? res111.data[0].alarmValue : 0;
+        //       console.log("params", res);
+        //       this.initTemperature(res.data.timeHistoryList);
+        //       this.lineData.max = res.data.maxValue.toFixed(2);
+        //       this.lineData.min = res.data.minValue.toFixed(2);
+        //       this.lineData.avg = res.data.avgValue.toFixed(2);
+        //     });
+
+        //     // alert(res); //alert("params", res); //alert
+        //   })
+        //   .finally(() => {
+        //     this.lineLoading = false;
+        //   });
+      },
+      // 日期数据格式化
+      getTimeList(date) {
+        function fnNum(num) {
+          return num < 10 ? '0' + num : num;
+        }
+
+        let startTime;
+        let endTime;
+
+        let ndate = date ? new Date(date) : new Date();
+        let year = ndate.getFullYear();
+        let month = ndate.getMonth() + 1;
+        let day = ndate.getDate();
+
+        switch (this.active) {
+          case 'date': {
+            let _date = `${year}-${fnNum(month)}-${fnNum(day)}`;
+            startTime = _date + ' 00:00:00';
+            endTime = _date + ' 23:59:59';
+            break;
+          }
+          case 'month': {
+            let month = getMonday(date);
+            startTime = month[0] + ' 00:00:00';
+            endTime = month[1] + ' 23:59:59';
+            break;
+          }
+          case 'year': {
+            let year = ndate.getFullYear();
+            startTime = year + '-01-01 00:00:00';
+            endTime = year + '-12-31 23:59:59';
+            break;
+          }
+          default:
+            break;
+        }
+        return {
+          startTime,
+          endTime
+        };
+      },
+      //
+      initTemperature(data) {
+        console.log(data);
+        let Axis = [];
+        let seriesData = [];
+        for (const item of data) {
+          const time = item.time.split(' ');
+          switch (this.active) {
+            case 'date': {
+              Axis.push(time[1]);
+              break;
+            }
+            case 'month': {
+              Axis.push(time[0].substr(-5, 5));
+              break;
+            }
+            case 'year': {
+              Axis.push(time[0]);
+              break;
+            }
+            default:
+              break;
+          }
+          seriesData.push(item.value.toFixed(2));
+        }
+        this.$nextTick(() => {
+          this.myChart = this.$echarts.init(this.$refs['chart-temperature']);
+          let option = this.getLineOption(Axis, seriesData);
+          this.myChart.setOption(option);
+        });
+      },
+      //
+      getLineOption(xAxisData = [], seriesData = []) {
+        // 颜色
+        const color = {
+          max: '#0052d9',
+          min: '#bbd3fb',
+          avg: '#157a2c'
+        };
+
+        let markLine = {
+          symbol: 'none',
+          //  /*symbol:"none",               //去掉警戒线最后面的箭头
+          // label: {
+          //   position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+          // },
+          data: [
+            {
+              silent: false, //鼠标悬停事件  true没有，false有
+              lineStyle: {
+                //警戒线的样式  ，虚实  颜色
+                type: 'dashed',
+                // color: "#FA3934",
+                color: this.alarmValue === 0 ? 'transparent' : '#FA3934'
+              },
+              label: {
+                position: 'end'
+                // formatter: "500",
+                // fontSize: "8",
+              },
+              yAxis: this.alarmValue
+            }
+          ]
+        };
+        let option = {
+          // legend: {
+          //   show: true,
+          //   top: 0,
+          //   icon: "rect",
+          //   itemHeight: 4,
+          //   itemWidth: 16,
+          //   textStyle: {
+          //     fontSize: 16,
+          //   },
+          // },
+          grid: {
+            top: 50,
+            left: 50,
+            right: 50,
+            bottom: 60
+          },
+          xAxis: {
+            type: 'category',
+            data: xAxisData
+          },
+          yAxis: {
+            type: 'value'
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis'
+          },
+          dataZoom: [
+            {
+              show: true,
+              bottom: 10,
+              start: 0,
+              end: 100
+            }
+          ],
+          series: [
+            {
+              data: seriesData,
+              type: 'line',
+              name: `${this.type.name}(${this.type.unit})`,
+              symbol: 'circle',
+              symbolSize: 8,
+              itemStyle: {
+                color: color.max
+              },
+              lineStyle: {
+                color: color.max
+              }
+            }
+          ]
+        };
+        if (this.alarmValue === 0) {
+          return option;
+        } else {
+          option.series[0].markLine = markLine;
+          option.yAxis.max = this.checkMax(seriesData);
+
+          return option;
+        }
+      },
+      checkMax(seriesData) {
+        let max = Math.max(...seriesData, this.alarmValue);
+        return max;
+      },
+      // 默认当月
+      setMonth() {
+        this.temperatureTime = new Date();
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .line-box {
+    height: 500px;
+    // height: 50%;
+    background: #fff;
+    padding: 20px;
+    margin-top: 10px;
+    box-sizing: border-box;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .tools {
+      display: flex;
+      align-items: center;
+      .el-button {
+        margin: 0 12px;
+      }
+      .timeType {
+        margin: 0 20px;
+        // letter-spacing: 8px;
+        span {
+          cursor: pointer;
+          margin: 0 4px;
+        }
+        span.active,
+        span:hover {
+          // border-bottom: 2px solid $mainColor;
+          // color: $mainColor;
+        }
+      }
+    }
+
+    .el-icon-download {
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    .chart-wrapper {
+      height: 400px;
+      > div {
+        height: 100%;
+      }
+    }
+
+    .value-box {
+      text-align: center;
+      span {
+        font-weight: bold;
+        margin-left: 4px;
+      }
+      .average-text {
+        color: #0052d9;
+      }
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/InternetOther/index.vue

@@ -0,0 +1,294 @@
+<template>
+  <!-- 其他设备-->
+  <div class="extruder-container">
+    <div class="gauge-box">
+      <div class="info-box">
+        <el-form label-width="150px">
+          <el-row>
+            <template v-for="[key, obj] in Object.entries(realData)">
+              <!-- 过滤掉运行状态 -->
+              <el-col :span="12" v-if="!['status', 'status_m'].includes(key)">
+                <el-form-item :label="obj.name">
+                  <span>{{ obj.value }}</span>
+                  <span style="margin-left: 5px" v-if="obj.unit">{{
+                    obj.unit
+                  }}</span>
+                </el-form-item>
+              </el-col>
+            </template>
+            <!-- 运行状态设置 -->
+            <el-col :span="12" v-if="realData.status_m">
+              <el-form-item label="运行状态">
+                <div class="yx-warp">
+                  <span>{{ realData.status_m.value }}</span>
+                  <span
+                    class="sz-span"
+                    @click="handlsz"
+                    v-if="Object.keys(realData).length == 1"
+                    >设置</span
+                  >
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <runningDialog
+      ref="runningDialog"
+      :id="id"
+      @succeed="getRealData"
+    ></runningDialog>
+  </div>
+</template>
+
+<script>
+  // import { getRealData } from '@/api/ledgerAssets/equipment.js';
+  import runningDialog from '../components/runningDialog.vue';
+  export default {
+    props: ['id'],
+    components: { runningDialog },
+    data() {
+      return {
+        dict: {
+          // 运行状态
+          status: {
+            //0-停止,1-启动,2-定值停止,3-定值启动
+            0: '停止',
+            1: '启动',
+            2: '定值停止',
+            3: '定值启动'
+          }
+        },
+
+        // 实时数据
+        realData: {}
+      };
+    },
+    created() {
+      this.getRealData();
+    },
+    methods: {
+      // 请求实时数据
+      async getRealData() {
+        // await getRealData(this.id).then(res => {
+        //   let order = [
+        //     'temp',
+        //     'o_temp',
+        //     'temp1',
+        //     'temp2',
+        //     'temp3',
+        //     'temp4',
+        //     'running_time',
+        //     'remain_time'
+        //   ]
+        //   let data = res.data.sort((a, b) => {
+        //     return order.indexOf(a.identifier) - order.indexOf(b.identifier)
+        //   })
+        //   for (const item of data) {
+        //     this.$set(this.realData, item.identifier, item)
+        //   }
+        // })
+      },
+
+      handlsz() {
+        this.$refs.runningDialog.open();
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  $width: 280px;
+  .red {
+    color: #ff4949;
+  }
+  .green {
+    color: #157a2c;
+  }
+  ::v-deep.extruder-container {
+    .gauge-box {
+      display: flex;
+      height: 60vh;
+      background-color: #fff;
+      min-height: 500px;
+      padding-bottom: 50px;
+    }
+    .chart-container {
+      width: 60%;
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .chart-wrapper {
+        width: 50%;
+        height: 50%;
+        // background: url('~@/assets/img/charts/dryingBox-bg.jpg') no-repeat 50%
+        //   8px;
+        // background-image: url('~@/assets/img/charts/dryingBox-bg.jpg');
+        background-size: contain;
+        // background-repeat: no-repeat;
+        // background-position: center 20%;
+        #chart,
+        #chart1,
+        #chart2,
+        #chart3 {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .info-box {
+      width: 40%;
+      height: 100%;
+      .el-form {
+        flex: 1;
+      }
+      .el-form-item__label {
+        font-weight: bold;
+        font-size: 16px;
+      }
+    }
+    // .gauge-box {
+    //   display: flex;
+    //   // align-items: stretch;
+    //   height: 50vh;
+    //   background: #fff;
+    //   padding: 0 20px;
+    //   // height: 50%;
+    //   box-sizing: border-box;
+    //   // min-height: 500px;
+    //   font-weight: bold;
+    //   .chart-container {
+    //     flex: 6;
+    //     // width: $width * 2 + 100px;
+
+    //     display: flex;
+    //     flex-wrap: wrap;
+
+    //     .chart-wrapper {
+    //       // float: left;
+    //       margin-bottom: 20px;
+    //       width: 50%;
+    //       height: 50%;
+    //       // flex: 1;
+    //       // height: $width / (360 / 304);
+    //       position: relative;
+    //       display: flex;
+    //       z-index: 1;
+    //       > div {
+    //         flex: 1;
+    //         // width: 100%;
+    //         // height: 100%;
+    //         position: relative;
+    //         z-index: 1;
+    //       }
+    //       img {
+    //         width: 100%;
+    //         position: absolute;
+    //         left: 0;
+    //         top: 0;
+    //         z-index: 0;
+    //       }
+    //       #chart,
+    //       #chart1,
+    //       #chart2,
+    //       #chart3 {
+    //         width: 100%;
+    //         // height: 100%;
+    //       }
+
+    //       &:nth-of-type(3),
+    //       &:nth-of-type(1) {
+    //         // margin-right: vw(80);
+    //       }
+    //     }
+    //   }
+    //   .info-box {
+    //     flex: 4;
+    //     display: flex;
+    //     align-items: center;
+    //     .el-form {
+    //       flex: 1;
+    //     }
+    //     .el-form-item__label {
+    //       font-weight: bold;
+    //       font-size: 16px;
+    //     }
+    //   }
+    // }
+
+    .line-box {
+      height: 500px;
+      // height: 50%;
+      background: #fff;
+      padding: 20px;
+      margin-top: 10px;
+      box-sizing: border-box;
+
+      .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .tools {
+        display: flex;
+        align-items: center;
+        .el-button {
+          margin: 0 12px;
+        }
+        .timeType {
+          margin: 0 20px;
+          // letter-spacing: 8px;
+          span {
+            cursor: pointer;
+            margin: 0 4px;
+          }
+          span.active,
+          span:hover {
+            // border-bottom: 2px solid $mainColor;
+            // color: $mainColor;
+          }
+        }
+      }
+
+      .el-icon-download {
+        font-size: 18px;
+        cursor: pointer;
+      }
+
+      .chart-wrapper {
+        height: 400px;
+        > div {
+          height: 100%;
+        }
+      }
+
+      .value-box {
+        text-align: center;
+        span {
+          font-weight: bold;
+          margin-left: 4px;
+        }
+        .average-text {
+          color: #0052d9;
+        }
+      }
+    }
+  }
+  .yx-warp {
+    display: flex;
+    align-items: center;
+    .sz-span {
+      border: 1px solid rgb(75, 121, 2);
+      padding: 0 5px;
+      color: rgb(75, 121, 2);
+      height: 25px;
+      line-height: 25px;
+      box-sizing: border-box;
+      font-size: 14px;
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/components/runningDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <!-- 设备运行状态修改 -->
+  <el-dialog
+    :visible.sync="visible"
+    title="设置运行状态"
+    width="400px"
+    @close="cancel"
+  >
+    <el-row :gutter="20">
+      <el-col :span="8" class="el-col"
+        ><el-radio v-model="status" :label="'START'">启动</el-radio></el-col
+      >
+      <el-col :span="8" class="el-col"
+        ><el-radio v-model="status" :label="'RUN'">运行</el-radio></el-col
+      >
+      <el-col :span="8" class="el-col"
+        ><el-radio v-model="status" :label="'STOP'">停机</el-radio></el-col
+      >
+      <el-col :span="8" class="el-col"
+        ><el-radio v-model="status" :label="'IDLE'">空闲</el-radio></el-col
+      >
+      <el-col :span="8" class="el-col"
+        ><el-radio v-model="status" :label="'TOBE_MATERIAL'"
+          >待料</el-radio
+        ></el-col
+      >
+      <el-col :span="8" class="el-col"
+        ><el-radio v-model="status" :label="'FAULT'">故障</el-radio></el-col
+      >
+      <el-col :span="8" class="el-col"
+        ><el-radio v-model="status" :label="'REPAIR'">检修</el-radio></el-col
+      >
+    </el-row>
+    <div slot="footer">
+      <el-button type="primary" @click="submit" :loading="loading"
+        >确认</el-button
+      >
+      <el-button type="primary" plain @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  // import { setupdateStatus } from '@/api/ledgerAssets/equipment.js';
+  export default {
+    props: {
+      id: [Number, String]
+    },
+    data() {
+      return {
+        loading: false,
+        visible: false,
+        status: null
+      };
+    },
+    methods: {
+      open(row) {
+        this.visible = true;
+      },
+      cancel() {
+        this.status = null;
+        this.visible = false;
+      },
+      //
+      submit() {
+        if (this.status === null) {
+          this.$message.error('请选择运行状态');
+          return;
+        }
+        let par = {
+          id: this.id,
+          status: this.status
+        };
+        // setupdateStatus(par).then((res) => {
+        //   this.$emit('succeed');
+        //   this.cancel();
+        // });
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .el-col {
+    margin-bottom: 10px;
+  }
+</style>

src/views/ledgerAssets/components/details/internet.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <!-- 物联数据-->
+    <div class="basic-details" id="internet">
+      <div class="basic-details-title">
+        <span class="border-span">物联数据</span>
+      </div>
+    </div>
+    <!-- 挤压机 65 -->
+    <InternetExtruder :info="info" v-if="parentClassId == '65'" />
+    <!-- 干燥箱 57 -->
+    <InternetDryingBox :info="info" v-else-if="parentClassId == '57'" />
+    <!-- 其他设备 -->
+    <InternetOther v-else :id="id"></InternetOther>
+  </div>
+</template>
+
+<script>
+  import InternetExtruder from './InternetExtruder/InternetExtruder';
+  import InternetDryingBox from './InternetDryingBox/InternetDryingBox';
+  import InternetOther from './InternetOther';
+  // import { getDetail } from '@/api/ledgerAssets/equipment';
+  export default {
+    props: ['id'],
+    components: { InternetExtruder, InternetDryingBox, InternetOther },
+
+    data() {
+      return {
+        iotId: null,
+        // 设备信息
+        info: '',
+        // 父类id
+        parentClassId: ''
+      };
+    },
+    created() {
+      this.getInfo();
+    },
+    methods: {
+      getInfo() {
+        // getDetail({
+        //   id: this.id
+        // }).then((res) => {
+        //   this.info = res.data;
+        //   this.parentClassId = this.setParentClassId(
+        //     this.info.information.classificationUrlId
+        //   );
+        // });
+      },
+      // 获取父类id
+      setParentClassId(val) {
+        let data = JSON.parse(val);
+        return data[1];
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .basic-details {
+    background: #fff;
+    padding: 20px;
+  }
+  .wrapper {
+    background: #fff;
+    padding: 20px;
+  }
+
+  .no-data {
+    background: #fff;
+    line-height: 100px;
+    font-size: 26px;
+    text-align: center;
+  }
+</style>

src/views/ledgerAssets/components/details/inventory.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="wrapper">
+    <!-- 盘点记录 -->
+    <div class="basic-details" id="check">
+      <div class="basic-details-title">
+        <span class="border-span"> 盘点记录</span>
+      </div>
+      <el-table
+        :data="tableData"
+        border
+        tooltip-effect="dark"
+        style="width: 100%"
+        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+      >
+        <el-table-column type="index" label="序号" />
+        <el-table-column prop="planCode" width="180px" label="计划单号" />
+        <el-table-column prop="workOrderCode" width="180px" label="工单单号" />
+        <el-table-column prop="executeUserName" label="执行人" />
+        <el-table-column prop="createTime" width="160px" label="计划创建时间" />
+        <el-table-column prop="issuedTime" width="180px" label="计划下发时间" />
+        <el-table-column prop="acceptTime" width="180px" label="执行开始时间" />
+        <el-table-column prop="finishTime" width="180px" label="执行结束时间" />
+        <el-table-column prop="code" label="执行工时(分钟)">
+          <template slot-scope="{ row }">
+            <span>{{ row ? time(row.acceptTime, row.finishTime) : '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态">
+          <template slot-scope="{ row }">
+            <span>{{ row ? statusObj[row.status] : '' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page-wrapper">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size.sync="size"
+          :current-page.sync="page"
+          @current-change="_getRepairRecord"
+          @size-change="_getRepairRecord"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  // import mixins from '../mixins/index'
+  // import { getWorkOrderRecord } from '@/api/ledgerAssets/booksList'
+  export default {
+    // mixins: [mixins],
+    data() {
+      return {
+        tableData: [],
+        size: 10,
+        page: 1,
+        total: 0,
+        statusObj: {
+          0: '待接收',
+          1: '执行中',
+          2: '待审核',
+          3: '完成'
+        }
+      };
+    },
+    created() {
+      this._getRepairRecord();
+    },
+    methods: {
+      // async _getRepairRecord () {
+      //   const res = await getWorkOrderRecord({
+      //     equiId: this.$route.query.id,
+      //     workOrderType: 4,
+      //     size: this.size,
+      //     page: this.page
+      //   })
+      //   if (res?.success) {
+      //     this.tableData = res.data?.records || []
+      //     this.total = res.data?.total || 0
+      //   }
+      // }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    background: #fff;
+    padding: 20px;
+  }
+  .page-wrapper {
+    padding-top: 12px;
+    text-align: right;
+  }
+</style>

src/views/ledgerAssets/components/details/maintain.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="wrapper">
+    <!-- 保养 -->
+    <div class="basic-details" id="mould">
+      <el-form label-width="120px">
+        <el-row>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="工单单号">
+              <el-input
+                v-model="searchForm.workOrderCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="计划单号">
+              <el-input
+                v-model="searchForm.planCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="保养名称">
+              <el-input
+                v-model="searchForm.planName"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="保养人员">
+              <el-input
+                v-model="searchForm.executeUserName"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="执行结果">
+              <el-select
+                filterable
+                clearable
+                v-model="searchForm.resultStatus"
+                class="w100"
+                size="small"
+              >
+                <el-option value="1" label="正常"></el-option>
+                <el-option value="0" label="异常"></el-option>
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :md="12" :sm="16" :xs="16">
+            <el-form-item>
+              <el-col :span="8">
+                <el-select
+                  filterable
+                  v-model="searchForm.startTimeType"
+                  class="w100"
+                  size="small"
+                >
+                  <el-option
+                    v-for="(item, index) in option.startTimeType"
+                    :key="index"
+                    :value="item.value"
+                    :label="item.label"
+                  ></el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="16">
+                <el-date-picker
+                  class="form-input"
+                  size="small"
+                  v-model="searchForm.date"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :default-time="['00:00:00', '23:59:59']"
+                >
+                </el-date-picker>
+              </el-col> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="16" :xs="16" style="text-align: right">
+            <el-button icon="el-icon-refresh-left" size="small" @click="rest"
+              >重置</el-button
+            >
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="small"
+              @click="search"
+              >搜索</el-button
+            ></el-col
+          >
+        </el-row>
+      </el-form>
+      <el-table
+        :data="tableData"
+        border
+        tooltip-effect="dark"
+        style="width: 100%"
+        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+      >
+        <el-table-column
+          width="80px"
+          label="序号"
+          type="index"
+          :index="indexMethod"
+        >
+          <!-- <template slot-scope="{ $index }">
+            {{ $tableIndex($index, page, size) }}
+          </template> -->
+        </el-table-column>
+        <el-table-column prop="workOrderCode" label="工单编号">
+          <template slot-scope="scope">
+            <el-link
+              type="primary"
+              class="repairsCode"
+              @click="jumpDetails(scope.row)"
+            >
+              {{ scope.row.workOrderCode }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="planCode" label="计划单号" />
+        <el-table-column prop="planName" label="保养名称" />
+        <el-table-column prop="executeUserName" label="保养人员" />
+        <el-table-column prop="createTime" label="工单生成时间" />
+        <el-table-column prop="acceptTime" label="开工时间" />
+        <el-table-column prop="finishTime" label="报工时间" />
+        <el-table-column prop="practicalTime" label="实际工时">
+          <template slot-scope="{ row }">
+            {{ time_interval(row.acceptTime, row.finishTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="resultStatus" label="执行结果">
+          <template slot-scope="{ row }">
+            <span
+              :class="{
+                'danger-text': row.resultStatus === 2 || row.resultStatus === 3
+              }"
+              >{{ ['', '正常', '异常', '异常'][row.resultStatus] }}</span
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div
+        class="zw-table-footer"
+        style="display: flex; justify-content: flex-end"
+      >
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[15, 30, 50, 100, 500]"
+          :page-size.sync="pages.size"
+          :current-page.sync="pages.page"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  // import mixins from '../mixins/index'
+  import pagenation from '@/components/Pagination';
+  // import { getsheetwork, getDetail } from '@/api/ledgerAssets/equipment';
+  export default {
+    // mixins: [mixins],
+    props: ['code'],
+    components: { pagenation },
+    data() {
+      return {
+        informationId: '',
+        tableData: [],
+        searchForm: {
+          workOrderCode: '',
+          planCode: '',
+          planName: '',
+          repairsCode: '',
+          executeUserName: '',
+          resultStatus: '',
+          startTimeType: '1',
+          date: ''
+        },
+        pages: {
+          page: 1,
+          size: 15
+        },
+        total: 0,
+        option: {
+          startTimeType: [
+            {
+              value: '1',
+              label: '工单生成时间'
+            },
+            {
+              value: '2',
+              label: '开工时间'
+            },
+            {
+              value: '3',
+              label: '完工时间'
+            }
+          ]
+        }
+      };
+    },
+    created() {
+      this.getdata();
+    },
+    methods: {
+      // 实现分页序号连贯
+      indexMethod(index) {
+        index = index + 1 + (this.pages.page - 1) * this.pages.size;
+        return index;
+      },
+      getdata() {
+        let par = {
+          workOrderType: 2,
+          equiCode: this.code,
+          ...this.pages,
+          ...this.searchForm
+        };
+        if (this.searchForm.date) {
+          par.startTime = this.searchForm.date[0];
+          par.endTime = this.searchForm.date[1];
+        }
+        // getsheetwork(par).then((res) => {
+        //   this.tableData = res.data.records;
+        //   this.total = res.data.total;
+        // });
+      },
+      search() {
+        this.pages.page = 1;
+        this.getdata();
+      },
+      rest() {
+        this.searchForm = {
+          workOrderCode: '',
+          planCode: '',
+          planName: '',
+          repairsCode: '',
+          executeUserName: '',
+          startTimeType: '1',
+          date: ''
+        };
+        this.pages.page = 1;
+        this.getdata();
+      },
+      //跳转详情
+      jumpDetails(row) {
+        this.$router.push({
+          path: `/maintenance/worksheet/details`,
+          query: {
+            code: row.workOrderCode
+          }
+        });
+      },
+      handleCurrentChange() {
+        this.getdata();
+      },
+      handleSizeChange() {
+        this.pages.page = 1;
+        this.getdata();
+      },
+      // 计算实际工时
+      time_interval(dt1, dt2) {
+        if (!dt1 || !dt2) {
+          return '';
+        }
+        if (typeof dt1 == 'string') {
+          dt1 = new Date(dt1.replace(/-/, '/'));
+          dt2 = new Date(dt2.replace(/-/, '/'));
+        }
+        var res = dt2 - dt1;
+        if (isNaN(res)) throw Error('invalid dates arguments');
+        let re = res / (1000 * 60 * 60);
+
+        var h = parseInt(re);
+        var m = parseInt((re - h) * 60);
+        let result = '';
+        if (h) {
+          result += `${h} 小时`;
+        }
+        if (m) {
+          result += `${m} 分钟`;
+        }
+        return result;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    background: #fff;
+    padding: 20px;
+  }
+
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

src/views/ledgerAssets/components/details/malfunction.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="wrapper">
+    <!-- 故障 -->
+    <div class="basic-details" id="mould">
+      <el-form label-width="120px">
+        <el-row>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="报修记录单号">
+              <el-input
+                v-model="searchForm.repairsCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="来源编码">
+              <el-input
+                v-model="searchForm.sourceCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="报修人">
+              <el-input
+                v-model="searchForm.repairsPerson"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="12" :sm="16" :xs="16">
+            <el-form-item label="报修时间">
+              <el-date-picker
+                class="form-input"
+                size="small"
+                v-model="searchForm.date"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :default-time="['00:00:00', '23:59:59']"
+              >
+              </el-date-picker> </el-form-item
+          ></el-col>
+
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="来源">
+              <el-select
+                filterable
+                v-model="searchForm.source"
+                class="w100"
+                size="small"
+              >
+                <el-option
+                  :value="item.value"
+                  :label="item.label"
+                  v-for="item in option.source"
+                  :key="item.value"
+                ></el-option>
+              </el-select> </el-form-item
+          ></el-col>
+
+          <el-col :md="6" :sm="16" :xs="16" style="text-align: right">
+            <el-button icon="el-icon-refresh-left" size="small" @click="rest"
+              >重置</el-button
+            >
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="small"
+              @click="search"
+              >搜索</el-button
+            ></el-col
+          >
+        </el-row>
+      </el-form>
+      <el-table
+        :data="tableData"
+        border
+        tooltip-effect="dark"
+        style="width: 100%"
+        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+      >
+        <el-table-column
+          width="80px"
+          label="序号"
+          type="index"
+          :index="indexMethod"
+        >
+          <!-- <template slot-scope="{ $index }">
+            {{ $tableIndex($index, page, size) }}
+          </template> -->
+        </el-table-column>
+        <el-table-column prop="repairsCode" label="报修记录单号">
+          <template slot-scope="scope">
+            <div class="repairsCode" @click="jumpDetails(scope.row)">
+              {{ scope.row.repairsCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="source.desc" label="来源" />
+        <el-table-column prop="repairsPerson" label="报修类型">
+          <template slot-scope="{ row }">
+            {{ row.source.code == 3 ? '自动报修' : '手动报修' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="sourceCode" label="来源编码" />
+
+        <el-table-column prop="repairsPerson" label="报修人" />
+        <el-table-column prop="createTime" label="报修时间" />
+        <el-table-column prop="acceptTime" label="维修工单编号">
+          <template slot-scope="scope">
+            {{ setAcceptTime(scope.row.acceptTime) }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="finishTime" label="验收人" /> -->
+        <el-table-column prop="finishTime" label="验收时间" />
+      </el-table>
+      <div
+        class="zw-table-footer"
+        style="display: flex; justify-content: flex-end"
+      >
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[15, 30, 50, 100, 500]"
+          :page-size.sync="pages.size"
+          :current-page.sync="pages.page"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <!-- <DetailsDialog ref="detailsDialogRef" /> -->
+  </div>
+</template>
+
+<script>
+  // import mixins from '../mixins/index'
+  import pagenation from '@/components/Pagination';
+  // import { getGzgetPage } from "@/api/ledgerAssets/equipment";
+  // import DetailsDialog from "@/views/feature/maintenance/repair/RepairDetailsDialog.vue";
+  export default {
+    // mixins: [mixins],
+    props: ['code'],
+    // DetailsDialog
+    components: { pagenation },
+    data() {
+      return {
+        informationId: '',
+        tableData: [],
+        searchForm: {
+          repairsCode: '',
+          sourceCode: '',
+          repairsPerson: '',
+          source: '',
+          date: ''
+        },
+        pages: {
+          page: 1,
+          size: 15
+        },
+        total: 0,
+        option: {
+          startTimeType: [
+            {
+              value: '1',
+              label: '工单生成时间'
+            },
+            {
+              value: '2',
+              label: '开工时间'
+            },
+            {
+              value: '3',
+              label: '完工时间'
+            }
+          ],
+          source: [
+            {
+              value: '1',
+              label: '手动创建'
+            },
+            {
+              value: '3',
+              label: '告警通知'
+            },
+            {
+              value: '4',
+              label: '保养工单'
+            },
+            {
+              value: '5',
+              label: '巡点检工单'
+            }
+          ]
+        }
+      };
+    },
+    created() {
+      this.getdata();
+    },
+    methods: {
+      // 实现分页序号连贯
+      indexMethod(index) {
+        index = index + 1 + (this.pages.page - 1) * this.pages.size;
+        return index;
+      },
+      getdata() {
+        let par = {
+          equiCode: this.code,
+          ...this.pages,
+          ...this.searchForm
+        };
+        if (this.searchForm.date) {
+          par.startTime = this.searchForm.date[0];
+          par.endTime = this.searchForm.date[1];
+        }
+
+        getGzgetPage(par).then((res) => {
+          this.tableData = res.data.records;
+          this.total = res.data.total;
+        });
+      },
+      search() {
+        this.pages.page = 1;
+        this.getdata();
+      },
+      rest() {
+        this.searchForm = {
+          workOrderCode: '',
+          planCode: '',
+          planName: '',
+          repairsCode: '',
+          executeUserName: '',
+          startTimeType: '1',
+          date: ''
+        };
+        this.pages.page = 1;
+        this.getdata();
+      },
+      setAcceptTime(val) {
+        if (val) {
+          return JSON.parse(val).join('/');
+        } else {
+          return '';
+        }
+      },
+      jumpDetails(row) {
+        row.tabLabel = '维修信息';
+        row.title = '报修记录详情';
+        row.workOrderCode = row.id;
+        this.$refs.detailsDialogRef.init(row);
+        // this.$refs.detailsDialogRef.equipmentdialog = true
+        // const res = await repair.getInfo(row.id)
+        // this.infoData = res.data
+        // this.repairInfoLogs = res.data.repairInfoLogs
+      },
+      handleCurrentChange() {
+        this.getdata();
+      },
+      handleSizeChange() {
+        this.pages.page = 1;
+        this.getdata();
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    background: #fff;
+    padding: 20px;
+  }
+
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .repairsCode {
+    cursor: pointer;
+    &:hover {
+      color: #157a2c;
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/point-inspection.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="wrapper">
+    <!-- 巡点检 -->
+    <div class="basic-details" id="mould">
+      <el-form label-width="120px">
+        <el-row>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="工单单号">
+              <el-input
+                v-model="searchForm.workOrderCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="计划单号">
+              <el-input
+                v-model="searchForm.planCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="巡点检名称">
+              <el-input
+                v-model="searchForm.planName"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="巡点检人员">
+              <el-input
+                v-model="searchForm.executeUserName"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="执行结果">
+              <el-select
+                filterable
+                clearable
+                v-model="searchForm.resultStatus"
+                class="w100"
+                size="small"
+              >
+                <el-option value="1" label="正常"></el-option>
+                <el-option value="0" label="异常"></el-option>
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :md="12" :sm="16" :xs="16">
+            <el-form-item>
+              <el-col :span="8">
+                <el-select
+                  filterable
+                  v-model="searchForm.startTimeType"
+                  class="w100"
+                  size="small"
+                >
+                  <el-option
+                    v-for="(item, index) in option.startTimeType"
+                    :key="index"
+                    :value="item.value"
+                    :label="item.label"
+                  ></el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="16">
+                <el-date-picker
+                  class="form-input"
+                  size="small"
+                  v-model="searchForm.date"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :default-time="['00:00:00', '23:59:59']"
+                >
+                </el-date-picker>
+              </el-col> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="16" :xs="16" style="text-align: right">
+            <el-button icon="el-icon-refresh-left" size="small" @click="rest"
+              >重置</el-button
+            >
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="small"
+              @click="search"
+              >搜索</el-button
+            ></el-col
+          >
+        </el-row>
+      </el-form>
+      <el-table
+        :data="tableData"
+        border
+        tooltip-effect="dark"
+        style="width: 100%"
+        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+      >
+        <el-table-column
+          width="80px"
+          label="序号"
+          type="index"
+          :index="indexMethod"
+        >
+          <!-- <template slot-scope="{ $index }">
+            {{ $tableIndex($index, page, size) }}
+          </template> -->
+        </el-table-column>
+        <el-table-column prop="workOrderCode" label="工单编号">
+          <template slot-scope="scope">
+            <div class="repairsCode" @click="jumpDetails(scope.row)">
+              {{ scope.row.workOrderCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="planCode" label="计划单号" />
+        <el-table-column prop="planName" label="巡点检名称" />
+        <el-table-column prop="executeUserName" label="巡点检人员" />
+        <el-table-column prop="createTime" label="工单生成时间" />
+        <el-table-column prop="acceptTime" label="开工时间" />
+        <el-table-column prop="finishTime" label="报工时间" />
+        <el-table-column prop="practicalTime" label="实际工时">
+          <template slot-scope="{ row }">
+            {{ time_interval(row.acceptTime, row.finishTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="resultStatus" label="执行结果">
+          <template slot-scope="{ row }">
+            <span
+              :class="{
+                'danger-text': row.resultStatus === 2 || row.resultStatus === 3
+              }"
+              >{{ ['', '正常', '异常', '异常'][row.resultStatus] }}</span
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- <pagenation
+        :page.sync="page"
+        :size.sync="size"
+        :total="total"
+        @pagination="pageChange"
+      /> -->
+      <div
+        class="zw-table-footer"
+        style="display: flex; justify-content: flex-end"
+      >
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[15, 30, 50, 100, 500]"
+          :page-size.sync="pages.size"
+          :current-page.sync="pages.page"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  // import mixins from '../mixins/index'
+  import pagenation from '@/components/Pagination';
+  // import { getsheetwork, getDetail } from '@/api/ledgerAssets/equipment';
+  export default {
+    // mixins: [mixins],
+    props: ['code'],
+    components: { pagenation },
+    data() {
+      return {
+        informationId: '',
+        tableData: [],
+        searchForm: {
+          workOrderCode: '',
+          planCode: '',
+          planName: '',
+          repairsCode: '',
+          executeUserName: '',
+          resultStatus: '',
+          startTimeType: '1',
+          date: ''
+        },
+        // page: 1,
+        // size: 15,
+        // total: 0,
+        pages: {
+          page: 1,
+          size: 15
+        },
+        total: 0,
+        option: {
+          startTimeType: [
+            {
+              value: '1',
+              label: '工单生成时间'
+            },
+            {
+              value: '2',
+              label: '开工时间'
+            },
+            {
+              value: '3',
+              label: '完工时间'
+            }
+          ]
+        }
+      };
+    },
+    created() {
+      this.getdata();
+    },
+    methods: {
+      // 实现分页序号连贯
+      indexMethod(index) {
+        index = index + 1 + (this.pages.page - 1) * this.pages.size;
+        return index;
+      },
+      getdata() {
+        let par = {
+          workOrderType: 1,
+          equiCode: this.code,
+          ...this.pages,
+          ...this.searchForm
+        };
+        if (this.searchForm.date) {
+          par.startTime = this.searchForm.date[0];
+          par.endTime = this.searchForm.date[1];
+        }
+        // getsheetwork(par).then((res) => {
+        //   this.tableData = res.data.records;
+        //   this.total = res.data.total;
+        // });
+      },
+      search() {
+        this.pages.page = 1;
+        this.getdata();
+      },
+      rest() {
+        this.searchForm = {
+          workOrderCode: '',
+          planCode: '',
+          planName: '',
+          repairsCode: '',
+          executeUserName: '',
+          startTimeType: '1',
+          date: ''
+        };
+        this.pages.page = 1;
+        this.getdata();
+      },
+      //跳转详情
+      jumpDetails(data) {
+        const { href } = this.$router.resolve({
+          name: `MaintenanceWorkDetails`,
+          query: {
+            code: data.workOrderCode
+          }
+        });
+        window.open(href, '_self');
+      },
+
+      handleCurrentChange() {
+        this.getdata();
+      },
+      handleSizeChange() {
+        this.pages.page = 1;
+        this.getdata();
+      },
+      // 计算实际工时
+      time_interval(dt1, dt2) {
+        if (!dt1 || !dt2) {
+          return '';
+        }
+        if (typeof dt1 == 'string') {
+          dt1 = new Date(dt1.replace(/-/, '/'));
+          dt2 = new Date(dt2.replace(/-/, '/'));
+        }
+        var res = dt2 - dt1;
+        if (isNaN(res)) throw Error('invalid dates arguments');
+        let re = res / (1000 * 60 * 60);
+
+        var h = parseInt(re);
+        var m = parseInt((re - h) * 60);
+        let result = '';
+        if (h) {
+          result += `${h} 小时`;
+        }
+        if (m) {
+          result += `${m} 分钟`;
+        }
+        return result;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    background: #fff;
+    padding: 20px;
+  }
+
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .repairsCode {
+    cursor: pointer;
+    &:hover {
+      color: #157a2c;
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/repair.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="wrapper">
+    <!-- 维修 -->
+    <div class="basic-details" id="mould">
+      <el-form label-width="120px">
+        <el-row>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="工单单号">
+              <el-input
+                v-model="searchForm.workOrderCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="计划单号">
+              <el-input
+                v-model="searchForm.planCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="计划名称">
+              <el-input
+                v-model="searchForm.planName"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="报修记录单号">
+              <el-input
+                v-model="searchForm.repairsCode"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="8" :xs="8">
+            <el-form-item label="执行人">
+              <el-input
+                v-model="searchForm.executeUserName"
+                placeholder="请输入"
+                size="small"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :md="12" :sm="16" :xs="16">
+            <el-form-item>
+              <el-col :span="8">
+                <el-select
+                  filterable
+                  v-model="searchForm.startTimeType"
+                  class="w100"
+                  size="small"
+                >
+                  <el-option
+                    v-for="(item, index) in option.startTimeType"
+                    :key="index"
+                    :value="item.value"
+                    :label="item.label"
+                  ></el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="16">
+                <el-date-picker
+                  class="form-input"
+                  size="small"
+                  v-model="searchForm.date"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :default-time="['00:00:00', '23:59:59']"
+                >
+                </el-date-picker>
+              </el-col> </el-form-item
+          ></el-col>
+          <el-col :md="6" :sm="16" :xs="16" style="text-align: right">
+            <el-button icon="el-icon-refresh-left" size="small" @click="rest"
+              >重置</el-button
+            >
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="small"
+              @click="search"
+              >搜索</el-button
+            ></el-col
+          >
+        </el-row>
+      </el-form>
+      <el-table
+        :data="tableData"
+        border
+        tooltip-effect="dark"
+        style="width: 100%"
+        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+      >
+        <el-table-column
+          width="80px"
+          label="序号"
+          type="index"
+          :index="indexMethod"
+        >
+          <!-- <template slot-scope="{ $index }">
+            {{ $tableIndex($index, page, size) }}
+          </template> -->
+        </el-table-column>
+        <el-table-column prop="workOrderCode" label="工单编号">
+          <template slot-scope="scope">
+            <div class="repairsCode" @click="jumpDetails(scope.row)">
+              {{ scope.row.repairsCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="planCode" label="计划单号" />
+        <el-table-column prop="planName" label="计划名称" />
+        <el-table-column prop="executeUserName" label="执行人" />
+        <el-table-column prop="createTime" label="工单生成时间" />
+        <el-table-column prop="acceptTime" label="开工时间" />
+        <el-table-column prop="finishTime" label="报工时间" />
+        <el-table-column prop="practicalTime" label="实际工时">
+          <template slot-scope="{ row }">
+            {{ time_interval(row.acceptTime, row.finishTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="repairsCode" label="报修记录单号" />
+      </el-table>
+      <div
+        class="zw-table-footer"
+        style="display: flex; justify-content: flex-end"
+      >
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          :page-sizes="[15, 30, 50, 100, 500]"
+          :page-size.sync="pages.size"
+          :current-page.sync="pages.page"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <!-- <DetailsDialog ref="detailsDialogRef" /> -->
+  </div>
+</template>
+
+<script>
+  // import mixins from '../mixins/index'
+  import pagenation from '@/components/Pagination';
+  // import { getsheetwork, getDetail } from '@/api/ledgerAssets/equipment';
+  // import DetailsDialog from '@/views/feature/maintenance/repair/RepairDetailsDialog.vue';
+  // import repair from '@/api/maintenance/repair/repair';
+  export default {
+    // mixins: [mixins],
+    props: ['code'],
+    // DetailsDialog
+    components: { pagenation },
+    data() {
+      return {
+        informationId: '',
+        tableData: [],
+        searchForm: {
+          workOrderCode: '',
+          planCode: '',
+          planName: '',
+          repairsCode: '',
+          executeUserName: '',
+          startTimeType: '1',
+          date: ''
+        },
+        pages: {
+          page: 1,
+          size: 15
+        },
+        total: 0,
+        option: {
+          startTimeType: [
+            {
+              value: '1',
+              label: '工单生成时间'
+            },
+            {
+              value: '2',
+              label: '开工时间'
+            },
+            {
+              value: '3',
+              label: '完工时间'
+            }
+          ]
+        }
+      };
+    },
+    created() {
+      this.getdata();
+    },
+    methods: {
+      // 实现分页序号连贯
+      indexMethod(index) {
+        index = index + 1 + (this.pages.page - 1) * this.pages.size;
+        return index;
+      },
+      getdata() {
+        let par = {
+          workOrderType: 3,
+          equiCode: this.code,
+          ...this.pages,
+          ...this.searchForm
+        };
+        if (this.searchForm.date.length) {
+          par.startTime = this.searchForm.date[0];
+          par.endTime = this.searchForm.date[1];
+        }
+        if (this.searchForm.date.length) {
+          par.startTime = this.searchForm.date[0];
+          par.endTime = this.searchForm.date[1];
+        }
+        // getsheetwork(par).then((res) => {
+        //   this.tableData = res.data.records;
+        //   this.total = res.data.total;
+        // });
+      },
+      search() {
+        this.pages.page = 1;
+        this.getdata();
+      },
+      rest() {
+        this.searchForm = {
+          workOrderCode: '',
+          planCode: '',
+          planName: '',
+          repairsCode: '',
+          executeUserName: '',
+          startTimeType: '1',
+          date: ''
+        };
+        this.pages.page = 1;
+        this.getdata();
+      },
+      async jumpDetails(row) {
+        console.log('row', row);
+        row.title = '工单详情';
+        row.tabLabel = '工单信息';
+        this.$refs.detailsDialogRef.init(row);
+        // console.log(row);
+        // this.$refs.detailsDialogRef.equipmentdialog = true
+        // const res = await maintenancePlan.getWorkOrderDetail(row.workOrderCode)
+        // this.workOrderInfo = res.data
+        // this.planInfo = res.data.planInfo
+        // this.infoData = res.data.repairInfo
+        // this.repairInfoLogs = res.data.repairInfoLogList
+      },
+
+      handleCurrentChange() {
+        this.getdata();
+      },
+      handleSizeChange() {
+        this.pages.page = 1;
+        this.getdata();
+      },
+      // 计算实际工时
+      time_interval(dt1, dt2) {
+        if (!dt1 || !dt2) {
+          return '';
+        }
+        if (typeof dt1 == 'string') {
+          dt1 = new Date(dt1.replace(/-/, '/'));
+          dt2 = new Date(dt2.replace(/-/, '/'));
+        }
+        var res = dt2 - dt1;
+        if (isNaN(res)) throw Error('invalid dates arguments');
+        let re = res / (1000 * 60 * 60);
+
+        var h = parseInt(re);
+        var m = parseInt((re - h) * 60);
+        let result = '';
+        if (h) {
+          result += `${h} 小时`;
+        }
+        if (m) {
+          result += `${m} 分钟`;
+        }
+        return result;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    background: #fff;
+    padding: 20px;
+  }
+
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .repairsCode {
+    cursor: pointer;
+    &:hover {
+      color: #157a2c;
+    }
+  }
+</style>

src/views/ledgerAssets/equipment/components/equipment-list.vue

@@ -18,7 +18,7 @@
       @select-all="changeSelectAll"
     >
       <!-- 表头工具栏 -->
-      <template v-slot:toolbar>
+      <template v-slot:toolbar="{ row }">
         <el-button
           size="small"
           type="primary"
@@ -53,7 +53,9 @@
         >
           设置片区负责人
         </el-button>
-        <el-button size="small" class="ele-btn-icon">删除</el-button>
+        <el-button size="small" class="ele-btn-icon" @click="handlDelete"
+          >删除</el-button
+        >
         <el-button
           size="small"
           @click="moveTo(checkRadioData, 'move')"
@@ -91,7 +93,8 @@
   import {
     getAssetList,
     downloadAsset,
-    getNetworkCount
+    getNetworkCount,
+    batchDel
   } from '@/api/ledgerAssets';
   import dictMixins from '@/mixins/dictMixins';
   import axios from 'axios';
@@ -237,6 +240,24 @@
           this.checkRadioData = [];
         }
       },
+      handlDelete() {
+        if (this.checkRadioData.length != 0) {
+          this.$confirm('是否删除?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+            .then(async () => {
+              const paramsArr = this.checkRadioData.map((item) => {
+                return item.id;
+              });
+              await batchDel(paramsArr);
+              this.sucesstion(true);
+            })
+            .catch(() => {});
+        }
+      },
+
       /* 表格数据源 */
       datasource({ page, limit, where, order }) {
         this.getNetWork(page, limit, where, order);

src/views/ledgerAssets/equipment/detail.vue

@@ -2,7 +2,7 @@
   <div class="ele-body">
     <el-card :body-style="{ padding: 0 }">
       <!-- tab切换 -->
-<!--      <div class="switch">
+      <div class="switch">
         <div class="switch_left">
           <ul>
             <li
@@ -15,18 +15,20 @@
             </li>
           </ul>
         </div>
-        <div class="right" style="padding: 10px">
+        <!-- <div class="right" style="padding: 10px">
           <el-button @click="$router.go(-1)">返回</el-button>
-        </div>
-      </div> -->
+        </div> -->
+      </div>
       <div class="page-title">
         <el-page-header @back="$router.go(-1)">
           <div slot="content" class="pageContent">
-            <div>设备信息详情</div>
+            <span v-for="item in tabOptions" :key="item.key">
+              {{ item.key == activeComp ? item.name + '详情' : '' }}
+            </span>
           </div>
         </el-page-header>
       </div>
-      <div class="content-wrapper">
+      <div class="content-wrapper" style="margin-left: 10px">
         <component :is="activeComp" :id="id" :code="code"></component>
       </div>
     </el-card>
@@ -36,45 +38,45 @@
 <script>
   import baseInfo from './components/baseInfo.vue';
   // import mould from '../components/details/mould.vue'
-  // import maintain from '../components/details/maintain.vue'
-  // import repair from '../components/details/repair.vue'
-  // import malfunction from '../components/details/malfunction.vue'
+  import maintain from '../components/details/maintain.vue';
+  import repair from '../components/details/repair.vue';
+  import malfunction from '../components/details/malfunction.vue';
   // import InternetRecord from '../components/details/InternetRecord.vue'
-  // import production from '../components/details/production.vue'
-  // import pointInspection from '../components/details/point-inspection.vue'
-  // import internet from '../components/details/internet.vue'
+  import inventory from '../components/details/inventory.vue';
+  import pointInspection from '../components/details/point-inspection.vue';
+  import internet from '../components/details/internet.vue';
   export default {
     components: {
-      baseInfo
+      baseInfo,
       // mould,
-      // pointInspection,
-      // maintain,
-      // repair,
-      // production,
+      pointInspection,
+      maintain,
+      repair,
+      inventory,
       // InternetRecord,
-      // malfunction,
-      // internet
+      malfunction,
+      internet
     },
-    data () {
+    data() {
       return {
         // 设备主键id
         id: '',
         code: '',
         activeComp: 'baseInfo',
         tabOptions: [
-          { key: 'baseInfo', name: '设备信息' }
+          { key: 'baseInfo', name: '设备信息' },
+          { key: 'pointInspection', name: '巡点检记录' },
+          { key: 'maintain', name: '保养记录' },
           // { key: 'mould', name: '关联模具' },
-          // { key: 'pointInspection', name: '巡点检记录' },
-          // { key: 'maintain', name: '保养记录' },
-          // { key: 'repair', name: '维修记录' },
-          // { key: 'malfunction', name: '故障记录' },
-          // // { key: 'production', name: '生产记录' },
-          // { key: 'internet', name: '物联数据' }
+          { key: 'repair', name: '维修记录' },
+          { key: 'malfunction', name: '故障记录' },
+          { key: 'inventory', name: '盘点记录' },
+          { key: 'internet', name: '物联数据' }
           // // { key: "InternetRecord", name: "物联记录" },
         ]
       };
     },
-    created () {
+    created() {
       this.id = this.$route.query.id;
       this.code = this.$route.query.code;
     }
@@ -85,9 +87,9 @@
   .content-wrapper {
     background-color: #fff;
   }
-  .page-title{
+  .page-title {
     background: #fff;
-    padding:26px 10px 15px;
-    border-bottom:1px solid #eaeefb;
+    padding: 26px 10px 15px;
+    border-bottom: 1px solid #eaeefb;
   }
 </style>

src/views/rulesManagement/PatrolConfig/detail.vue

@@ -18,7 +18,7 @@
             <span>{{ detailsForm.groupName }}</span>
           </el-col>
           <el-col :span="6">
-            <span>巡点检人员：</span>
+            <span>：</span>
             <span>{{ detailsForm.executorName }}</span>
           </el-col>
           <el-col :span="6">
@@ -33,7 +33,7 @@
             <span>规则名称：</span>
             <span>{{ detailsForm.ruleName }}</span>
           </el-col>
-<!--          <el-col :span="6">
+          <!--          <el-col :span="6">
             <span>创建部门：</span>
             <span>{{ detailsForm.createOrgName }}</span>
           </el-col> -->
@@ -57,7 +57,7 @@
       </div>
       <!-- 巡点检设备 -->
       <div class="patrol_equipment_info">
-		<HeaderTitle title="巡点检设备" size="16px"></HeaderTitle>
+        <HeaderTitle title="巡点检设备" size="16px"></HeaderTitle>
         <div class="patrol_equipment_info_content">
           <div
             class="equipment_item"
@@ -79,7 +79,9 @@
               </div>
               <div class="item_info">
                 <span class="item_label">设备位置</span>
-                <span class="item_value">{{ item.substance.positionNames }}</span>
+                <span class="item_value">{{
+                  item.substance.positionNames
+                }}</span>
               </div>
             </div>
             <p>操作事项</p>
@@ -104,153 +106,151 @@
 
 <script>
   import { getInfoById } from '@/api/ruleManagement/plan';
-  import {  getDetail } from '@/api/ruleManagement/matter';
-export default {
-  name: 'patrolConfigDetail',
-  data () {
-    return {
-      detailsLoading: false,
-      detailsForm: {},
-	    matterRulesList:[]
-    }
-  },
-  mounted () {
-    this.getDetailsData(this.$route.query.id)
-  },
-  computed: {
-		
-  },
-  methods: {
-    // 获取详情数据
-    async getDetailsData (id) {
-      this.detailsLoading = true
-      getInfoById(id)
-        .then(res => {
-          this.detailsLoading = false
-          this.detailsForm = res
-			let arr = []
-			res.execute.map(item=>{
-				 arr.push(item.userName)
-			})
-			 this.$set(this.detailsForm,'executorName',arr.join(','))
-			 this._getMatterRulesDetails(res.ruleId)
-        })
-        .catch(() => {
-          this.detailsLoading = false
-        })
+  import { getDetail } from '@/api/ruleManagement/matter';
+  export default {
+    name: 'patrolConfigDetail',
+    data() {
+      return {
+        detailsLoading: false,
+        detailsForm: {},
+        matterRulesList: []
+      };
     },
-	
-	// 封装 - 获取规则下面的详情数据及事项
-	async _getMatterRulesDetails (val) {		
-	  const res = await getDetail(val)
-	   this.matterRulesList = res.ruleItems
-	},
-	
-  }
-}
+    mounted() {
+      this.getDetailsData(this.$route.query.id);
+    },
+    computed: {},
+    methods: {
+      // 获取详情数据
+      async getDetailsData(id) {
+        this.detailsLoading = true;
+        getInfoById(id)
+          .then((res) => {
+            this.detailsLoading = false;
+            this.detailsForm = res;
+            let arr = [];
+            res.execute.map((item) => {
+              arr.push(item.userName);
+            });
+            this.$set(this.detailsForm, 'executorName', arr.join(','));
+            this._getMatterRulesDetails(res.ruleId);
+          })
+          .catch(() => {
+            this.detailsLoading = false;
+          });
+      },
+
+      // 封装 - 获取规则下面的详情数据及事项
+      async _getMatterRulesDetails(val) {
+        const res = await getDetail(val);
+        this.matterRulesList = res.ruleItems;
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-.patrol_config_detail {
-  padding: 5px 0;
-  .detail_title {
-    display: flex;
-    height: 40px;
-    align-items: center;
-    justify-content: space-between;
-    > span {
-      background-color: #fff;
-      line-height: 40px;
-      width: 90px;
-      text-align: center;
-      border-top: 4px solid #157a2c;
-    }
-  }
-  .main_content {
-    background-color: #fff;
-    padding: 20px 40px;
-    .base_info {
-      .base_info_title {
-        border-bottom: 1px solid #1890ff;
-        padding-bottom: 3px;
-        margin-bottom: 20px;
-        > span {
-          display: inline-block;
-          line-height: 16px;
-          border-left: 6px solid #1890ff;
-          padding-left: 6px;
-        }
+  .patrol_config_detail {
+    padding: 5px 0;
+    .detail_title {
+      display: flex;
+      height: 40px;
+      align-items: center;
+      justify-content: space-between;
+      > span {
+        background-color: #fff;
+        line-height: 40px;
+        width: 90px;
+        text-align: center;
+        border-top: 4px solid #157a2c;
       }
-      .base_info_content {
-        padding: 0 60px;
-        font-size: 14px;
-        ::v-deep .el-col {
+    }
+    .main_content {
+      background-color: #fff;
+      padding: 20px 40px;
+      .base_info {
+        .base_info_title {
+          border-bottom: 1px solid #1890ff;
+          padding-bottom: 3px;
           margin-bottom: 20px;
-          > span:first-child {
-            font-weight: 700;
+          > span {
+            display: inline-block;
+            line-height: 16px;
+            border-left: 6px solid #1890ff;
+            padding-left: 6px;
           }
         }
-      }
-    }
-    .patrol_equipment_info {
-      .patrol_equipment_info_title {
-        border-bottom: 1px solid #1890ff;
-        padding-bottom: 3px;
-        margin-bottom: 20px;
-        > span {
-          display: inline-block;
-          line-height: 16px;
-          border-left: 6px solid #1890ff;
-          padding-left: 6px;
+        .base_info_content {
+          padding: 0 60px;
+          font-size: 14px;
+          ::v-deep .el-col {
+            margin-bottom: 20px;
+            > span:first-child {
+              font-weight: 700;
+            }
+          }
         }
       }
-      .patrol_equipment_info_content {
-        padding: 0 30px;
-        .equipment_item {
-          border: 1px solid #ccc;
-          font-size: 14px;
-          padding: 15px;
-          margin-bottom: 30px;
-          .equipment_info {
-            display: flex;
-            flex-wrap: wrap;
-            border: 1px solid #ddd;
-            .item_info {
-              width: 33.33%;
-              height: 24px;
-              line-height: 24px;
+      .patrol_equipment_info {
+        .patrol_equipment_info_title {
+          border-bottom: 1px solid #1890ff;
+          padding-bottom: 3px;
+          margin-bottom: 20px;
+          > span {
+            display: inline-block;
+            line-height: 16px;
+            border-left: 6px solid #1890ff;
+            padding-left: 6px;
+          }
+        }
+        .patrol_equipment_info_content {
+          padding: 0 30px;
+          .equipment_item {
+            border: 1px solid #ccc;
+            font-size: 14px;
+            padding: 15px;
+            margin-bottom: 30px;
+            .equipment_info {
               display: flex;
-              .item_label {
-                width: 90px;
-                text-align: center;
-                background-color: #f2f2f2;
-                font-weight: 700;
-              }
-              .item_value {
-                border-bottom: 1px solid #f2f2f2;
-                flex: 1;
-                padding-left: 5px;
-              }
-              &:last-child {
-                width: 100%;
+              flex-wrap: wrap;
+              border: 1px solid #ddd;
+              .item_info {
+                width: 33.33%;
+                height: 24px;
+                line-height: 24px;
+                display: flex;
+                .item_label {
+                  width: 90px;
+                  text-align: center;
+                  background-color: #f2f2f2;
+                  font-weight: 700;
+                }
                 .item_value {
-                  border: 0;
+                  border-bottom: 1px solid #f2f2f2;
+                  flex: 1;
+                  padding-left: 5px;
+                }
+                &:last-child {
+                  width: 100%;
+                  .item_value {
+                    border: 0;
+                  }
                 }
               }
             }
-          }
-          > p {
-            margin-top: 20px;
-            color: #797979;
-          }
-          .matter_info {
-            ::v-deep .el-table {
-              th.el-table__cell {
-                background-color: #f2f2f2;
-                padding: 0;
-              }
-              td.el-table__cell {
-                padding: 0;
+            > p {
+              margin-top: 20px;
+              color: #797979;
+            }
+            .matter_info {
+              ::v-deep .el-table {
+                th.el-table__cell {
+                  background-color: #f2f2f2;
+                  padding: 0;
+                }
+                td.el-table__cell {
+                  padding: 0;
+                }
               }
             }
           }
@@ -258,5 +258,4 @@ export default {
       }
     }
   }
-}
 </style>