From b6c7e78a98471cfc7a0bb90d7848652fcb22bbbb Mon Sep 17 00:00:00 2001
From: "ruofei.yu" <ruofei.yu@softtek.com>
Date: Tue, 9 Sep 2025 19:39:58 +0800
Subject: [PATCH] fix: debug 2025/9/9

---
 .../independent/left/components/yxk_left.vue  | 1724 ++++++++---------
 src/pages/repair/record/index.vue             | 1068 +++++-----
 2 files changed, 1396 insertions(+), 1396 deletions(-)

diff --git a/src/pages/independent/left/components/yxk_left.vue b/src/pages/independent/left/components/yxk_left.vue
index 63f095f..1a13da4 100644
--- a/src/pages/independent/left/components/yxk_left.vue
+++ b/src/pages/independent/left/components/yxk_left.vue
@@ -1,862 +1,862 @@
-<template>
-  <div class="yxk">
-    <div class="yxk-content">
-      <div class="yxk-content-info">
-        <div class="header">
-          <p class="title">厂区情况</p>
-        </div>
-        <div style="display: flex;justify-content: center;align-items: center;">
-          <div class="YCI">
-            <div class="YCI-img"></div>
-            <div class="YCI-num">
-              <div class="YCI-num-value">
-                {{ config.gszrs ? config.gszrs : 0 }}
-              </div>
-              <div class="YCI-num-title">公司总人数</div>
-            </div>
-          </div>
-          <div class="YCI" style="margin-left:1.2rem;margin-right:1.2rem;">
-            <div class="YCI-img1"></div>
-            <div class="YCI-num">
-              <div class="YCI-num-value">
-                {{ config.sbzs ? config.sbzs : 0 }}
-              </div>
-              <div class="YCI-num-title">设备总数</div>
-            </div>
-          </div>
-          <div class="YCI">
-            <div class="YCI-img2"></div>
-            <div class="YCI-num">
-              <div class="YCI-num-value">
-                {{ config.jkzs ? config.jkzs : 0 }}
-              </div>
-              <div class="YCI-num-title">监控总数</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="yxkg-content-chart">
-        <div class="header">
-          <p class="title">客户等级排行占比</p>
-        </div>
-        <div class="yxk-content-chart-content">
-          <div id="chart" style="width: 100%;height:25vh; ">
-            <!-- <div
-              style="width:100%;height:100%;display: flex;flex-wrap: wrap;gap: 1rem;"
-            >
-              <div class="echart-box">
-                <div class="img">
-                  <img
-                    style="width: 80%;height: 70%;"
-                    src="../../../../assets/dn.png"
-                  />
-                </div>
-                <div class="name">
-                  <div class="name-top">日总电力供应</div>
-                  <div class="name-bottom">
-                    {{ nhtj.rdlgy ? nhtj.rdlgy : 0 }}千瓦时
-                  </div>
-                </div>
-              </div>
-              <div class="echart-box">
-                <div class="img">
-                  <img
-                    style="width: 80%;height: 70%;"
-                    src="../../../../assets/rq.png"
-                  />
-                </div>
-                <div class="name">
-                  <div class="name-top">日燃气使用</div>
-                  <div class="name-bottom">
-                    {{ nhtj.rrqsy ? nhtj.rrqsy : 0 }}m³
-                  </div>
-                </div>
-              </div>
-              <div class="echart-box">
-                <div class="img">
-                  <img
-                    style="width: 90%;height: 70%;"
-                    src="../../../../assets/tyn.png"
-                  />
-                </div>
-                <div class="name">
-                  <div class="name-top">日太阳能发电</div>
-                  <div class="name-bottom">
-                    {{ nhtj.rtynfd ? nhtj.rtynfd : 0 }}千瓦时
-                  </div>
-                </div>
-              </div>
-              <div class="echart-box">
-                <div class="img">
-                  <img
-                    style="width: 80%;height: 70%;"
-                    src="../../../../assets/s.png"
-                  />
-                </div>
-                <div class="name">
-                  <div class="name-top">日水量使用</div>
-                  <div class="name-bottom">
-                    {{ nhtj.rslsy ? nhtj.rslsy : 0 }}吨
-                  </div>
-                </div>
-              </div>
-            </div> -->
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="yxk-content yxk-flex">
-      <div class="header">
-        <p class="title">实时库存统计</p>
-      </div>
-      <div style="width:100%;height: calc(100% - 2rem);" id="container"></div>
-    </div>
-  </div>
-</template>
-<script>
-import "../../../../utils/flexble";
-// import Charts from "@jiaminghi/charts";
-import * as echarts from "echarts";
-import { autoHover } from "../../autoEchart";
-let api = {
-  init: "/apis/hl/kanban/kanbanTest"
-};
-export default {
-  data() {
-    return {
-      config: {},
-      nhtj: {}
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      let xslb = {
-        xData: [],
-        yData: []
-      };
-      let cn = {
-        xData: [],
-        yData: []
-      };
-      this.$api.yxkAPI.yxkPost(api.init, {}).then(res => {
-        const result = res.data;
-        const { gszrs, jkzs, sbzs, cnqst, xslbphtj, nhtj } = result;
-        this.nhtj = nhtj;
-        this.config = {
-          gszrs: gszrs,
-          jkzs: jkzs,
-          sbzs: sbzs
-        };
-        xslbphtj.map(val => {
-          xslb.xData.push(val.lbmcphzb), xslb.yData.push(val.xslb);
-        });
-        cnqst.map(item => {
-          cn.xData.push(item.date), cn.yData.push(item.val);
-        });
-        this.getInfo(xslb);
-        this.getData(cn);
-      });
-    },
-    getInfo(xslb) {
-      const container = document.getElementById("chart");
-      const myChart = echarts.init(container);
-      const colorList = [
-        "#FF4B01",
-        "#FF7B00",
-        "#FFE823",
-        "#2379FF",
-        "#2379FF",
-        "#2379FF"
-      ];
-      const colorListA = [
-        "#FC7A24",
-        "#FFC000",
-        "#FFEA97",
-        "#49B1FF",
-        "#49B1FF",
-        "#49B1FF"
-      ];
-      const data = {
-        label: xslb.yData ? xslb.yData : [],
-        value: xslb.xData ? xslb.xData : []
-      };
-      let dataZoomMove = {
-        start: 0,
-        end: 5
-      };
-      let dataZoomMoveTimer = null;
-      const option = {
-        backgroundColor: "transparent",
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "#fff",
-          textStyle: {
-            color: "#333"
-          },
-          borderColor: "#159AFF",
-          axisPointer: {
-            lineStyle: {
-              color: "transparent"
-            }
-          }
-        },
-        dataZoom: [
-          {
-            show: false, // 为true 滚动条出现
-            startValue: dataZoomMove.start,
-            endValue: dataZoomMove.end,
-            yAxisIndex: [0, 1] //关联多个y轴
-          },
-          {
-            //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
-            type: "inside",
-            yAxisIndex: 0,
-            zoomOnMouseWheel: false, //滚轮是否触发缩放
-            moveOnMouseMove: true, //鼠标滚轮触发滚动
-            moveOnMouseWheel: true
-          }
-        ],
-        grid: {
-          containLabel: true,
-          bottom: 10,
-          left: 10,
-          top: 10,
-          right: 10
-        },
-        xAxis: {
-          type: "value",
-          axisLabel: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          }
-        },
-        yAxis: [
-          {
-            type: "category",
-            data: data.label,
-            inverse: true,
-            axisLabel: {
-              inside: true,
-              verticalAlign: "bottom",
-              lineHeight: 36,
-              margin: 2, //刻度标签与轴线之间的距离
-              formatter: function(value) {
-                let k = data.label.indexOf(value);
-                //  let index = k < 9 ? "0" + (k + 1) : k + 1;
-                let index = k < 9 ? k + 1 : k + 1;
-                return `{b|TOP${index}} {a|${value}}`;
-              },
-              rich: {
-                b: {
-                  // borderColor: "#fff",
-                  // borderWidth: 1,
-                  padding: [3, 1, 0, 1],
-                  color: "#fff",
-                  fontSize: "80%"
-                },
-                a: {
-                  fontSize: "80%",
-                  color: "#D0DEEE",
-                  padding: [4, 0, 0, 8]
-                }
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            }
-          },
-
-          {
-            type: "category",
-            data: data.label,
-            inverse: true,
-            axisLabel: {
-              inside: true, // 数值和图表分离
-              verticalAlign: "bottom",
-              lineHeight: 34,
-              margin: 2,
-              formatter: function(value) {
-                let k = data.label.indexOf(value);
-                let index = k;
-                return `{a|${data.value[index]}%}`;
-              },
-              rich: {
-                a: {
-                  fontSize: "90%",
-                  color: "#fff",
-                  padding: [4, 0, 0, 0],
-                  fontFamily: "DOUYU"
-                }
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            }
-          }
-        ],
-        series: [
-          {
-            data: data.value,
-            type: "bar",
-            barWidth: 10, // 柱子宽度
-            MaxSize: 0,
-            showBackground: true,
-            barBorderRadius: [30, 0, 0, 30],
-            backgroundStyle: {
-              color: "rgba(9, 68, 131, .2)"
-            },
-            label: {
-              show: false,
-              offset: [60, -17],
-              color: "#fff",
-              fontWeight: 500,
-              position: "left",
-              align: "left",
-              fontSize: "80%",
-              formatter: function(params) {
-                console.log(params);
-                return params.data.name;
-              }
-            },
-            itemStyle: {
-              barBorderRadius: [3, 0, 0, 3],
-              color: params => {
-                let i = colorListA.length;
-                let f = colorList.length;
-                return {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 1,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: colorListA[params.dataIndex % i]
-                    },
-                    {
-                      offset: 1,
-                      color: colorList[params.dataIndex % f]
-                    }
-                  ]
-                };
-              }
-            }
-          },
-          {
-            name: "外圆",
-            type: "scatter",
-            emphasis: {
-              scale: false
-            },
-            tooltip: {
-              show: false
-            },
-            // 小圆圈
-            // symbol:
-            //    "image://data:image/png;base64,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",
-            // symbolSize: [20, 20],
-            symbol: "rect",
-            symbolSize: [5, 16], // 进度条白点
-            itemStyle: {
-              barBorderRadius: [30, 0, 0, 30],
-              color: "#FFF",
-              shadowColor: "rgba(255, 255, 255, 0.5)",
-              shadowBlur: 5,
-              borderWidth: 1,
-              opacity: 1
-            },
-            z: 2,
-            data: data.value,
-            animationDelay: 500
-          }
-        ]
-      };
-      myChart.setOption(option);
-      const startMoveDataZoom = () => {
-        dataZoomMoveTimer = setInterval(() => {
-          dataZoomMove.start += 1;
-          dataZoomMove.end += 1;
-          if (dataZoomMove.end > data.value.length - 1) {
-            dataZoomMove.start = 0;
-            dataZoomMove.end = 4;
-          }
-          myChart.setOption({
-            dataZoom: [
-              {
-                type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
-                startValue: dataZoomMove.start,
-                endValue: dataZoomMove.end
-              }
-            ]
-          });
-        }, 2000);
-      };
-      startMoveDataZoom();
-      let chartDom = myChart.getDom();
-      chartDom.addEventListener("mouseout", () => {
-        if (dataZoomMoveTimer) return;
-        let dataZoomMove_get = myChart.getOption().dataZoom[0];
-        dataZoomMove.start = dataZoomMove_get.startValue;
-        dataZoomMove.end = dataZoomMove_get.endValue;
-        startMoveDataZoom();
-      });
-      chartDom.addEventListener("mouseover", () => {
-        clearInterval(dataZoomMoveTimer);
-        dataZoomMoveTimer = undefined;
-      });
-      window.onresize = function() {
-        // 让echarts图表实例调用resize方法，以适应新窗口大小
-        myChart.resize();
-      };
-    },
-    getData(cn) {
-      const container = document.getElementById("container");
-      const myChart = echarts.init(container);
-      // 绘制左侧面
-      const CubeLeft = echarts.graphic.extendShape({
-        shape: {
-          x: 0,
-          y: 0
-        },
-        buildPath: function(ctx, shape) {
-          const xAxisPoint = shape.xAxisPoint;
-          const c0 = [shape.x, shape.y];
-          const c1 = [shape.x - 8, shape.y - 8];
-          const c2 = [xAxisPoint[0] - 8, xAxisPoint[1] - 8];
-          const c3 = [xAxisPoint[0], xAxisPoint[1]];
-          ctx
-            .moveTo(c0[0], c0[1])
-            .lineTo(c1[0], c1[1])
-            .lineTo(c2[0], c2[1])
-            .lineTo(c3[0], c3[1])
-            .closePath();
-        }
-      });
-      // 绘制右侧面
-      const CubeRight = echarts.graphic.extendShape({
-        shape: {
-          x: 0,
-          y: 0
-        },
-        buildPath: function(ctx, shape) {
-          const xAxisPoint = shape.xAxisPoint;
-          const c1 = [shape.x, shape.y];
-          const c2 = [xAxisPoint[0], xAxisPoint[1]];
-          const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 4];
-          const c4 = [shape.x + 13, shape.y - 4];
-          ctx
-            .moveTo(c1[0], c1[1])
-            .lineTo(c2[0], c2[1])
-            .lineTo(c3[0], c3[1])
-            .lineTo(c4[0], c4[1])
-            .closePath();
-        }
-      });
-      // 绘制顶面
-      const CubeTop = echarts.graphic.extendShape({
-        shape: {
-          x: 0,
-          y: 0
-        },
-        buildPath: function(ctx, shape) {
-          const c1 = [shape.x, shape.y];
-          const c2 = [shape.x + 13, shape.y - 4];
-          const c3 = [shape.x + 5, shape.y - 12];
-          const c4 = [shape.x - 8, shape.y - 8];
-          ctx
-            .moveTo(c1[0], c1[1])
-            .lineTo(c2[0], c2[1])
-            .lineTo(c3[0], c3[1])
-            .lineTo(c4[0], c4[1])
-            .closePath();
-        }
-      });
-      // 注册三个面图形
-      echarts.graphic.registerShape("CubeLeft", CubeLeft);
-      echarts.graphic.registerShape("CubeRight", CubeRight);
-      echarts.graphic.registerShape("CubeTop", CubeTop);
-      // 数据
-      const VALUE = cn.yData ? cn.yData : [];
-
-      let option = {
-        //你的代码
-        backgroundColor: "transparent",
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          },
-          backgroundColor: "#fff",
-          textStyle: {
-            color: "#333"
-          },
-          formatter: function(params) {
-            return params[0].name + ":<br/>" + params[0].value + "万件";
-          }
-        },
-        grid: {
-          left: "0",
-          right: "0",
-          top: "5%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          data: cn.xData ? cn.xData : [],
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: "white"
-            }
-          },
-          // offset: 25,
-          axisTick: {
-            show: false,
-            length: 9,
-            alignWithLabel: true,
-            lineStyle: {
-              color: "#7DFFFD"
-            }
-          },
-          axisLabel: {
-            show: true,
-            fontSize: 12,
-            rotate: 45
-          }
-        },
-        yAxis: [
-          {
-            min: 0,
-            type: "value",
-            name: "万米",
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "white"
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: "dashed",
-                color: "rgba(255,255,255,0.1)"
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: true,
-              fontSize: 12
-            },
-            boundaryGap: ["20%", "20%"]
-          }
-        ],
-        series: [
-          {
-            type: "custom",
-            renderItem: (params, api) => {
-              const location = api.coord([api.value(0), api.value(1)]);
-              var color =
-                api.value(1) > 10000
-                  ? "red"
-                  : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: "rgba(61, 137, 247, 0)" //  0%  处的颜色
-                      },
-                      {
-                        offset: 0.7,
-                        color: "rgba(61, 137, 247, 0.7)" //  100%  处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: "rgba(61, 137, 247, 1)" //  100%  处的颜色
-                      }
-                    ]);
-              // console.log(color)
-              return {
-                type: "group",
-                children: [
-                  {
-                    type: "CubeLeft",
-                    shape: {
-                      api,
-                      xValue: api.value(0),
-                      yValue: api.value(1),
-                      x: location[0],
-                      y: location[1],
-                      xAxisPoint: api.coord([api.value(0), 0])
-                    },
-                    style: {
-                      fill: (color =
-                        api.value(1) > 10000
-                          ? "red"
-                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                offset: 1,
-                                color: "rgba(61, 137, 247, 0)" //  0%  处的颜色
-                              },
-                              {
-                                offset: 0.5,
-                                color: "rgba(61, 137, 247, 0.7)" //  100%  处的颜色
-                              },
-                              {
-                                offset: 0,
-                                color: "rgba(61, 137, 247, 1)" //  100%  处的颜色
-                              }
-                            ]))
-                    }
-                  },
-                  {
-                    type: "CubeRight",
-                    shape: {
-                      api,
-                      xValue: api.value(0),
-                      yValue: api.value(1),
-                      x: location[0],
-                      y: location[1],
-                      xAxisPoint: api.coord([api.value(0), 0])
-                    },
-                    style: {
-                      fill: (color =
-                        api.value(1) > 10000
-                          ? "red"
-                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                offset: 1,
-                                color: "rgba(61, 137, 247, 0)" //  0%  处的颜色
-                              },
-                              {
-                                offset: 0.5,
-                                color: "rgba(61, 137, 247, 0.7)" //  100%  处的颜色
-                              },
-                              {
-                                offset: 0,
-                                color: "rgba(61, 137, 247, 1)" //  100%  处的颜色
-                              }
-                            ]))
-                    }
-                  },
-                  {
-                    type: "CubeTop",
-                    shape: {
-                      api,
-                      xValue: api.value(0),
-                      yValue: api.value(1),
-                      x: location[0],
-                      y: location[1],
-                      xAxisPoint: api.coord([api.value(0), 0])
-                    },
-                    style: {
-                      fill: (color =
-                        api.value(1) > 10000
-                          ? "red"
-                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                              {
-                                offset: 0,
-                                color: "#65c7ec"
-                              },
-                              {
-                                offset: 1,
-                                color: "#65c7ec"
-                              }
-                            ]))
-                    }
-                  }
-                ]
-              };
-            },
-            data: VALUE
-          }
-        ]
-      };
-      myChart.setOption(option);
-      autoHover(myChart, option, 12, 100);
-      window.onresize = function() {
-        // 让echarts图表实例调用resize方法，以适应新窗口大小
-        myChart.resize();
-      };
-    }
-  }
-};
-</script>
-<style scoped lang="less">
-.yxk {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  color: #fff;
-
-  .echart-box {
-    flex: 1 1 calc(50% - 9rem);
-    box-sizing: border-box;
-    // width: calc(50% - 1rem);
-    height: calc(50% - 4rem);
-    background-image: linear-gradient(-225deg,
-        #473b7b 0%,
-        #3584a7 51%,
-        #30d2be 100%);
-    // background-image: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
-    display: flex;
-    border-radius: 5px;
-    margin: 2rem 1rem;
-
-    .img {
-      width: 40%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-left: 0.5rem;
-    }
-
-    .name {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-
-      &-top {
-        font-size: 1.8rem;
-        color: #fff;
-        margin-bottom: 0.3rem;
-      }
-
-      &-bottom {
-        font-size: 1.8rem;
-        font-weight: bold;
-        color: rgb(38, 222, 212);
-      }
-    }
-  }
-
-  .header {
-    width: 100%;
-    height: 6rem;
-    background: url("../../../../assets/longscreen2/title-short.png");
-    background-size: 100%;
-    padding-top: 1rem;
-    box-sizing: border-box;
-
-    .title {
-      font-size: 1.6rem;
-      font-family: JLinXin;
-      font-weight: 600;
-      line-height: 2rem;
-      background: #fffde8 linear-gradient(180deg, #e8feff 40%, #00a9ff 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      margin-left: 8rem;
-      font-weight: bold;
-    }
-  }
-
-  &-flex {
-    height: 40% !important;
-    flex-direction: column;
-  }
-
-  &-content {
-    width: 100%;
-    height: 60%;
-
-    &-info {
-      width: 100%;
-      height: calc(50% - 6rem);
-
-      .YCI {
-        width: calc(100% / 3);
-        height: 100%;
-        display: flex;
-        background-color: rgba(255, 255, 255, 0.1);
-        border-radius: 1rem;
-        margin-top: 1.2rem;
-
-        &-img {
-          width: 40%;
-          // height: 100%;
-          background: url("../../../../assets/longscreen2/icon_chanyegongren.png");
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-        }
-
-        &-img1 {
-          width: 40%;
-          // height: 100%;
-          background: url("../../../../assets/longscreen2/icon_shuzilvli.png");
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-        }
-
-        &-img2 {
-          width: 40%;
-          // height: 100%;
-          background: url("../../../../assets/longscreen2/icon_shuzizhengzhao.png");
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-        }
-
-        &-num {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-
-          &-title {
-            font-size: 1.5rem;
-            color: #fff;
-          }
-
-          &-value {
-            font-size: 3rem;
-            color: #01f7f4;
-            margin-bottom: 0.1rem;
-          }
-        }
-      }
-    }
-
-    &-chart {
-      width: calc(100% - 1.2rem);
-      height: 50%;
-      margin-left: 1.2rem;
-
-      &-content {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="yxk">
+    <div class="yxk-content">
+      <div class="yxk-content-info">
+        <div class="header">
+          <p class="title">厂区情况</p>
+        </div>
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <div class="YCI">
+            <div class="YCI-img"></div>
+            <div class="YCI-num">
+              <div class="YCI-num-value">
+                {{ config.gszrs ? config.gszrs : 0 }}
+              </div>
+              <div class="YCI-num-title">公司总人数</div>
+            </div>
+          </div>
+          <div class="YCI" style="margin-left:1.2rem;margin-right:1.2rem;">
+            <div class="YCI-img1"></div>
+            <div class="YCI-num">
+              <div class="YCI-num-value">
+                {{ config.sbzs ? config.sbzs : 0 }}
+              </div>
+              <div class="YCI-num-title">设备总数</div>
+            </div>
+          </div>
+          <div class="YCI">
+            <div class="YCI-img2"></div>
+            <div class="YCI-num">
+              <div class="YCI-num-value">
+                {{ config.jkzs ? config.jkzs : 0 }}
+              </div>
+              <div class="YCI-num-title">监控总数</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="yxkg-content-chart">
+        <div class="header">
+          <p class="title">客户等级排行占比</p>
+        </div>
+        <div class="yxk-content-chart-content">
+          <div id="chart" style="width: 100%;height:25vh; ">
+            <!-- <div
+              style="width:100%;height:100%;display: flex;flex-wrap: wrap;gap: 1rem;"
+            >
+              <div class="echart-box">
+                <div class="img">
+                  <img
+                    style="width: 80%;height: 70%;"
+                    src="../../../../assets/dn.png"
+                  />
+                </div>
+                <div class="name">
+                  <div class="name-top">日总电力供应</div>
+                  <div class="name-bottom">
+                    {{ nhtj.rdlgy ? nhtj.rdlgy : 0 }}千瓦时
+                  </div>
+                </div>
+              </div>
+              <div class="echart-box">
+                <div class="img">
+                  <img
+                    style="width: 80%;height: 70%;"
+                    src="../../../../assets/rq.png"
+                  />
+                </div>
+                <div class="name">
+                  <div class="name-top">日燃气使用</div>
+                  <div class="name-bottom">
+                    {{ nhtj.rrqsy ? nhtj.rrqsy : 0 }}m³
+                  </div>
+                </div>
+              </div>
+              <div class="echart-box">
+                <div class="img">
+                  <img
+                    style="width: 90%;height: 70%;"
+                    src="../../../../assets/tyn.png"
+                  />
+                </div>
+                <div class="name">
+                  <div class="name-top">日太阳能发电</div>
+                  <div class="name-bottom">
+                    {{ nhtj.rtynfd ? nhtj.rtynfd : 0 }}千瓦时
+                  </div>
+                </div>
+              </div>
+              <div class="echart-box">
+                <div class="img">
+                  <img
+                    style="width: 80%;height: 70%;"
+                    src="../../../../assets/s.png"
+                  />
+                </div>
+                <div class="name">
+                  <div class="name-top">日水量使用</div>
+                  <div class="name-bottom">
+                    {{ nhtj.rslsy ? nhtj.rslsy : 0 }}吨
+                  </div>
+                </div>
+              </div>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="yxk-content yxk-flex">
+      <div class="header">
+        <p class="title">实时库存统计</p>
+      </div>
+      <div style="width:100%;height: calc(100% - 2rem);" id="container"></div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../../../utils/flexble";
+// import Charts from "@jiaminghi/charts";
+import * as echarts from "echarts";
+import { autoHover } from "../../autoEchart";
+let api = {
+  init: "/apis/hl/kanban/kanbanTest"
+};
+export default {
+  data() {
+    return {
+      config: {},
+      nhtj: {}
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let xslb = {
+        xData: [],
+        yData: []
+      };
+      let cn = {
+        xData: [],
+        yData: []
+      };
+      this.$api.yxkAPI.yxkPost(api.init, {}).then(res => {
+        const result = res.data;
+        const { gszrs, jkzs, sbzs, cnqst, xslbphtj, nhtj } = result;
+        this.nhtj = nhtj;
+        this.config = {
+          gszrs: gszrs,
+          jkzs: jkzs,
+          sbzs: sbzs
+        };
+        xslbphtj.map(val => {
+          xslb.xData.push(val.lbmcphzb), xslb.yData.push(val.xslb);
+        });
+        cnqst.map(item => {
+          cn.xData.push(item.date), cn.yData.push(item.val);
+        });
+        this.getInfo(xslb);
+        this.getData(cn);
+      });
+    },
+    getInfo(xslb) {
+      const container = document.getElementById("chart");
+      const myChart = echarts.init(container);
+      const colorList = [
+        "#FF4B01",
+        "#FF7B00",
+        "#FFE823",
+        "#2379FF",
+        "#2379FF",
+        "#2379FF"
+      ];
+      const colorListA = [
+        "#FC7A24",
+        "#FFC000",
+        "#FFEA97",
+        "#49B1FF",
+        "#49B1FF",
+        "#49B1FF"
+      ];
+      const data = {
+        label: xslb.yData ? xslb.yData : [],
+        value: xslb.xData ? xslb.xData : []
+      };
+      let dataZoomMove = {
+        start: 0,
+        end: 5
+      };
+      let dataZoomMoveTimer = null;
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#333"
+          },
+          borderColor: "#159AFF",
+          axisPointer: {
+            lineStyle: {
+              color: "transparent"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            show: false, // 为true 滚动条出现
+            startValue: dataZoomMove.start,
+            endValue: dataZoomMove.end,
+            yAxisIndex: [0, 1] //关联多个y轴
+          },
+          {
+            //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
+            type: "inside",
+            yAxisIndex: 0,
+            zoomOnMouseWheel: false, //滚轮是否触发缩放
+            moveOnMouseMove: true, //鼠标滚轮触发滚动
+            moveOnMouseWheel: true
+          }
+        ],
+        grid: {
+          containLabel: true,
+          bottom: 10,
+          left: 10,
+          top: 10,
+          right: 10
+        },
+        xAxis: {
+          type: "value",
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "category",
+            data: data.label,
+            inverse: true,
+            axisLabel: {
+              inside: true,
+              verticalAlign: "bottom",
+              lineHeight: 36,
+              margin: 2, //刻度标签与轴线之间的距离
+              formatter: function(value) {
+                let k = data.label.indexOf(value);
+                //  let index = k < 9 ? "0" + (k + 1) : k + 1;
+                let index = k < 9 ? k + 1 : k + 1;
+                return `{b|TOP${index}} {a|${value}}`;
+              },
+              rich: {
+                b: {
+                  // borderColor: "#fff",
+                  // borderWidth: 1,
+                  padding: [3, 1, 0, 1],
+                  color: "#fff",
+                  fontSize: "80%"
+                },
+                a: {
+                  fontSize: "80%",
+                  color: "#D0DEEE",
+                  padding: [4, 0, 0, 8]
+                }
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          },
+
+          {
+            type: "category",
+            data: data.label,
+            inverse: true,
+            axisLabel: {
+              inside: true, // 数值和图表分离
+              verticalAlign: "bottom",
+              lineHeight: 34,
+              margin: 2,
+              formatter: function(value) {
+                let k = data.label.indexOf(value);
+                let index = k;
+                return `{a|${data.value[index]}%}`;
+              },
+              rich: {
+                a: {
+                  fontSize: "90%",
+                  color: "#fff",
+                  padding: [4, 0, 0, 0],
+                  fontFamily: "DOUYU"
+                }
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            data: data.value,
+            type: "bar",
+            barWidth: 10, // 柱子宽度
+            MaxSize: 0,
+            showBackground: true,
+            barBorderRadius: [30, 0, 0, 30],
+            backgroundStyle: {
+              color: "rgba(9, 68, 131, .2)"
+            },
+            label: {
+              show: false,
+              offset: [60, -17],
+              color: "#fff",
+              fontWeight: 500,
+              position: "left",
+              align: "left",
+              fontSize: "80%",
+              formatter: function(params) {
+                console.log(params);
+                return params.data.name;
+              }
+            },
+            itemStyle: {
+              barBorderRadius: [3, 0, 0, 3],
+              color: params => {
+                let i = colorListA.length;
+                let f = colorList.length;
+                return {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: colorListA[params.dataIndex % i]
+                    },
+                    {
+                      offset: 1,
+                      color: colorList[params.dataIndex % f]
+                    }
+                  ]
+                };
+              }
+            }
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            emphasis: {
+              scale: false
+            },
+            tooltip: {
+              show: false
+            },
+            // 小圆圈
+            // symbol:
+            //    "image://data:image/png;base64,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",
+            // symbolSize: [20, 20],
+            symbol: "rect",
+            symbolSize: [5, 16], // 进度条白点
+            itemStyle: {
+              barBorderRadius: [30, 0, 0, 30],
+              color: "#FFF",
+              shadowColor: "rgba(255, 255, 255, 0.5)",
+              shadowBlur: 5,
+              borderWidth: 1,
+              opacity: 1
+            },
+            z: 2,
+            data: data.value,
+            animationDelay: 500
+          }
+        ]
+      };
+      myChart.setOption(option);
+      const startMoveDataZoom = () => {
+        dataZoomMoveTimer = setInterval(() => {
+          dataZoomMove.start += 1;
+          dataZoomMove.end += 1;
+          if (dataZoomMove.end > data.value.length - 1) {
+            dataZoomMove.start = 0;
+            dataZoomMove.end = 4;
+          }
+          myChart.setOption({
+            dataZoom: [
+              {
+                type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
+                startValue: dataZoomMove.start,
+                endValue: dataZoomMove.end
+              }
+            ]
+          });
+        }, 2000);
+      };
+      startMoveDataZoom();
+      let chartDom = myChart.getDom();
+      chartDom.addEventListener("mouseout", () => {
+        if (dataZoomMoveTimer) return;
+        let dataZoomMove_get = myChart.getOption().dataZoom[0];
+        dataZoomMove.start = dataZoomMove_get.startValue;
+        dataZoomMove.end = dataZoomMove_get.endValue;
+        startMoveDataZoom();
+      });
+      chartDom.addEventListener("mouseover", () => {
+        clearInterval(dataZoomMoveTimer);
+        dataZoomMoveTimer = undefined;
+      });
+      window.onresize = function() {
+        // 让echarts图表实例调用resize方法，以适应新窗口大小
+        myChart.resize();
+      };
+    },
+    getData(cn) {
+      const container = document.getElementById("container");
+      const myChart = echarts.init(container);
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function(ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - 8, shape.y - 8];
+          const c2 = [xAxisPoint[0] - 8, xAxisPoint[1] - 8];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        }
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function(ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 4];
+          const c4 = [shape.x + 13, shape.y - 4];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        }
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function(ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + 13, shape.y - 4];
+          const c3 = [shape.x + 5, shape.y - 12];
+          const c4 = [shape.x - 8, shape.y - 8];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        }
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+      // 数据
+      const VALUE = cn.yData ? cn.yData : [];
+
+      let option = {
+        //你的代码
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          },
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#333"
+          },
+          formatter: function(params) {
+            return params[0].name + ":<br/>" + params[0].value;
+          }
+        },
+        grid: {
+          left: "0",
+          right: "0",
+          top: "5%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: cn.xData ? cn.xData : [],
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "white"
+            }
+          },
+          // offset: 25,
+          axisTick: {
+            show: false,
+            length: 9,
+            alignWithLabel: true,
+            lineStyle: {
+              color: "#7DFFFD"
+            }
+          },
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            rotate: 45
+          }
+        },
+        yAxis: [
+          {
+            min: 0,
+            type: "value",
+            name: "万米",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "white"
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                color: "rgba(255,255,255,0.1)"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              fontSize: 12
+            },
+            boundaryGap: ["20%", "20%"]
+          }
+        ],
+        series: [
+          {
+            type: "custom",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              var color =
+                api.value(1) > 10000
+                  ? "red"
+                  : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: "rgba(61, 137, 247, 0)" //  0%  处的颜色
+                      },
+                      {
+                        offset: 0.7,
+                        color: "rgba(61, 137, 247, 0.7)" //  100%  处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(61, 137, 247, 1)" //  100%  处的颜色
+                      }
+                    ]);
+              // console.log(color)
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0])
+                    },
+                    style: {
+                      fill: (color =
+                        api.value(1) > 10000
+                          ? "red"
+                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                              {
+                                offset: 1,
+                                color: "rgba(61, 137, 247, 0)" //  0%  处的颜色
+                              },
+                              {
+                                offset: 0.5,
+                                color: "rgba(61, 137, 247, 0.7)" //  100%  处的颜色
+                              },
+                              {
+                                offset: 0,
+                                color: "rgba(61, 137, 247, 1)" //  100%  处的颜色
+                              }
+                            ]))
+                    }
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0])
+                    },
+                    style: {
+                      fill: (color =
+                        api.value(1) > 10000
+                          ? "red"
+                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                              {
+                                offset: 1,
+                                color: "rgba(61, 137, 247, 0)" //  0%  处的颜色
+                              },
+                              {
+                                offset: 0.5,
+                                color: "rgba(61, 137, 247, 0.7)" //  100%  处的颜色
+                              },
+                              {
+                                offset: 0,
+                                color: "rgba(61, 137, 247, 1)" //  100%  处的颜色
+                              }
+                            ]))
+                    }
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0])
+                    },
+                    style: {
+                      fill: (color =
+                        api.value(1) > 10000
+                          ? "red"
+                          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                              {
+                                offset: 0,
+                                color: "#65c7ec"
+                              },
+                              {
+                                offset: 1,
+                                color: "#65c7ec"
+                              }
+                            ]))
+                    }
+                  }
+                ]
+              };
+            },
+            data: VALUE
+          }
+        ]
+      };
+      myChart.setOption(option);
+      autoHover(myChart, option, 12, 100);
+      window.onresize = function() {
+        // 让echarts图表实例调用resize方法，以适应新窗口大小
+        myChart.resize();
+      };
+    }
+  }
+};
+</script>
+<style scoped lang="less">
+.yxk {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .echart-box {
+    flex: 1 1 calc(50% - 9rem);
+    box-sizing: border-box;
+    // width: calc(50% - 1rem);
+    height: calc(50% - 4rem);
+    background-image: linear-gradient(-225deg,
+        #473b7b 0%,
+        #3584a7 51%,
+        #30d2be 100%);
+    // background-image: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
+    display: flex;
+    border-radius: 5px;
+    margin: 2rem 1rem;
+
+    .img {
+      width: 40%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 0.5rem;
+    }
+
+    .name {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      &-top {
+        font-size: 1.8rem;
+        color: #fff;
+        margin-bottom: 0.3rem;
+      }
+
+      &-bottom {
+        font-size: 1.8rem;
+        font-weight: bold;
+        color: rgb(38, 222, 212);
+      }
+    }
+  }
+
+  .header {
+    width: 100%;
+    height: 6rem;
+    background: url("../../../../assets/longscreen2/title-short.png");
+    background-size: 100%;
+    padding-top: 1rem;
+    box-sizing: border-box;
+
+    .title {
+      font-size: 1.6rem;
+      font-family: JLinXin;
+      font-weight: 600;
+      line-height: 2rem;
+      background: #fffde8 linear-gradient(180deg, #e8feff 40%, #00a9ff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-left: 8rem;
+      font-weight: bold;
+    }
+  }
+
+  &-flex {
+    height: 40% !important;
+    flex-direction: column;
+  }
+
+  &-content {
+    width: 100%;
+    height: 60%;
+
+    &-info {
+      width: 100%;
+      height: calc(50% - 6rem);
+
+      .YCI {
+        width: calc(100% / 3);
+        height: 100%;
+        display: flex;
+        background-color: rgba(255, 255, 255, 0.1);
+        border-radius: 1rem;
+        margin-top: 1.2rem;
+
+        &-img {
+          width: 40%;
+          // height: 100%;
+          background: url("../../../../assets/longscreen2/icon_chanyegongren.png");
+          background-repeat: no-repeat;
+          background-size: contain;
+          background-position: center;
+        }
+
+        &-img1 {
+          width: 40%;
+          // height: 100%;
+          background: url("../../../../assets/longscreen2/icon_shuzilvli.png");
+          background-repeat: no-repeat;
+          background-size: contain;
+          background-position: center;
+        }
+
+        &-img2 {
+          width: 40%;
+          // height: 100%;
+          background: url("../../../../assets/longscreen2/icon_shuzizhengzhao.png");
+          background-repeat: no-repeat;
+          background-size: contain;
+          background-position: center;
+        }
+
+        &-num {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          &-title {
+            font-size: 1.5rem;
+            color: #fff;
+          }
+
+          &-value {
+            font-size: 3rem;
+            color: #01f7f4;
+            margin-bottom: 0.1rem;
+          }
+        }
+      }
+    }
+
+    &-chart {
+      width: calc(100% - 1.2rem);
+      height: 50%;
+      margin-left: 1.2rem;
+
+      &-content {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/repair/record/index.vue b/src/pages/repair/record/index.vue
index e76c354..010097a 100644
--- a/src/pages/repair/record/index.vue
+++ b/src/pages/repair/record/index.vue
@@ -1,534 +1,534 @@
-<template>
-  <div class="sys-box repair-box">
-    <div class="sys-operate">
-      <el-button type="primary" v-has="'repair:record:add'" @click="add()">新增</el-button>
-      <el-button type="primary" v-has="'repair:record:remove'" @click="remove()" :disabled="btnDelDisabled">删除</el-button>
-    </div>
-    <div class="sys-search">
-      <el-form inline class="form_item_search_out ">
-        <div class='form_item_input_out'>
-        <el-form-item label="报修时间"  style='width:36%' class="form_item-inline">
-          <el-date-picker
-            v-model="repairTime"
-            type="daterange"
-            format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item label="设备名称" style='width:20%' class="form_item-inline">
-          <el-input v-model="search_data.deviceName" placeholder="设备名称"></el-input>
-        </el-form-item>
-        <el-form-item label="故障类型" style='width:22%' class="form_item-inline">
-          <el-select v-model="search_data.type" clearable placeholder="请选择">
-            <el-option v-for="item in hitchList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="使用状况" style='width:22%' class="form_item-inline">
-          <el-select v-model="search_data.usage" clearable placeholder="请选择">
-            <el-option
-              v-for="item in deviceStatusList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        </div>
-      <div class='form_item_btn_out'  >
-        <el-form-item>
-          <el-button type="primary" @click="search()">查询</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="moreSearch()">高级查询</el-button>
-        </el-form-item>
-      </div>
-      </el-form>
-    </div>
-    <div class="sys-table"  >
-      <el-table border fit @sort-change="sortChange"
-        @row-click="clickRow"
-        ref="tb"
-        :data="tableData"
-        :summary-method="getSummaries"
-        show-summary
-        :header-cell-style="{fontWeight: 'normal', textAlign: 'center', backgroundColor: '#eceff4', color: '#222'}"
-        @selection-change="handleSelectionChange"
-        v-loading="pictLoading"
-      >
-        <el-table-column type="selection" width="55" align="center"></el-table-column>
-        <el-table-column prop="deviceSerialno" align="center" label="设备编号" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-link type="primary" @click="openDetails(scope.row)">{{scope.row.deviceSerialno}}</el-link>
-          </template>
-        </el-table-column>
-        <el-table-column prop="deviceName" label="设备名称" align="center" show-overflow-tooltip></el-table-column>
-        <el-table-column sortable="custom"  prop="startTime" label="实际开工时间" align="center" show-overflow-tooltip width="124px"></el-table-column>
-        <el-table-column sortable="custom"  prop="endTime" align="center" label="实际完工时间" show-overflow-tooltip width="124px"></el-table-column>
-        <el-table-column prop="offHour" align="center" label="停机时间(小时)"   show-overflow-tooltip></el-table-column>
-        <el-table-column prop="typeName" align="center" label="故障类型" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="usageName" align="center" label="使用状况" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="cause" align="center" label="故障原因" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="solution" align="center" label="维修方案" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="manHour" align="center" label="维修工时（小时）" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="manHourCost" align="center" label="工时费（元）" show-overflow-tooltip></el-table-column>
-         <el-table-column prop="sparePartsCost" align="center" label="备件费（元）" show-overflow-tooltip></el-table-column>
-          <el-table-column prop="cost" align="center" label="维修费（元）" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="heldPersonName" align="center" label="维修人" show-overflow-tooltip></el-table-column>
-        <el-table-column sortable="custom" width="114"  prop="statusId" align="center" label="验收结果" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span>{{scope.row.statusName}}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <div class="sys-pagination">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="search_data.pageno"
-        :page-sizes="pageSizes"
-        :page-size="search_data.pagesize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-      ></el-pagination>
-    </div>
-     <el-dialog title="高级查询" center :visible.sync="advanceQueryDialogVisible" width="670px">
-      <el-form :inline="true"
-               label-width="80px"
-               class="dialog-form"
-               ref="form" style="width: 620px"
-      >
-
-        <div class="dialog-line">
-          <el-form-item label="设备编号"  class="dialog-form-inline-single">
-            <el-input v-model="formData.deviceSerialno" placeholder="请输入设备编号"></el-input>
-          </el-form-item>
-        </div>
-        <div class="dialog-line">
-          <el-form-item label="维修人"  class="dialog-form-inline-single">
-            <el-input v-model="formData.heldPersonName" placeholder="请输入设备编号"></el-input>
-          </el-form-item>
-        </div>
-        <div class="dialog-line">
-          <el-form-item label="验收结果"  class="dialog-form-inline-single">
-            <el-select v-model="formData.statusId" placeholder="请选择">
-              <el-option
-                v-for="item in resultList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="save">确定</el-button>
-        <el-button type="primary" @click="advanceQueryDialogVisible = false">关闭</el-button>
-        <el-button type="primary" @click="clear">清空</el-button>
-      </span>
-    </el-dialog>
-    <DialogChooseSingleUser :visible.sync="chooseUserVisible" @change="getUser"></DialogChooseSingleUser>
-  </div>
-</template>
-
-<script>
-import { formatDateTime } from "@/utils/tools.js";
-import DialogChooseSingleUser from "@/components/System/dialogChooseSingleUser";
-export default {
-  components: {
-    DialogChooseSingleUser
-  },
-  name: "repair_record_list",
-  data() {
-    return {
-      advanceQueryDialogVisible:false,
-      formData:{},
-      total: 0, //总条数
-      pageSizes: [10, 20, 50], //每页展示多少条
-      search_data: {
-        pageno: 1,
-        pagesize: 10,
-        startTime: "",
-        endTime: "",
-        time: "",
-        status: "",
-        heldPerson: "",
-        createBy: "",
-        title: ""
-      },
-
-      repairTime: "",
-      getUserList: [], //用户
-      btnDelDisabled: true,
-      btnOtherDisabled: true,
-      rowIds: [],
-      tableData: [],
-      dialogVisible: false,
-      pictLoading: false,
-      chooseUserVisible: false,
-      hitchList: [],
-      deviceStatusList: [],
-      offHourTotal: 0,
-      costTotal: 0,
-      manHourTotal: 0,
-      manHourCostTotal: 0,
-      sparePartsCostTotal: 0,
-      resultList: [],
-    };
-  },
-  created() {
-    var _this = this;
-    document.onkeydown = e => {
-      if (e.key === "Enter") {
-        _this.search()
-      }
-    }
-  },
-  mounted() {
-    this.getList();
-    this.initData();
-    this.initResultList();
-  },
-  methods: {
-      /**
-       * 高级查询
-       */
-      moreSearch() {
-        this.advanceQueryDialogVisible = true;
-      },
-
-      initResultList(){
-        this.$api.dictAPI.getDictsByType("acceptance_result").then(res => {
-          if (res.code === 0) {
-            this.resultList = res.datas;
-          }
-        });
-      },
-
-      save() {
-        for (var n in this.formData) {
-          this.search_data[n] = this.formData[n];
-        }
-        this.search_data.pageno = 1;
-        this.$nextTick(function () {
-          this.advanceQueryDialogVisible = false;
-          this.getList();
-        })
-      },
-      //清空
-      clear() {
-        for (var n in this.formData) {
-          this.formData[n] = '';
-        }
-        this.$forceUpdate()
-
-      },
-    sortChange({ column, prop, order }){
-      let j={ column, prop, order };
-      let order_=j.order=="ascending"?'asc':'desc'
-      this.$set(this.search_data,'sort',j.prop)
-      this.$set(this.search_data,'order',order_)
-      this.getList();
-    },
-    clickRow(row) {
-      this.$refs.tb.toggleRowSelection(row);
-    },
-    initData() {
-      Promise.all([
-        this.$api.commonAPI.getUsers(),
-        this.$api.dictAPI.getDictsByType("device_malfunction"),
-        this.$api.dictAPI.getDictsByType("device_status")
-      ])
-        .then(([r1, r2, r3, r4, r5]) => {
-          if (r1.code === 0) {
-            this.getUserList = r1.datas;
-          }
-          if (r2.code === 0) {
-            this.hitchList = r2.datas;
-          }
-          if (r3.code === 0) {
-            this.deviceStatusList = r3.datas;
-          }
-        })
-        .catch(error => {
-          console.log(error);
-        });
-    },
-    /**
-     * 计算合计
-     */
-    getSummaries(param) {
-      // const { columns, data } = param;
-      //   let offHourAll=0;
-      //   data.forEach(item=>{
-      //       offHourAll+=parseFloat(item.offHour)?parseFloat(item.offHour):0
-      //   })
-      const sums = [];
-      sums[1] = "总计";
-        sums[11] = "" + this.manHourCostTotal;
-      sums[10] = "" + this.manHourTotal;
-      sums[5] = "" + this.offHourTotal;
-      sums[12] = "" + this.sparePartsCostTotal;
-      sums[13] = "" + this.costTotal;
-      return sums;
-    },
-    /**
-     * 获取故障列表
-     */
-    getList() {
-      if (this.repairTime) {
-        this.search_data.startTime = formatDateTime(this.repairTime[0]);
-        this.search_data.endTime = formatDateTime(this.repairTime[1]);
-      } else {
-        this.search_data.startTime = "";
-        this.search_data.endTime = "";
-      }
-      this.pictLoading = true;
-      this.$api.repairCheckAPI
-        .deviceRepairEventList(this.search_data)
-        .then(res => {
-          this.pictLoading = false;
-          if (res.data) {
-            this.total = res.data.totalRows;
-            this.tableData = res.data.datas ? res.data.datas : [];
-            this.offHourTotal = res.offHourTotal;
-            this.costTotal = res.costTotal;
-            this.manHourTotal = res.manHourTotal;
-            this.sparePartsCostTotal = res.sparePartsCostTotal;
-            this.manHourCostTotal = res.manHourCostTotal
-          } else {
-            this.total = 0;
-            this.tableData = [];
-          }
-        })
-        .catch(r => {
-          console.log(r);
-        });
-    },
-    /**
-     * 查询
-     */
-    search() {
-      this.search_data.pageno = 1;
-      this.getList();
-    },
-    // 上下分页
-    handleCurrentChange(val) {
-      this.search_data.pageno = val;
-      this.getList();
-    },
-    // 每页显示多少条
-    handleSizeChange(val) {
-      this.search_data.pagesize = val;
-      this.getList();
-    },
-    /**
-     * 新增
-     */
-    add() {
-      this.$router.push({
-        path: "/repair/record_redact",
-        query: {
-          s: this.$route.path,
-          t: Date.now()
-        }
-      });
-    },
-    /**
-     * 获取用户信息
-     */
-    getUser(data) {
-      let item = this.rowIds[0];
-      let userid = data.id;
-      let eventid = item.reventId;
-      this.$confirm("确认将维修单转派给" + data.name + "吗?", "提示", {
-        type: "warning"
-      }).then(() => {
-        this.$api.repairCheckAPI
-          .reventTurnToSend({ eventId: eventid, userId: userid })
-          .then(res => {
-            if (res.code === 0) {
-              this.$message({
-                message: res.msg,
-                type: "success"
-              });
-              this.getList();
-            } else {
-              this.$message({
-                message: res.msg ? "转派失败，请重试" : res.msg,
-                type: "error"
-              });
-            }
-          })
-          .catch(error => {
-            this.$message({
-              message: "转派失败，请重试",
-              type: "error"
-            });
-          });
-      });
-    },
-    /**
-     * 转派
-     */
-    send() {
-      let item = this.rowIds[0];
-      if (item.reventStatusId !== 56) {
-        this.$alert("维修单已在处理进程中，您无法转派该维修单！", "提示", {
-          type: "warning"
-        });
-        return;
-      }
-      let id = item.id;
-      this.chooseUserVisible = true;
-    },
-    /**
-     *查看明细
-     */
-    openDetails(r) {
-      if (r.statusId === 146) {
-        this.$router.push({
-          path: "/repair/record_redact",
-          query: {
-            id: r.id,
-            eventid: r.eventId,
-            s: this.$route.path,
-            t: Date.now()
-          }
-        });
-      } else {
-        this.$router.push({
-          path: "/repair/detail",
-          query: { id: r.eventId,t: Date.now() }
-        });
-      }
-    },
-
-    /**
-     * 完成验收
-     */
-    complete() {
-      let item = this.rowIds[0];
-      if (item.reventStatusId === 58) {
-        this.$alert("维修单已完成验收，您无法再次处理该维修单！", "提示", {
-          type: "warning"
-        });
-        return;
-      }
-      let id = item.reventId;
-      this.$router.push({
-        path: "/repair/check",
-        query: { id: id, t: Date.now() }
-      });
-    },
-    /**
-     * 维修处理
-     */
-    repair() {
-      let item = this.rowIds[0];
-      if (item.reventStatusId === 58) {
-        this.$alert("维修单已完成验收，您无法再次处理该维修单！", "提示", {
-          type: "warning"
-        });
-        return;
-      }
-      let id = item.reventId;
-      this.$router.push({
-        path: "/repair/record",
-        query: { id: id, t: Date.now() }
-      });
-    },
-    /**
-     * 删除
-     */
-    remove() {
-      let ids = [];
-      this.rowIds.forEach(item => {
-        ids.push(item.id);
-      });
-      // const ids = this.rowIds.map(item => item.id).toString();
-      let params = { ids: ids };
-      this.$confirm("确认删除选中的维修记录吗?", "提示", {
-        type: "warning"
-      }).then(() => {
-        this.$api.repairCheckAPI
-          .batchRemoveRecord(params)
-          .then(res => {
-            if (res.code === 0) {
-              this.$message({
-                message: res.msg,
-                type: "success"
-              });
-              this.getList();
-            } else {
-              this.$message({
-                message: res.msg ? res.msg:"删除失败，请重试" ,
-                type: "error"
-              });
-            }
-          })
-          .catch(error => {
-            this.$message({
-              message: "删除失败，请重试",
-              type: "error"
-            });
-          });
-      });
-    },
-    /**
-     * 处理选中
-     */
-    handleSelectionChange(val) {
-      this.rowIds = val;
-      this.setBtn(val);
-    },
-    /**
-     * 控件操作按钮状态
-     */
-    setBtn(val) {
-      let isFlag = true;
-      let isDelFlag = true;
-      if (val.length > 0) {
-        isDelFlag = false;
-        if (val.length == 1) {
-          isFlag = false;
-        }
-      } else {
-        isFlag = true;
-        isDelFlag = true;
-      }
-      this.btnDelDisabled = isDelFlag;
-      this.btnOtherDisabled = isFlag;
-    }
-  }
-};
-</script>
-
-
-<style scoped>
-.flex {
-  display: flex;
-}
-.sys-form {
-  padding: 0px;
-}
-.sys-form .form-inline {
-  width: 33.33%;
-}
-.sys-form .form-inline .el-input,
-.sys-form .form-inline .el-select .el-input {
-  width: 100%;
-}
-</style>
-<style >
-.repair-box .sys-form .form-inline .el-select .el-input {
-  width: 100%;
-}
-.repair-box .el-rate {
-  margin-top: 10px;
-}
-</style>
+<template>
+  <div class="sys-box repair-box">
+    <div class="sys-operate">
+      <el-button type="primary" v-has="'repair:record:add'" @click="add()">新增</el-button>
+      <el-button type="primary" v-has="'repair:record:remove'" @click="remove()" :disabled="btnDelDisabled">删除</el-button>
+    </div>
+    <div class="sys-search">
+      <el-form inline class="form_item_search_out ">
+        <div class='form_item_input_out'>
+        <el-form-item label="报修时间"  style='width:36%' class="form_item-inline">
+          <el-date-picker
+            v-model="repairTime"
+            type="daterange"
+            format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="设备名称" style='width:20%' class="form_item-inline">
+          <el-input v-model="search_data.deviceName" placeholder="设备名称"></el-input>
+        </el-form-item>
+        <el-form-item label="故障类型" style='width:22%' class="form_item-inline">
+          <el-select v-model="search_data.type" clearable placeholder="请选择">
+            <el-option v-for="item in hitchList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="使用状况" style='width:22%' class="form_item-inline">
+          <el-select v-model="search_data.usage" clearable placeholder="请选择">
+            <el-option
+              v-for="item in deviceStatusList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        </div>
+      <div class='form_item_btn_out'  >
+        <el-form-item>
+          <el-button type="primary" @click="search()">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="moreSearch()">高级查询</el-button>
+        </el-form-item>
+      </div>
+      </el-form>
+    </div>
+    <div class="sys-table"  >
+      <el-table border fit @sort-change="sortChange"
+        @row-click="clickRow"
+        ref="tb"
+        :data="tableData"
+        :summary-method="getSummaries"
+        show-summary
+        :header-cell-style="{fontWeight: 'normal', textAlign: 'center', backgroundColor: '#eceff4', color: '#222'}"
+        @selection-change="handleSelectionChange"
+        v-loading="pictLoading"
+      >
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column prop="deviceSerialno" align="center" label="设备编号" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <el-link type="primary" @click="openDetails(scope.row)">{{scope.row.deviceSerialno}}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="deviceName" label="设备名称" align="center" show-overflow-tooltip></el-table-column>
+        <el-table-column sortable="custom"  prop="startTime" label="实际开工时间" align="center" show-overflow-tooltip width="124px"></el-table-column>
+        <el-table-column sortable="custom"  prop="endTime" align="center" label="实际完工时间" show-overflow-tooltip width="124px"></el-table-column>
+        <el-table-column prop="offHour" align="center" label="停机时间(小时)"   show-overflow-tooltip></el-table-column>
+        <el-table-column prop="typeName" align="center" label="故障类型" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="usageName" align="center" label="使用状况" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="cause" align="center" label="故障原因" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="solution" align="center" label="维修方案" show-overflow-tooltip></el-table-column>
+        <!-- <el-table-column prop="manHour" align="center" label="维修工时（小时）" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="manHourCost" align="center" label="工时费（元）" show-overflow-tooltip></el-table-column>
+         <el-table-column prop="sparePartsCost" align="center" label="备件费（元）" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="cost" align="center" label="维修费（元）" show-overflow-tooltip></el-table-column> -->
+        <el-table-column prop="heldPersonName" align="center" label="维修人" show-overflow-tooltip></el-table-column>
+        <el-table-column sortable="custom" width="114"  prop="statusId" align="center" label="验收结果" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{scope.row.statusName}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="sys-pagination">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="search_data.pageno"
+        :page-sizes="pageSizes"
+        :page-size="search_data.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
+     <el-dialog title="高级查询" center :visible.sync="advanceQueryDialogVisible" width="670px">
+      <el-form :inline="true"
+               label-width="80px"
+               class="dialog-form"
+               ref="form" style="width: 620px"
+      >
+
+        <div class="dialog-line">
+          <el-form-item label="设备编号"  class="dialog-form-inline-single">
+            <el-input v-model="formData.deviceSerialno" placeholder="请输入设备编号"></el-input>
+          </el-form-item>
+        </div>
+        <div class="dialog-line">
+          <el-form-item label="维修人"  class="dialog-form-inline-single">
+            <el-input v-model="formData.heldPersonName" placeholder="请输入设备编号"></el-input>
+          </el-form-item>
+        </div>
+        <div class="dialog-line">
+          <el-form-item label="验收结果"  class="dialog-form-inline-single">
+            <el-select v-model="formData.statusId" placeholder="请选择">
+              <el-option
+                v-for="item in resultList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save">确定</el-button>
+        <el-button type="primary" @click="advanceQueryDialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="clear">清空</el-button>
+      </span>
+    </el-dialog>
+    <DialogChooseSingleUser :visible.sync="chooseUserVisible" @change="getUser"></DialogChooseSingleUser>
+  </div>
+</template>
+
+<script>
+import { formatDateTime } from "@/utils/tools.js";
+import DialogChooseSingleUser from "@/components/System/dialogChooseSingleUser";
+export default {
+  components: {
+    DialogChooseSingleUser
+  },
+  name: "repair_record_list",
+  data() {
+    return {
+      advanceQueryDialogVisible:false,
+      formData:{},
+      total: 0, //总条数
+      pageSizes: [10, 20, 50], //每页展示多少条
+      search_data: {
+        pageno: 1,
+        pagesize: 10,
+        startTime: "",
+        endTime: "",
+        time: "",
+        status: "",
+        heldPerson: "",
+        createBy: "",
+        title: ""
+      },
+
+      repairTime: "",
+      getUserList: [], //用户
+      btnDelDisabled: true,
+      btnOtherDisabled: true,
+      rowIds: [],
+      tableData: [],
+      dialogVisible: false,
+      pictLoading: false,
+      chooseUserVisible: false,
+      hitchList: [],
+      deviceStatusList: [],
+      offHourTotal: 0,
+      costTotal: 0,
+      manHourTotal: 0,
+      manHourCostTotal: 0,
+      sparePartsCostTotal: 0,
+      resultList: [],
+    };
+  },
+  created() {
+    var _this = this;
+    document.onkeydown = e => {
+      if (e.key === "Enter") {
+        _this.search()
+      }
+    }
+  },
+  mounted() {
+    this.getList();
+    this.initData();
+    this.initResultList();
+  },
+  methods: {
+      /**
+       * 高级查询
+       */
+      moreSearch() {
+        this.advanceQueryDialogVisible = true;
+      },
+
+      initResultList(){
+        this.$api.dictAPI.getDictsByType("acceptance_result").then(res => {
+          if (res.code === 0) {
+            this.resultList = res.datas;
+          }
+        });
+      },
+
+      save() {
+        for (var n in this.formData) {
+          this.search_data[n] = this.formData[n];
+        }
+        this.search_data.pageno = 1;
+        this.$nextTick(function () {
+          this.advanceQueryDialogVisible = false;
+          this.getList();
+        })
+      },
+      //清空
+      clear() {
+        for (var n in this.formData) {
+          this.formData[n] = '';
+        }
+        this.$forceUpdate()
+
+      },
+    sortChange({ column, prop, order }){
+      let j={ column, prop, order };
+      let order_=j.order=="ascending"?'asc':'desc'
+      this.$set(this.search_data,'sort',j.prop)
+      this.$set(this.search_data,'order',order_)
+      this.getList();
+    },
+    clickRow(row) {
+      this.$refs.tb.toggleRowSelection(row);
+    },
+    initData() {
+      Promise.all([
+        this.$api.commonAPI.getUsers(),
+        this.$api.dictAPI.getDictsByType("device_malfunction"),
+        this.$api.dictAPI.getDictsByType("device_status")
+      ])
+        .then(([r1, r2, r3, r4, r5]) => {
+          if (r1.code === 0) {
+            this.getUserList = r1.datas;
+          }
+          if (r2.code === 0) {
+            this.hitchList = r2.datas;
+          }
+          if (r3.code === 0) {
+            this.deviceStatusList = r3.datas;
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    /**
+     * 计算合计
+     */
+    getSummaries(param) {
+      // const { columns, data } = param;
+      //   let offHourAll=0;
+      //   data.forEach(item=>{
+      //       offHourAll+=parseFloat(item.offHour)?parseFloat(item.offHour):0
+      //   })
+      const sums = [];
+      sums[1] = "总计";
+        sums[11] = "" + this.manHourCostTotal;
+      sums[10] = "" + this.manHourTotal;
+      sums[5] = "" + this.offHourTotal;
+      sums[12] = "" + this.sparePartsCostTotal;
+      sums[13] = "" + this.costTotal;
+      return sums;
+    },
+    /**
+     * 获取故障列表
+     */
+    getList() {
+      if (this.repairTime) {
+        this.search_data.startTime = formatDateTime(this.repairTime[0]);
+        this.search_data.endTime = formatDateTime(this.repairTime[1]);
+      } else {
+        this.search_data.startTime = "";
+        this.search_data.endTime = "";
+      }
+      this.pictLoading = true;
+      this.$api.repairCheckAPI
+        .deviceRepairEventList(this.search_data)
+        .then(res => {
+          this.pictLoading = false;
+          if (res.data) {
+            this.total = res.data.totalRows;
+            this.tableData = res.data.datas ? res.data.datas : [];
+            this.offHourTotal = res.offHourTotal;
+            this.costTotal = res.costTotal;
+            this.manHourTotal = res.manHourTotal;
+            this.sparePartsCostTotal = res.sparePartsCostTotal;
+            this.manHourCostTotal = res.manHourCostTotal
+          } else {
+            this.total = 0;
+            this.tableData = [];
+          }
+        })
+        .catch(r => {
+          console.log(r);
+        });
+    },
+    /**
+     * 查询
+     */
+    search() {
+      this.search_data.pageno = 1;
+      this.getList();
+    },
+    // 上下分页
+    handleCurrentChange(val) {
+      this.search_data.pageno = val;
+      this.getList();
+    },
+    // 每页显示多少条
+    handleSizeChange(val) {
+      this.search_data.pagesize = val;
+      this.getList();
+    },
+    /**
+     * 新增
+     */
+    add() {
+      this.$router.push({
+        path: "/repair/record_redact",
+        query: {
+          s: this.$route.path,
+          t: Date.now()
+        }
+      });
+    },
+    /**
+     * 获取用户信息
+     */
+    getUser(data) {
+      let item = this.rowIds[0];
+      let userid = data.id;
+      let eventid = item.reventId;
+      this.$confirm("确认将维修单转派给" + data.name + "吗?", "提示", {
+        type: "warning"
+      }).then(() => {
+        this.$api.repairCheckAPI
+          .reventTurnToSend({ eventId: eventid, userId: userid })
+          .then(res => {
+            if (res.code === 0) {
+              this.$message({
+                message: res.msg,
+                type: "success"
+              });
+              this.getList();
+            } else {
+              this.$message({
+                message: res.msg ? "转派失败，请重试" : res.msg,
+                type: "error"
+              });
+            }
+          })
+          .catch(error => {
+            this.$message({
+              message: "转派失败，请重试",
+              type: "error"
+            });
+          });
+      });
+    },
+    /**
+     * 转派
+     */
+    send() {
+      let item = this.rowIds[0];
+      if (item.reventStatusId !== 56) {
+        this.$alert("维修单已在处理进程中，您无法转派该维修单！", "提示", {
+          type: "warning"
+        });
+        return;
+      }
+      let id = item.id;
+      this.chooseUserVisible = true;
+    },
+    /**
+     *查看明细
+     */
+    openDetails(r) {
+      if (r.statusId === 146) {
+        this.$router.push({
+          path: "/repair/record_redact",
+          query: {
+            id: r.id,
+            eventid: r.eventId,
+            s: this.$route.path,
+            t: Date.now()
+          }
+        });
+      } else {
+        this.$router.push({
+          path: "/repair/detail",
+          query: { id: r.eventId,t: Date.now() }
+        });
+      }
+    },
+
+    /**
+     * 完成验收
+     */
+    complete() {
+      let item = this.rowIds[0];
+      if (item.reventStatusId === 58) {
+        this.$alert("维修单已完成验收，您无法再次处理该维修单！", "提示", {
+          type: "warning"
+        });
+        return;
+      }
+      let id = item.reventId;
+      this.$router.push({
+        path: "/repair/check",
+        query: { id: id, t: Date.now() }
+      });
+    },
+    /**
+     * 维修处理
+     */
+    repair() {
+      let item = this.rowIds[0];
+      if (item.reventStatusId === 58) {
+        this.$alert("维修单已完成验收，您无法再次处理该维修单！", "提示", {
+          type: "warning"
+        });
+        return;
+      }
+      let id = item.reventId;
+      this.$router.push({
+        path: "/repair/record",
+        query: { id: id, t: Date.now() }
+      });
+    },
+    /**
+     * 删除
+     */
+    remove() {
+      let ids = [];
+      this.rowIds.forEach(item => {
+        ids.push(item.id);
+      });
+      // const ids = this.rowIds.map(item => item.id).toString();
+      let params = { ids: ids };
+      this.$confirm("确认删除选中的维修记录吗?", "提示", {
+        type: "warning"
+      }).then(() => {
+        this.$api.repairCheckAPI
+          .batchRemoveRecord(params)
+          .then(res => {
+            if (res.code === 0) {
+              this.$message({
+                message: res.msg,
+                type: "success"
+              });
+              this.getList();
+            } else {
+              this.$message({
+                message: res.msg ? res.msg:"删除失败，请重试" ,
+                type: "error"
+              });
+            }
+          })
+          .catch(error => {
+            this.$message({
+              message: "删除失败，请重试",
+              type: "error"
+            });
+          });
+      });
+    },
+    /**
+     * 处理选中
+     */
+    handleSelectionChange(val) {
+      this.rowIds = val;
+      this.setBtn(val);
+    },
+    /**
+     * 控件操作按钮状态
+     */
+    setBtn(val) {
+      let isFlag = true;
+      let isDelFlag = true;
+      if (val.length > 0) {
+        isDelFlag = false;
+        if (val.length == 1) {
+          isFlag = false;
+        }
+      } else {
+        isFlag = true;
+        isDelFlag = true;
+      }
+      this.btnDelDisabled = isDelFlag;
+      this.btnOtherDisabled = isFlag;
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+.flex {
+  display: flex;
+}
+.sys-form {
+  padding: 0px;
+}
+.sys-form .form-inline {
+  width: 33.33%;
+}
+.sys-form .form-inline .el-input,
+.sys-form .form-inline .el-select .el-input {
+  width: 100%;
+}
+</style>
+<style >
+.repair-box .sys-form .form-inline .el-select .el-input {
+  width: 100%;
+}
+.repair-box .el-rate {
+  margin-top: 10px;
+}
+</style>