chore: sync local DataV boards and assets for standalone repo

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-21 17:00:21 +08:00
parent 08e5773d3e
commit f21bb0f2ea
109 changed files with 15299 additions and 7269 deletions
@@ -19,3 +19,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+debug.log
+**/debug.log
+
@@ -17,6 +17,7 @@
        "vue": "^2.6.11",
        "vue-awesome": "^4.0.2",
        "vue-router": "^3.1.5",
+        "vue-seamless-scroll": "^1.1.23",
        "vuex": "^3.1.2",
        "webpack": "^4.23.0",
        "webpack-cli": "^3.3.10"
@@ -5103,6 +5104,11 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz",
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -16278,6 +16284,14 @@
      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
      "license": "MIT"
    },
+    "node_modules/vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
+      "dependencies": {
+        "comutils": "^1.1.9"
+      }
+    },
    "node_modules/vue-style-loader": {
      "version": "4.1.3",
      "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -21449,6 +21463,11 @@
        }
      }
    },
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz",
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -29604,6 +29623,14 @@
      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
    },
+    "vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
    "vue-style-loader": {
      "version": "4.1.3",
      "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -17,6 +17,7 @@
    "vue": "^2.6.11",
    "vue-awesome": "^4.0.2",
    "vue-router": "^3.1.5",
+    "vue-seamless-scroll": "^1.1.23",
    "vuex": "^3.1.2",
    "webpack": "^4.23.0",
    "webpack-cli": "^3.3.10"
@@ -0,0 +1,53 @@
+import request from '../utils/request' 
+//生产任务
+export function gettaskList(data) {
+ return request({
+    url: '/api/bi/zhusu-factory-data',
+    method: 'post',
+    data
+})
+}
+
+  export function getzlList (params) {
+    return request({
+      url: '/api/bi/zl-bi-data',
+      method: 'POST',
+      type: 'change',
+      data: params
+    })
+  }
+
+ 
+  export function getmjList (params) {
+    return request({
+      url: '/api/bi/mold-manager-data',
+      method: 'POST',
+      type: 'change',
+      data: params
+    })
+  }
+  export function getzzList (params) {
+    return request({
+      url: '/api/bi/zuzhuang-factory-data',
+      method: 'POST',
+      type: 'change',
+      data: params
+    })
+  }
+  export function getjcList (data) {
+    return request({
+      url: '/api/bi/jichu-factory-data',
+      method: 'POST',
+      type: 'change',
+      data
+    })
+  }
+
+  export function getsbList (data) {
+    return request({
+      url: '/api/bi/equip-manager-data',
+      method: 'POST',
+      type: 'change',
+      data
+    })
+  }
@@ -0,0 +1,68 @@
+.box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    width: 772px;
+    height: 128px;
+    margin-top: 10px;
+    .cell {
+      width: 193px;
+      .item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        margin-left: 30px;
+        margin-top: 20px;
+        width: 100%;
+        .text{
+          font-size:12px;
+        }
+        .num{
+          font-size: 20px;
+          margin-bottom:10px;
+        }
+      }
+    }
+    .jrrk {
+      background-image: url("@/assets/images/sum-board/jrrk.png");
+      background-repeat: no-repeat;
+      background-position: center center;
+      //background-attachment: fixed;
+      background-size: 169px 74px;
+      .num{
+        color:#1FEEF7;
+      }
+    }
+    .jrck {
+      background-image: url("@/assets/images/sum-board/jrck.png");
+      background-repeat: no-repeat;
+      background-position: center center;
+      //background-attachment: fixed;
+      background-size: 169px 74px;
+      .num{
+        color:#208DF0;
+      }
+    }
+    .jrfh {
+      background-image: url("@/assets/images/sum-board/jrfh.png");
+      background-repeat: no-repeat;
+      background-position: center center;
+      //background-attachment: fixed;
+      background-size: 169px 74px;
+      .num{
+        color:#16FFA5;
+      }
+    }
+    .jrsh {
+      background-image: url("@/assets/images/sum-board/jrsh.png");
+      background-repeat: no-repeat;
+      background-position: center center;
+      //background-attachment: fixed;
+      background-size: 169px 74px;
+      .num{
+        color:#CFD243;
+      }
+    }
+  }
@@ -0,0 +1,14 @@
+.container {
+    width: 100vw;
+    height: 100%;
+    line-height: 100px;
+    background-image: url("../images/sum-board/head.png");
+    font-size: 45px;
+    color: #fff;
+    // text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
+    //   0 0 8px rgba(255, 255, 255, 0.1),0 0 8px rgba(255, 255, 255, 0);
+    //filter: drop-shadow(0 0 10px white) drop-shadow(0 0 20px white) drop-shadow(0 0 30px white);
+    background-repeat: no-repeat;
+    background-size: contain;
+    font-weight: 500;
+  }
@@ -19,23 +19,18 @@
  }

  .host-body {
-    height: 100%;
-
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }
-
    .dv-dec-10-s {
      transform: rotateY(180deg);
    }
-
    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }
-
    .title {
      position: relative;
      width: 500px;
@@ -44,7 +39,7 @@
      background-repeat: no-repeat;

      .title-text {
-        font-size: 35px;
+        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
@@ -65,7 +60,6 @@
    .aside-width {
      width: 40%;
    }
-
    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
@@ -77,7 +71,6 @@
        text-align: right;
        width: 500px;
      }
-
      font-size: 18px;
      width: 300px;
      line-height: 50px;
@@ -101,13 +94,10 @@
    }

    .react-left {
-      user-select: none;
-
      &.react-l-s {
        width: 500px;
        text-align: left;
      }
-
      font-size: 18px;
      width: 300px;
      height: 50px;
@@ -133,7 +123,6 @@
    }

    .body-box {
-      // height: 100%;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
@@ -141,15 +130,11 @@
      //下方区域的布局
      .content-box {
        display: grid;
-        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
+        grid-template-columns: 3fr 9fr 3fr;
      }

      // 底部数据
-      .bottom-box {
-        margin-top: 10px;
-        display: grid;
-        grid-template-columns: repeat(2, 50%);
-      }
+      
    }
  }
 }
@@ -57,6 +57,9 @@ export default {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, 'tdTheme')
      this.chart.setOption(this.options, true)
+      window.addEventListener('resize', function() {
+        this.chart.resize();
+    });
    }
  }
 }
@@ -0,0 +1,157 @@
+<template>
+  <div class="grid-progress-bar" :id="domId">
+    <div
+      v-for="(item, index) in totalItems"
+      :key="index"
+      class="grid-item"
+      :class="{ completed: index < completedItems }"
+      :style="{ backgroundColor: getColor(completedItems, index) }"
+    ></div>
+  </div>
+  <div class="tip-text">{{ percent }}%</div>
+</template>
+
+<script setup>
+import { ref, watchEffect, onMounted, onUnmounted } from "vue";
+
+// 示例数据
+const props = defineProps({
+  domId: {
+    type: String,
+    default: "progressBar",
+    require: true,
+  },
+  percent: {
+    type: Number,
+    default: 0,
+  },
+  totalWidth: {
+    type: String,
+    default: "80%",
+  },
+  gapWidth: {
+    type: String,
+    default: "4px",
+  },
+  gridWidth: {
+    type: String,
+    default: "6.68px",
+  },
+  gridHeight: {
+    type: String,
+    default: "21px",
+  },
+  color: {
+    type: String,
+    default: "#4caf50",
+  },
+  bgColor: {
+    type: String,
+    default: "#ccc",
+  },
+  startColor: {
+    type: String,
+    //default: "#21564F",
+  },
+  endColor: {
+    type: String,
+    //default: "#3BFFBA",
+  },
+});
+
+const totalItems = ref(0);
+const completedItems = ref(0);
+const cacheContainerWidth = ref(0);
+
+const getColor = (total, index) => {
+  if (total <= index) {
+    return props.bgColor;
+  }
+  if (!props.startColor || !props.endColor) {
+    return props.color;
+  }
+  const totalSteps = total - 1; // 因为是从0到19，共有20个div
+  const r1 = parseInt(props.startColor.substring(1, 3), 16);
+  const g1 = parseInt(props.startColor.substring(3, 5), 16);
+  const b1 = parseInt(props.startColor.substring(5, 7), 16);
+  const r2 = parseInt(props.endColor.substring(1, 3), 16);
+  const g2 = parseInt(props.endColor.substring(3, 5), 16);
+  const b2 = parseInt(props.endColor.substring(5, 7), 16);
+
+  const r = Math.round(r1 + ((r2 - r1) * index) / totalSteps).toString(16);
+  const g = Math.round(g1 + ((g2 - g1) * index) / totalSteps).toString(16);
+  const b = Math.round(b1 + ((b2 - b1) * index) / totalSteps).toString(16);
+
+  return `#${r.padStart(2, "0")}${g.padStart(2, "0")}${b.padStart(2, "0")}`;
+};
+// const gradientColors = computed(() => {
+//   const _completedItems = completedItems.value;
+//   const colors = [];
+//   for (let i = 0; i < _completedItems; i++) {
+//     colors.push(getColor(_completedItems, i));
+//   }
+//   return colors;
+// });
+/////
+const getTransNumFromCss = (v) => {
+  return Number(v.replace("px", ""));
+};
+const setTotalItems = () => {
+  const div =
+    (cacheContainerWidth.value - getTransNumFromCss(props.gapWidth)) /
+    (getTransNumFromCss(props.gapWidth) + getTransNumFromCss(props.gridWidth));
+  console.log(cacheContainerWidth.value, totalItems.value, "值==---===");
+  totalItems.value = Math.floor(div);
+  completedItems.value = Math.floor((totalItems.value * props.percent) / 100);
+};
+
+const setContainerWidth = () => {
+  const dom = document.getElementById(props.domId);
+  cacheContainerWidth.value = dom.offsetWidth;
+  setTotalItems();
+};
+const resizeHandler = () => {
+  setContainerWidth();
+};
+const onResize = () => {
+  window.addEventListener("resize", resizeHandler);
+};
+const removeResize = () => {
+  window.removeEventListener("resize", resizeHandler);
+};
+onMounted(() => {
+  resizeHandler();
+  onResize();
+});
+onUnmounted(() => {
+  removeResize();
+});
+</script>
+
+<style scoped>
+.grid-progress-bar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: v-bind(gapWidth);
+  width: v-bind(totalWidth);
+}
+
+.grid-item {
+  width: v-bind(gridWidth); /* 固定宽度 */
+  height: v-bind(gridHeight); /* 固定高度 */
+  background-color: v-bind(bgColor);
+}
+
+.completed {
+  background-color: v-bind(color);
+}
+.tip-text {
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 20px;
+  height: v-bind(gridHeight);
+  line-height: v-bind(gridHeight);
+}
+</style>
@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
@@ -0,0 +1,189 @@
+<template>
+  <div class="circle-container" :style="containerStyle">
+    <svg :width="size" :height="size" viewBox="0 0 100 100" class="circle-svg">
+      <defs>
+        <linearGradient v-if="isGradient" :id="gradientId">
+          <stop v-for="(colorStop, index) in gradientColors" :key="index" :offset="colorStop.offset" :stop-color="colorStop.color" />
+        </linearGradient>
+      </defs>
+
+      <!-- 叠加的内部圆环 -->
+      <circle
+        v-if="glowType === 'outer'"
+        cx="50"
+        cy="50"
+        r="40"
+        :stroke="strokeColor"
+        :stroke-width="innerCircleThickness"
+        fill="none"
+        stroke-linecap="round"
+        class="circle-inner"
+      />
+
+      <!-- 主圆环，应用发光效果 -->
+      <circle
+        cx="50"
+        cy="50"
+        r="40"
+        :stroke="strokeColor"
+        :stroke-width="thickness"
+        fill="none"
+        stroke-linecap="round"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="dashOffset"
+        class="circle-main"
+        :style="circleGlowStyle"
+      />
+
+      <!-- 中间文字 -->
+      <text x="50" y="50" text-anchor="middle" dominant-baseline="middle" class="circle-text">
+        {{ text }}
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'CustomCircle',
+  props: {
+    startAngle: {
+      type: Number,
+      default: -150,
+      validator: value => value >= -360 && value <= 360
+    },
+    endAngle: {
+      type: Number,
+      default: 30,
+      validator: value => value >= -360 && value <= 360
+    },
+    thickness: {
+      type: Number,
+      default: 10
+    },
+    color: {
+      type: [String, Object],
+      required: true
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    glow: {
+      type: Boolean,
+      default: false
+    },
+    glowType: {
+      type: String, // outer, both
+      default: 'outer'
+    },
+    size: {
+      type: Number,
+      default: 200
+    },
+  },
+  setup(props) {
+    const gradientId = 'gradient-' + Math.random().toString(36).substring(7);
+
+    const isGradient = computed(() => typeof props.color === 'object');
+    const gradientColors = computed(() => props.color);
+
+    const circumference = 2 * Math.PI * 40;
+
+    // 计算起始角度和结束角度的偏移和弧长
+    const dashOffset = computed(() => {
+      const totalAngle = props.endAngle - props.startAngle;
+
+      // 圆环的起始角度转换为偏移量，负角度表示逆时针
+      const startOffset = (props.startAngle / 360) * circumference;
+      const endOffset = (totalAngle / 360) * circumference;
+
+      return -startOffset;
+    });
+
+    const dashArray = computed(() => {
+      const totalAngle = props.endAngle - props.startAngle;
+
+      // 圆环显示的弧长
+      const arcLength = Math.abs((totalAngle / 360) * circumference);
+      return `${arcLength} ${circumference}`;
+    });
+
+    const strokeColor = computed(() => {
+      return isGradient.value ? `url(#${gradientId})` : props.color;
+    });
+
+    const backgroundStroke = 'rgba(0, 0, 0, 0.1)'; // 圆环的背景颜色，可以根据需要修改
+
+    const containerStyle = computed(() => ({
+      width: `${props.size}px`,
+      height: `${props.size}px`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '50%',
+    }));
+
+    // 内部圆环的粗细，保证叠加后整体等于传入的 thickness
+    const innerCircleThickness = computed(() => props.thickness * 0.5);
+
+    // 发光效果的样式，应用到圆环本身
+    const circleGlowStyle = computed(() => {
+      if (!props.glow) {
+        return {};
+      }
+
+      const glowColor = 'rgba(255, 0, 0, 0.8)';
+      const outerGlow = `drop-shadow(0 0 10px ${glowColor})`;
+
+      // 根据类型返回对应的发光效果
+      switch (props.glowType) {
+        case 'both':
+          return { filter: `${outerGlow} drop-shadow(0 0 5px ${glowColor})` };
+        default: // outer
+          return { filter: outerGlow };
+      }
+    });
+
+    return {
+      circumference,
+      dashOffset,
+      dashArray,
+      strokeColor,
+      gradientId,
+      isGradient,
+      gradientColors,
+      backgroundStroke,
+      containerStyle,
+      innerCircleThickness,
+      circleGlowStyle,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.circle-svg {
+  transform: rotate(-90deg); /* 使起始角度从顶部开始 */
+}
+
+.circle-inner {
+  opacity: 1; /* 内部圆环需要完全不透明 */
+}
+
+.circle-main {
+  transition: stroke-dashoffset 0.5s ease;
+  stroke-dasharray: var(--dasharray);
+}
+
+.circle-text {
+  font-size: 14px;
+  fill: black;
+}
+
+.circle-container {
+  position: relative;
+}
+</style>
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="ScaleBox"
+    ref="ScaleBox"
+    :style="{
+      width: width + 'px',
+      height: height + 'px',
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: "ScaleBox",
+  props: {},
+  data() {
+    return {
+      scale: 0,
+      width: 1920,
+      height: 1080,
+    };
+  },
+  mounted() {
+    this.setScale();
+    window.addEventListener("resize", this.debounce(this.setScale));
+  },
+  methods: {
+    getScale() {
+      // 固定好16：9的宽高比，计算出最合适的缩放比
+      const { width, height } = this;
+      const wh = window.innerHeight / height;
+      const ww = window.innerWidth / width;
+      console.log(ww < wh ? ww : wh);
+      return ww < wh ? ww : wh;
+    },
+    setScale() {
+      // 获取到缩放比例，设置它
+      this.scale = this.getScale();
+      if (this.$refs.ScaleBox) {
+        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+      }
+    },
+    debounce(fn, delay) {
+      const delays = delay || 500;
+      let timer;
+      return function () {
+        const th = this;
+        const args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+          timer = null;
+          fn.apply(th, args);
+        }, delays);
+      };
+    },
+  },
+};
+</script>
+ 
+<style lang="scss">
+#ScaleBox {
+  --scale: 1;
+}
+.ScaleBox {
+  position: absolute;
+  transform: scale(var(--scale)) translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  transform-origin: 0 0;
+  left: 50%;
+  top: 50%;
+  transition: 0.3s;
+  z-index: 999;
+  // background: rgba(255, 0, 0, 0.3);
+}
+</style>
@@ -0,0 +1,72 @@
+<template>
+  <!-- <div ref="domBox" :style="{ width, height }"> -->
+  <div ref="domRef" :style="{ width, height }" />
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { watch, ref, onMounted, onUnmounted, nextTick } from "vue";
+
+import echarts from "@/utils/echarts/index";
+const props = defineProps({
+  width: {
+    type: String,
+    default: "100%",
+  },
+  height: {
+    type: String,
+    default: "100%",
+  },
+  options: {
+    type: Object,
+    default: null,
+  },
+});
+
+const domRef = ref(null);
+const domBox = ref(null);
+let chartObj = null;
+
+onMounted(() => {
+  if (!domRef.value) return;
+  init();
+  if (props.options) drawOption();
+  onResize();
+});
+
+onUnmounted(() => {
+  if (chartObj) {
+    chartObj.dispose();
+    chartObj = null;
+    removeResize();
+  }
+});
+
+watch(
+  () => props.options,
+  () => drawOption()
+);
+
+// 初始化
+const init = () => {
+  chartObj = echarts.init(domRef.value);
+};
+
+const drawOption = () => {
+  if (!chartObj) return;
+  chartObj.setOption(props.options);
+  chartObj.resize(); //调用自适应方法
+};
+const resizeHandler = () => {
+  nextTick(() => {
+    console.log("执行尺寸重置");
+    chartObj && chartObj.resize(); //调用自适应方法
+  });
+};
+const onResize = () => {
+  window.addEventListener("resize", resizeHandler);
+};
+const removeResize = () => {
+  window.removeEventListener("resize", resizeHandler);
+};
+</script>
@@ -4,7 +4,7 @@
    <Echart
      :options="options"
      id="bottomLeftChart"
-      height="480px"
+      height="200px"
      width="100%"
    ></Echart>
  </div>
@@ -31,6 +31,20 @@ export default {
    cdata: {
      handler (newData) {
        this.options = {
+          title: {
+show: true, // 是否显示标题，默认为true
+text: newData.title, // 主标题文本
+x: 'center', // 标题水平位置，默认为'left'
+y: 'top', // 标题垂直位置，默认为'top'
+textStyle: {
+color: '#fff', // 主标题文字颜色
+fontStyle: 'normal', // 主标题文字风格
+fontWeight: 'bold', // 主标题文字粗细
+fontFamily: 'Arial, Verdana, sans-serif', // 主标题文字字体
+fontSize: 18 // 主标题文字大小
+},
+
+},
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
@@ -43,23 +57,31 @@ export default {
            }
          },
          legend: {
-            data: ["已贯通", "计划贯通", "贯通率"],
+            // data: ["已贯通", "计划贯通", "贯通率"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          grid: {
+            top:'24%',
            x: "8%",
            width: "88%",
+            bottom:'28%',
            y: "4%"
          },
          xAxis: {
-            data: newData.category,
+            data: newData.chart_x,
            axisLine: {
              lineStyle: {
-                color: "#B4B4B4"
+                color: "#0735a2"
              }
+            },
+            axisLabel: {  
+   interval:0,  
+   rotate:20,
+   fontSize:10,
+   fontFamily: 'Microsoft YaHei'
 },
            axisTick: {
              show: false
@@ -67,22 +89,16 @@ export default {
          },
          yAxis: [
            {
-              splitLine: { show: false },
+              name:'%',
              axisLine: {
-                lineStyle: {
-                  color: "#B4B4B4"
-                }
+show: false, // 是否显示坐标轴轴线
 },
-
-              axisLabel: {
-                formatter: "{value} "
-              }
-            },
-            {
-              splitLine: { show: false },
-              axisLine: {
+splitLine: {
+show: true, // 是否显示网格线
 lineStyle: {
-                  color: "#B4B4B4"
+color: '#0735a2', // 网格线颜色
+width: 1, // 网格线的宽度
+type: 'dashed' // 网格线类型
 }
 },
              axisLabel: {
@@ -90,24 +106,22 @@ export default {
              }
            }
          ],
+          dataZoom: [{
+show: false,
+type: 'slider',
+realtime: true,
+startValue: newData.start,
+endValue: newData.end,
+xAxisIndex: [0],
+bottom: '10',
+left: '30',
+height: 10,
+borderColor: 'rgba(0,0,0,0)',
+textStyle: { color: '#05D5FF' }
+}],
          series: [
            {
-              name: "贯通率",
-              type: "line",
-              smooth: true,
-              showAllSymbol: true,
-              symbol: "emptyCircle",
-              symbolSize: 8,
-              yAxisIndex: 1,
-              itemStyle: {
-                normal: {
-                  color: "#F02FC2"
-                }
-              },
-              data: newData.rateData
-            },
-            {
-              name: "已贯通",
+              name: "",
              type: "bar",
              barWidth: 10,
              itemStyle: {
@@ -119,26 +133,17 @@ export default {
                  ])
                }
              },
-              data: newData.barData
-            },
-            {
-              name: "计划贯通",
-              type: "bar",
-              barGap: "-100%",
-              barWidth: 10,
-              itemStyle: {
-                normal: {
-                  barBorderRadius: 5,
-                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: "rgba(156,107,211,0.8)" },
-                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
-                    { offset: 1, color: "rgba(156,107,211,0.2)" }
-                  ])
+              label: {
+                    show: true, //开启显示
+                    position: 'top', //在上方显示
+                    textStyle: { //数值样式
+                        color: 'pink',//字体颜色
+                        fontSize: 10//字体大小
            }
          },
-              z: -12,
-              data: newData.lineData
-            }
+              data: newData.chart_y
+            },
+
          ]
        }
      },
@@ -7,116 +7,12 @@
 <script>
 import Chart from './chart.vue'
 export default {
+  props:[
+    'cdata'
+],
  data () {
    return {
-      cdata: {
-        category: [
-          "市区",
-          "万州",
-          "江北",
-          "南岸",
-          "北碚",
-          "綦南",
-          "长寿",
-          "永川",
-          "璧山",
-          "江津",
-          "城口",
-          "大足",
-          "垫江",
-          "丰都",
-          "奉节",
-          "合川",
-          "江津区",
-          "开州",
-          "南川",
-          "彭水",
-          "黔江",
-          "石柱",
-          "铜梁",
-          "潼南",
-          "巫山",
-          "巫溪",
-          "武隆",
-          "秀山",
-          "酉阳",
-          "云阳",
-          "忠县",
-          "川东",
-          "检修"
-        ],
-        lineData: [
-          18092,
-          20728,
-          24045,
-          28348,
-          32808,
-          36097,
-          39867,
-          44715,
-          48444,
-          50415,
-          56061,
-          62677,
-          59521,
-          67560,
-          18092,
-          20728,
-          24045,
-          28348,
-          32808,
-          36097,
-          39867,
-          44715,
-          48444,
-          50415,
-          36097,
-          39867,
-          44715,
-          48444,
-          50415,
-          50061,
-          32677,
-          49521,
-          32808
-        ],
-        barData: [
-          4600,
-          5000,
-          5500,
-          6500,
-          7500,
-          8500,
-          9900,
-          12500,
-          14000,
-          21500,
-          23200,
-          24450,
-          25250,
-          33300,
-          4600,
-          5000,
-          5500,
-          6500,
-          7500,
-          8500,
-          9900,
-          22500,
-          14000,
-          21500,
-          8500,
-          9900,
-          12500,
-          14000,
-          21500,
-          23200,
-          24450,
-          25250,
-          7500
-        ],
-        rateData: []
-      }
+    
    };
  },
  components: {
@@ -128,10 +24,10 @@ export default {
  methods: {
    // 根据自己的业务情况修改
    setData () {
-      for (let i = 0; i < this.cdata.barData.length -1; i++) {
-        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
-        this.cdata.rateData.push(rate.toFixed(2));
-      }
+      // for (let i = 0; i < this.cdata.barData.length -1; i++) {
+      //   let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+      //   this.cdata.rateData.push(rate.toFixed(2));
+      // }
    },
  }
 };
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+      :options="options"
+      id="bottomLeftChart"
+      height="160px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          title: {
+show: true, // 是否显示标题，默认为true
+text: newData.title, // 主标题文本
+x: 'center', // 标题水平位置，默认为'left'
+y: 'top', // 标题垂直位置，默认为'top'
+textStyle: {
+color: '#fff', // 主标题文字颜色
+fontStyle: 'normal', // 主标题文字风格
+fontWeight: 'bold', // 主标题文字粗细
+fontFamily: 'Arial, Verdana, sans-serif', // 主标题文字字体
+fontSize: 18 // 主标题文字大小
+},
+
+},
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(255,255,255,0.1)",
+            axisPointer: {
+              type: "shadow",
+              label: {
+                show: true,
+                backgroundColor: "#7B7DDC"
+              }
+            }
+          },
+          legend: {
+            // data: ["已贯通", "计划贯通", "贯通率"],
+            textStyle: {
+              color: "#B4B4B4"
+            },
+            top: "0%"
+          },
+          grid: {
+            top:'24%',
+            x: "8%",
+            width: "88%",
+            y: "4%"
+          },
+          xAxis: {
+            data: newData.chart_x,
+            axisLine: {
+              lineStyle: {
+                color: "#0735a2"
+              }
+            },
+            axisLabel: {  
+   interval:0,  
+   rotate:20  
+},
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              name:'%',
+              axisLine: {
+show: false, // 是否显示坐标轴轴线
+},
+splitLine: {
+show: true, // 是否显示网格线
+lineStyle: {
+color: '#0735a2', // 网格线颜色
+width: 1, // 网格线的宽度
+type: 'dashed' // 网格线类型
+}
+},
+              axisLabel: {
+                formatter: "{value}"
+              }
+            }
+          ],
+          dataZoom: [{
+show: false,
+type: 'slider',
+realtime: true,
+startValue: newData.start,
+endValue: newData.end,
+xAxisIndex: [0],
+bottom: '10',
+left: '30',
+height: 10,
+borderColor: 'rgba(0,0,0,0)',
+textStyle: { color: '#05D5FF' }
+}],
+          series: [
+            {
+              name: "",
+              type: "bar",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#956FD4" },
+                    { offset: 1, color: "#3EACE5" }
+                  ])
+                }
+              },
+              label: {
+                    show: true, //开启显示
+                    position: 'top', //在上方显示
+                    textStyle: { //数值样式
+                        color: 'pink',//字体颜色
+                        fontSize: 10//字体大小
+            }
+          },
+              data: newData.chart_y
+            },
+
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+  },
+}
+</script>
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  props:[
+    'cdata'
+],
+  data () {
+    return {
+    
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.setData();
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      // for (let i = 0; i < this.cdata.barData.length -1; i++) {
+      //   let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+      //   this.cdata.rateData.push(rate.toFixed(2));
+      // }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+      :options="options"
+      id="bottomLeftChart"
+      height="200px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          title: {
+show: true, // 是否显示标题，默认为true
+text: newData.title, // 主标题文本
+x: 'center', // 标题水平位置，默认为'left'
+y: 'top', // 标题垂直位置，默认为'top'
+textStyle: {
+color: '#fff', // 主标题文字颜色
+fontStyle: 'normal', // 主标题文字风格
+fontWeight: 'bold', // 主标题文字粗细
+fontFamily: 'Arial, Verdana, sans-serif', // 主标题文字字体
+fontSize: 18 // 主标题文字大小
+},
+
+},
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(255,255,255,0.1)",
+            axisPointer: {
+              type: "shadow",
+              label: {
+                show: true,
+                backgroundColor: "#7B7DDC"
+              }
+            }
+          },
+          legend: {
+            // data: ["已贯通", "计划贯通", "贯通率"],
+            textStyle: {
+              color: "#B4B4B4"
+            },
+            top: "0%"
+          },
+          grid: {
+            top:'24%',
+            x: "12%",
+            width: "88%",
+            y: "4%"
+          },
+          xAxis: {
+            data: newData.chart_x,
+            axisLine: {
+              lineStyle: {
+                color: "#0735a2"
+              }
+            },
+            axisLabel: {  
+   interval:0,  
+   rotate:20,
+   fontSize:5
+},
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              name:'套',
+              axisLine: {
+show: false, // 是否显示坐标轴轴线
+},
+splitLine: {
+show: true, // 是否显示网格线
+lineStyle: {
+color: '#0735a2', // 网格线颜色
+width: 1, // 网格线的宽度
+type: 'dashed' // 网格线类型
+}
+},
+              axisLabel: {
+                formatter: "{value}"
+              }
+            }
+          ],
+          dataZoom: [{
+show: false,
+type: 'slider',
+realtime: true,
+startValue: newData.start,
+endValue: newData.end,
+xAxisIndex: [0],
+bottom: '10',
+left: '30',
+height: 10,
+borderColor: 'rgba(0,0,0,0)',
+textStyle: { color: '#05D5FF' }
+}],
+          series: [
+            {
+              name: "",
+              type: "bar",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#956FD4" },
+                    { offset: 1, color: "#3EACE5" }
+                  ])
+                }
+              },
+              label: {
+                    show: true, //开启显示
+                    position: 'top', //在上方显示
+                    textStyle: { //数值样式
+                        color: 'pink',//字体颜色
+                        fontSize: 10//字体大小
+            }
+          },
+              data: newData.chart_y
+            },
+
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+  },
+}
+</script>
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  props:[
+    'cdata'
+],
+  data () {
+    return {
+    
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.setData();
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      // for (let i = 0; i < this.cdata.barData.length -1; i++) {
+      //   let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+      //   this.cdata.rateData.push(rate.toFixed(2));
+      // }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+      :options="options"
+      id="bottomLeftChart"
+      height="240px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  
+  watch: {
+    cdata: {
+      handler (newData) {
+        let showlegend=false
+       if(newData.chart_y2){
+        showlegend=true
+       }
+        this.options = {
+          title: {
+show: true, // 是否显示标题，默认为true
+text: newData.title, // 主标题文本
+x: 'center', // 标题水平位置，默认为'left'
+y: 'top', // 标题垂直位置，默认为'top'
+textStyle: {
+color: '#fff', // 主标题文字颜色
+fontStyle: 'normal', // 主标题文字风格
+fontWeight: 'bold', // 主标题文字粗细
+fontFamily: 'Arial, Verdana, sans-serif', // 主标题文字字体
+fontSize: 18 // 主标题文字大小
+},
+
+},
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(255,255,255,0.1)",
+            axisPointer: {
+              type: "shadow",
+              label: {
+                show: true,
+                backgroundColor: "#7B7DDC"
+              }
+            }
+          },
+          legend: {
+show: showlegend, // 启用图例
+left: 'right', // 设置图例位置为居中
+top: '8%', // 设置图例顶部对齐
+textStyle: { // 设置图例文字样式
+color: '#fff',
+fontSize: 14,
+fontFamily: 'sans-serif'
+}
+},
+          grid: {
+            top:'24%',
+            x: "8%",
+            width: "88%",
+            y: "4%"
+          },
+          xAxis: {
+            data: newData.chart_x,
+            axisLine: {
+              lineStyle: {
+                color: "#0735a2"
+              }
+            },
+            axisLabel: {  
+   interval:0,  
+   rotate:20  
+},
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              name:'',
+              // splitLine: { show: false },
+              axisLine: {
+show: false, // 是否显示坐标轴轴线
+},
+splitLine: {
+show: true, // 是否显示网格线
+lineStyle: {
+color: '#0735a2', // 网格线颜色
+width: 1, // 网格线的宽度
+type: 'dashed' // 网格线类型
+}
+},
+              axisLabel: {
+                formatter: "{value}"
+              }
+            }
+          ],
+          dataZoom: [{
+show: false,
+type: 'slider',
+realtime: true,
+startValue: newData.start,
+endValue: newData.end,
+xAxisIndex: [0],
+bottom: '10',
+left: '30',
+height: 10,
+borderColor: 'rgba(0,0,0,0)',
+textStyle: { color: '#05D5FF' }
+}],
+          series: [
+            {
+              name: "工时",
+              type: "bar",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#956FD4" },
+                    { offset: 1, color: "#3EACE5" }
+                  ])
+                }
+              },
+              label: {
+                    show: true, //开启显示
+                    position: 'top', //在上方显示
+                    textStyle: { //数值样式
+                        color: 'pink',//字体颜色
+                        fontSize: 10//字体大小
+            }
+          },
+              data: newData.chart_y
+            },
+            {
+      name:'次数',
+      data: newData.chart_y2,
+      type: 'line',
+      label: {
+                    show: true, //开启显示
+                    position: 'left', //在上方显示
+                    textStyle: { //数值样式
+                        color: '#fff',//字体颜色
+                        fontSize: 10//字体大小
+            }
+          },
+    }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+  },
+}
+</script>
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  props:[
+    'cdata'
+],
+  data () {
+    return {
+    
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.setData();
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      // for (let i = 0; i < this.cdata.barData.length -1; i++) {
+      //   let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+      //   this.cdata.rateData.push(rate.toFixed(2));
+      // }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -4,8 +4,8 @@
    <Echart
      :options="options"
      :id="id"
-      height="100px"
-      width="100px"
+      height="150px"
+      width="100%"
    ></Echart>
  </div>
 </template>
@@ -59,7 +59,7 @@ export default {
            y: "center",
            textStyle: {
              color: this.colorObj.textStyle,
-              fontSize: 16
+              fontSize: 25
            }
          },
          series: [
@@ -71,7 +71,8 @@ export default {
              color: this.colorObj.series.color,
              label: {
                normal: {
-                  show: false
+                  show: false,
+                 
                }
              },
              data: [
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart
+      :options="options"
+      :id="id"
+      height="150px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  watch: {
+    // tips 是会变更的数据，所以进行监听
+    tips: {
+      handler (newData) {
+        this.options = {
+          title:{
+            text: newData * 1 ,
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 25
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: this.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: newData,
+                  itemStyle: {
+                    normal: {
+                      color: this.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: this.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - newData
+                }
+              ]
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -3,8 +3,8 @@
    <Echart
      :options="options"
      id="centreLeft1Chart"
-      height="220px"
-      width="260px"
+      height="350px"
+      width="300px"
    ></Echart>
  </div>
 </template>
@@ -30,45 +30,46 @@ export default {
    cdata: {
      handler (newData) {
        this.options ={
-          color: [
-            "#37a2da",
-            "#32c5e9",
-            "#9fe6b8",
-            "#ffdb5c",
-            "#ff9f7f",
-            "#fb7293",
-            "#e7bcf3",
-            "#8378ea"
-          ],
+  title: {
+    left: 'center'
+  },
  tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)"
+    trigger: 'item'
  },
-          toolbox: {
-            show: true
-          },
-          calculable: true,
  legend: {
-            orient: "horizontal",
-            icon: "circle",
-            bottom: 0,
-            x: "center",
-            data: newData.xData,
-            textStyle: {
-              color: "#fff"
-            }
+    orient: 'vertical',
+    right: 0,
+    top: 0,
  },
  series: [
    {
-              name: "通过率统计",
-              type: "pie",
-              radius: [10, 50],
-              roseType: "area",
-              center: ["50%", "40%"],
-              data: newData.seriesData
+      name: '',
+      type: 'pie',
+      radius: '50%',
+      center: ['50%', '50%'],
+      data: newData.data,
+      itemStyle: {
+normal: {
+label: {
+show: true,
+formatter: '{b} : ({c})'
+},
+labelLine: {
+show: true
+}
+}
+},
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
    }
  ]
 }
+        
      },
      immediate: true,
      deep: true
@@ -1,25 +1,18 @@
 <template>
  <div>
-    <Chart :cdata="cdata" />
+    <Chart :cdata="piedata" />
  </div>
 </template>

 <script>
 import Chart from './chart.vue';
 export default {
+  props:[
+    'piedata'
+],
  data () {
    return {
-      cdata: {
-        xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
-        seriesData: [
-          { value: 10, name: "data1" },
-          { value: 5, name: "data2" },
-          { value: 15, name: "data3" },
-          { value: 25, name: "data4" },
-          { value: 20, name: "data5" },
-          { value: 35, name: "data6" }
-        ]
-      }
+
    }
  },
  components: {
@@ -3,8 +3,8 @@
    <Echart
      :options="options"
      id="centreRight2Chart1"
-      height="200px"
-      width="260px"
+      height="230px"
+      :width="cdata.width"
    ></Echart>
  </div>
 </template>
@@ -36,91 +36,112 @@ export default {
            opacity: 0.5
          }
        };
-
-        this.options = {
-          radar: {
-            indicator: newData.indicatorData,
-            shape: "circle",
-            splitNumber: 5,
-            radius: ["0%", "65%"],
-            name: {
-              textStyle: {
-                color: "rgb(238, 197, 102)"
+        let showlegend=false
+       if(newData.chart_y2){
+        showlegend=true
       }
+        this.options = {
+          title: {
+show: true, // 是否显示标题，默认为true
+text: newData.title, // 主标题文本
+x: 'center', // 标题水平位置，默认为'left'
+y: 'top', // 标题垂直位置，默认为'top'
+textStyle: {
+color: '#fff', // 主标题文字颜色
+fontStyle: 'normal', // 主标题文字风格
+fontWeight: 'bold', // 主标题文字粗细
+fontFamily: 'Arial, Verdana, sans-serif', // 主标题文字字体
+fontSize: 18 // 主标题文字大小
+},
+
+},
+grid: {
+            top:'24%',
+            x: "8%",
+            width: "88%",
+            y: "4%"
+          },
+legend: {
+show: showlegend, // 启用图例
+left: 'right', // 设置图例位置为居中
+top: 'top', // 设置图例顶部对齐
+textStyle: { // 设置图例文字样式
+color: '#fff',
+fontSize: 14,
+fontFamily: 'sans-serif'
+}
+},
+
+  xAxis: {
+    type: 'category',
+    data: newData.chart_x,
+    axisLine: {
+show: true, // 是否显示坐标轴轴线
+lineStyle: {
+color: '#0735a2', // 线的颜色
+width: 2, // 线的宽度
+type: 'solid' // 线的类型
+}
+},
+    
+  },
+  yAxis: {
+    type: 'value',
+    // name: '单位：元',
+    axisLine: {
+show: false, // 是否显示坐标轴轴线
 },
 splitLine: {
+show: true, // 是否显示网格线
 lineStyle: {
-                color: [
-                  "rgba(238, 197, 102, 0.1)",
-                  "rgba(238, 197, 102, 0.2)",
-                  "rgba(238, 197, 102, 0.4)",
-                  "rgba(238, 197, 102, 0.6)",
-                  "rgba(238, 197, 102, 0.8)",
-                  "rgba(238, 197, 102, 1)"
-                ].reverse()
-              }
-            },
-            splitArea: {
-              show: false
-            },
-            axisLine: {
-              lineStyle: {
-                color: "rgba(238, 197, 102, 0.5)"
+color: '#0735a2', // 网格线颜色
+width: 1, // 网格线的宽度
+type: 'dashed' // 网格线类型
 }
 }
  },
  series: [
    {
-              name: "北京",
-              type: "radar",
-              lineStyle: lineStyle,
-              data: newData.dataBJ,
-              symbol: "none",
-              itemStyle: {
-                normal: {
-                  color: "#F9713C"
+      name:'工时',
+      data: newData.chart_y,
+      type: 'bar',
+      barWidth: '30%',
+      label: {
+                    show: true, //开启显示
+                    position: 'top', //在上方显示
+                    textStyle: { //数值样式
+                        color: 'pink',//字体颜色
+                        fontSize: 10//字体大小
            }
          },
-              areaStyle: {
-                normal: {
-                  opacity: 0.1
+      itemStyle: {
+color: {
+type: 'linear',
+x: 0, // 右
+y: 0, // 下
+x2: 0, // 左
+y2: 1, // 上
+colorStops: [
+{ offset: 0, color: 'pink' }, // 0% 处的颜色
+{ offset: 0.7, color: '#2378f7' }, // 70% 处的颜色
+{ offset: 1, color: '#83bff6' } // 100% 处的颜色
+]
 }
 }
    },
    {
-              name: "上海",
-              type: "radar",
-              lineStyle: lineStyle,
-              data: newData.dataSH,
-              symbol: "none",
-              itemStyle: {
-                normal: {
-                  color: "#B3E4A1"
+      name:'次数',
+      data: newData.chart_y2,
+      type: 'line',
+      label: {
+                    show: true, //开启显示
+                    position: 'left', //在上方显示
+                    textStyle: { //数值样式
+                        color: '#fff',//字体颜色
+                        fontSize: 10//字体大小
            }
          },
-              areaStyle: {
-                normal: {
-                  opacity: 0.05
    }
-              }
-            },
-            {
-              name: "广州",
-              type: "radar",
-              lineStyle: lineStyle,
-              data: newData.dataGZ,
-              symbol: "none",
-              itemStyle: {
-                normal: {
-                  color: "rgb(238, 197, 102)"
-                }
-              },
-              areaStyle: {
-                normal: {
-                  opacity: 0.05
-                }
-              }
-            } //end
  ]
 }
      },
@@ -7,45 +7,12 @@
 <script>
 import Chart from './chart.vue';
 export default {
+  props:[
+    'cdata'
+],
  data () {
    return {
-      cdata: {
-        indicatorData: [
-          { name: "data1", max: 300 },
-          { name: "data2", max: 250 },
-          { name: "data3", max: 300 },
-          { name: "data4", max: 5},
-          { name: "data5", max: 200 },
-          { name: "data6", max: 100 }
-        ],
-        dataBJ: [
-          [94, 69, 114, 2.08, 73, 39, 22],
-          [99, 73, 110, 2.43, 76, 48, 23],
-          [31, 12, 30, 0.5, 32, 16, 24],
-          [42, 27, 43, 1, 53, 22, 25],
-          [154, 117, 157, 3.05, 92, 58, 26],
-          [234, 185, 230, 4.09, 123, 69, 27],
-          [160, 120, 186, 2.77, 91, 50, 28]
-        ],
-        dataGZ: [
-          [84, 94, 140, 2.238, 68, 18, 22],
-          [93, 77, 104, 1.165, 53, 7, 23],
-          [99, 130, 227, 3.97, 55, 15, 24],
-          [146, 84, 139, 1.094, 40, 17, 25],
-          [113, 108, 137, 1.481, 48, 15, 26],
-          [81, 48, 62, 1.619, 26, 3, 27],
-          [56, 48, 68, 1.336, 37, 9, 28]
-        ],
-        dataSH: [
-          [91, 45, 125, 0.82, 34, 23, 1],
-          [65, 27, 78, 0.86, 45, 29, 2],
-          [83, 60, 84, 1.09, 73, 27, 3],
-          [109, 81, 121, 1.28, 68, 51, 4],
-          [106, 77, 114, 1.07, 55, 51, 5],
-          [109, 81, 121, 1.28, 68, 51, 6],
-          [106, 77, 114, 1.07, 55, 51, 7]
-        ]
-      }
+      
    }
  },
  components: {
@@ -7,7 +7,33 @@ const routes = [{
  path: '/',
  name: 'index',
  component: () => import('../views/index.vue')
-}]
+},
+{
+  path: '/jc',
+  name: 'index',
+  component: () => import('../views/jcindex.vue')
+},
+{
+  path: '/mj',
+  name: 'index',
+  component: () => import('../views/mjindex.vue')
+},
+{
+  path: '/zl',
+  name: 'index',
+  component: () => import('../views/zlindex.vue')
+},
+{
+  path: '/zz',
+  name: 'index',
+  component: () => import('../views/zzindex.vue')
+},
+{
+  path: '/sb',
+  name: 'index',
+  component: () => import('../views/shebei.vue')
+}
+]
 const router = new VueRouter({
  routes
 })
@@ -0,0 +1,5 @@
+// 注册自定义图形
+import { registerShape as registerShapeSolidBar } from "./solidBar";
+export const registerCustomShape = (echarts) => {
+  registerShapeSolidBar(echarts);
+};
@@ -0,0 +1,306 @@
+// 立体柱状图 自定义图形
+import echarts from "@/echarts/index";
+
+// 注册图形元素
+export const registerShape = (echarts) => {
+  // 定义柱状图左侧图形元素
+  const leftRect = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+      width: 10, //柱状图宽
+      zWidth: 8, //阴影折角宽
+      zHeight: 4, //阴影折角高
+    },
+    buildPath: function (ctx, shape) {
+      const api = shape.api;
+      const xAxisPoint = api.coord([shape.xValue, 0]);
+      const p0 = [
+        shape.x - shape.width / 2 + shape.groupBasisX,
+        shape.y - shape.zHeight,
+      ];
+      const p1 = [
+        shape.x - shape.width / 2 + shape.groupBasisX,
+        shape.y - shape.zHeight,
+      ];
+      const p2 = [
+        xAxisPoint[0] - shape.width / 2 + shape.groupBasisX,
+        xAxisPoint[1],
+      ];
+      const p3 = [
+        xAxisPoint[0] + shape.width / 2 + shape.groupBasisX,
+        xAxisPoint[1],
+      ];
+      const p4 = [shape.x + shape.width / 2 + shape.groupBasisX, shape.y];
+
+      ctx.moveTo(p0[0], p0[1]);
+      ctx.lineTo(p1[0], p1[1]);
+      ctx.lineTo(p2[0], p2[1]);
+      ctx.lineTo(p3[0], p3[1]);
+      ctx.lineTo(p4[0], p4[1]);
+      ctx.lineTo(p0[0], p0[1]);
+      ctx.closePath();
+    },
+  });
+  // 定义柱状图右侧图形元素
+  const rightRect = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+      width: 9,
+      zWidth: 15,
+      zHeight: 8,
+    },
+    buildPath: function (ctx, shape) {
+      const api = shape.api;
+      const xAxisPoint = api.coord([shape.xValue, 0]);
+      const p1 = [
+        shape.x - shape.width / 2 + shape.groupBasisX,
+        shape.y - shape.zHeight / 2,
+      ];
+      const p3 = [
+        xAxisPoint[0] + shape.width / 2 + shape.groupBasisX,
+        xAxisPoint[1],
+      ];
+      const p4 = [shape.x + shape.width / 2 + shape.groupBasisX, shape.y];
+      const p5 = [
+        xAxisPoint[0] + shape.width / 2 + shape.zWidth + shape.groupBasisX,
+        xAxisPoint[1],
+      ];
+      const p6 = [
+        shape.x + shape.width / 2 + shape.zWidth + shape.groupBasisX,
+        shape.y - shape.zHeight / 2,
+      ];
+      const p7 = [
+        shape.x - shape.width / 2 + shape.zWidth + shape.groupBasisX,
+        shape.y - shape.zHeight,
+      ];
+      ctx.moveTo(p4[0], p4[1]);
+      ctx.lineTo(p3[0], p3[1]);
+      ctx.lineTo(p5[0], p5[1]);
+      ctx.lineTo(p6[0], p6[1]);
+      ctx.lineTo(p4[0], p4[1]);
+
+      // ctx.moveTo(p4[0], p4[1]);
+      // ctx.lineTo(p6[0], p6[1]);
+      // ctx.lineTo(p7[0], p7[1]);
+      // ctx.lineTo(p1[0], p1[1]);
+      // ctx.lineTo(p4[0], p4[1]);
+      ctx.closePath();
+    },
+  });
+  //定义柱状图顶部图形元素
+  const topRect = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+      width: 9,
+      zWidth: 15,
+      zHeight: 8,
+    },
+    buildPath: function (ctx, shape) {
+      const api = shape.api;
+      const xAxisPoint = api.coord([shape.xValue, 0]);
+      const p1 = [
+        shape.x - shape.width / 2 + shape.groupBasisX,
+        shape.y - shape.zHeight / 2,
+      ];
+      const p3 = [
+        xAxisPoint[0] + shape.width / 2 + shape.groupBasisX,
+        xAxisPoint[1],
+      ];
+      const p4 = [shape.x + shape.width / 2 + shape.groupBasisX, shape.y];
+      const p5 = [
+        xAxisPoint[0] + shape.width / 2 + shape.zWidth + shape.groupBasisX,
+        xAxisPoint[1],
+      ];
+      const p6 = [
+        shape.x + shape.width / 2 + shape.zWidth + shape.groupBasisX,
+        shape.y - shape.zHeight / 2,
+      ];
+      const p7 = [
+        shape.x - shape.width / 2 + shape.zWidth + shape.groupBasisX,
+        shape.y - shape.zHeight,
+      ];
+      // ctx.moveTo(p4[0], p4[1]);
+      // ctx.lineTo(p3[0], p3[1]);
+      // ctx.lineTo(p5[0], p5[1]);
+      // ctx.lineTo(p6[0], p6[1]);
+      // ctx.lineTo(p4[0], p4[1]);
+
+      ctx.moveTo(p4[0], p4[1]);
+      ctx.lineTo(p6[0], p6[1]);
+      ctx.lineTo(p7[0], p7[1]);
+      ctx.lineTo(p1[0], p1[1]);
+      ctx.lineTo(p4[0], p4[1]);
+      ctx.closePath();
+    },
+  });
+  echarts.graphic.registerShape("leftRect", leftRect);
+  echarts.graphic.registerShape("rightRect", rightRect);
+  echarts.graphic.registerShape("topRect", topRect);
+};
+const _getCustomBarStyleGroupList = (echarts) => [
+  {
+    leftRect: {
+      fill: "#C69321",
+    },
+    rightRect: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // 这里 offset: 0 1 ,表示从下往上的渐变色
+        {
+          offset: 0, // 100%处的颜色
+          color: "#FABF3D",
+        },
+        {
+          offset: 1, // 0%处的颜色
+          color: "#FFD376",
+        },
+      ]),
+    },
+    topRect: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // 这里 offset: 0 1 ,表示从下往上的渐变色
+        {
+          offset: 0, // 100%处的颜色
+          color: "#FAC244",
+        },
+        {
+          offset: 1, // 0%处的颜色
+          color: "#FED26F",
+        },
+      ]),
+    },
+  },
+  {
+    leftRect: {
+      fill: "#0EAEDC",
+    },
+    rightRect: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // 这里 offset: 0 1 ,表示从下往上的渐变色
+        {
+          offset: 0, // 100%处的颜色
+          color: "#4BDBFF",
+        },
+        {
+          offset: 1, // 0%处的颜色
+          color: "#09C8FF",
+        },
+      ]),
+    },
+    topRect: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // 这里 offset: 0 1 ,表示从下往上的渐变色
+        {
+          offset: 0, // 100%处的颜色
+          color: "#4ADAFF",
+        },
+        {
+          offset: 1, // 0%处的颜色
+          color: "#0BC8FF",
+        },
+      ]),
+    },
+  },
+];
+function getRenderItem(params, api, groupIdx, customBarStyleGroupList,groupBasisXVal=-30) {
+  const seriesIndex = params.seriesIndex;
+  const apiVals = [api.value(0), api.value(1)]; //
+  let location = api.coord([apiVals[0], apiVals[1]]);
+  var extent = api.size([0, api.value(1)]);
+  const customBarStyleGroupListLen = customBarStyleGroupList.length;
+  const _customBarStyle =
+    customBarStyleGroupListLen - 1 >= groupIdx
+      ? customBarStyleGroupList[groupIdx]
+      : customBarStyleGroupList[0];
+  return {
+    type: "group",
+    children: [
+      {
+        type: "leftRect",
+        shape: {
+          api,
+          groupBasisX: (groupIdx - 2) * groupBasisXVal * -1,
+          xValue: apiVals[0],
+          yValue: apiVals[1],
+          x: location[0],
+          y: location[1],
+        },
+        style: _customBarStyle.leftRect,
+        //style: api.style()
+      },
+      {
+        type: "rightRect",
+        shape: {
+          api,
+          groupBasisX: (groupIdx - 2) * groupBasisXVal * -1,
+          xValue: apiVals[0],
+          yValue: apiVals[1],
+          x: location[0],
+          y: location[1],
+        },
+        style: _customBarStyle.rightRect,
+        //style: api.style(),
+      },
+      {
+        type: "topRect",
+        shape: {
+          api,
+          groupBasisX: (groupIdx - 2) * groupBasisXVal * -1,
+          xValue: apiVals[0],
+          yValue: apiVals[1],
+          x: location[0],
+          y: location[1],
+        },
+        style: _customBarStyle.topRect,
+        //style: api.style(),
+      },
+    ],
+  };
+}
+
+export const getSeriesData = (
+  echarts,
+  groups,
+  xDataList,
+  customBarStyleGroupList,
+  groupBasisXVal = -30
+) => {
+  if (!Array.isArray(customBarStyleGroupList)) {
+    customBarStyleGroupList = _getCustomBarStyleGroupList(echarts);
+  }
+  const d = [];
+  const len = xDataList.length;
+  const len2 = xDataList[0].length;
+  xDataList[0].forEach((el, idx) => {
+    d.push(el);
+    for (let index = 1; index < len; index++) {
+      const el2 = xDataList[index];
+      d.push(el2[idx]);
+    }
+  });
+  return groups.map((label, idx) => {
+    const temp = [];
+    for (let index = 0; index < len2; index++) {
+      const el = d[idx + index * groups.length];
+      const _rest = []; //new Array(groups.length - 1).fill("");
+      temp.push(el, ..._rest);
+    }
+    return {
+      type: "custom",
+      name: label,
+      renderItem: function (params, api) {
+        return getRenderItem(params, api, idx, customBarStyleGroupList,groupBasisXVal);
+      },
+      //barWidth: '20',
+
+      data: temp,
+      itemStyle: {
+        // color: () => {
+        //   return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
+        // },
+      },
+    };
+  });
+};
@@ -0,0 +1,42 @@
+## 颜色渐进
+```json
+# 方法1
+color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          // 这里 offset: 0 1 ,表示从下往上的渐变色
+          {
+            offset: 0, // 0%处的颜色
+            color: "rgba(0, 216, 255,1)",
+          },
+          {
+            offset: 0.8, // 100%处的颜色
+            color: "rgba(0, 167, 254,1)",
+          },
+          {
+            offset: 1, // 100%处的颜色
+            color: "rgba(42, 118, 254,1)",//
+          },
+        ]),
+# 方法2
+color: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          type: "linear",
+          global: false,
+          colorStops: [
+            {
+              offset: 0, // 0%处的颜色
+              color: "rgba(0, 216, 255,1)",
+            },
+            {
+              offset: 0.8, // 100%处的颜色
+              color: "rgba(0, 167, 254,1)",
+            },
+            {
+              offset: 1, // 100%处的颜色
+              color: "rgba(42, 118, 254,1)", //
+            },
+          ],
+        },
+```
@@ -0,0 +1,66 @@
+/*
+ * @Author: mjh
+ * @Date: 2023-08-11 12:16:33
+ * @LastEditors: mjh
+ * @LastEditTime: 2023-08-15 10:20:14
+ * @Description:
+ */
+import * as echarts from "echarts/core";
+import {
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  PolarComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+} from "echarts/components";
+import {
+  BarChart,
+  BoxplotChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  PictorialBarChart,
+  GaugeChart,
+  CustomChart,
+} from "echarts/charts";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  GraphicComponent,
+  GridComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent,
+  TitleComponent,
+  LineChart,
+  BarChart,
+  PieChart,
+  BoxplotChart,
+  CanvasRenderer,
+  UniversalTransition,
+  RadarChart,
+  PictorialBarChart,
+  PolarComponent,
+  GaugeChart,
+  CustomChart,
+]);
+// import * as echarts from 'echarts'
+// 初始化语法糖
+const draw = (dom, option) => {
+  const chart = echarts.init(dom);
+  chart.clear();
+  chart.setOption(option);
+  return chart;
+};
+// 注册自定义图形
+import { registerCustomShape } from "./customCharts/index";
+registerCustomShape(echarts);
+//
+
+export default {
+  ...echarts,
+  draw,
+};
@@ -1,6 +1,8 @@
 import axios from 'axios'
 const server = axios.create({
-  baseURL: "http://192.168.11.109", //配置请求的url
+  baseURL: "http://192.168.11.109:9231", //配置请求的url
+
+  // baseURL: "http://192.168.1.31:9231", 
  // baseURL: "http://tnb.tuotong-tech.com", //配置请求的url
  timeout: 30000, //配置超时时间
  headers:{}//配置请求头
@@ -0,0 +1,36 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+function getShowTime() {
+  var date = new Date();
+
+  // 年月日
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  month = month < 10 ? "0" + month : month;
+  var day = date.getDate();
+  day = day < 10 ? "0" + day : day;
+
+  // 时分秒
+  var hour = date.getHours();
+  hour = hour < 10 ? "0" + hour : hour;
+  var minute = date.getMinutes();
+  minute = minute < 10 ? "0" + minute : minute;
+  var second = date.getSeconds();
+  second = second < 10 ? "0" + second : second;
+
+  // 实时显示
+  return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
+}
+export default function useTimeCounter() {
+  const nowTimerVal = ref("");
+  let timer = null;
+  onMounted(() => {
+    timer = setInterval(() => {
+      nowTimerVal.value = getShowTime();
+    }, 1000);
+  });
+  onUnmounted(() => {
+    clearInterval(timer);
+    timer = null;
+  });
+  return { nowTimerVal };
+}
@@ -1,16 +1,16 @@
 <template>
  <div id="bottomLeft">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
+    <div >
+      <!-- <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">数据统计图</span>
        </div>
-      </div>
+      </div> -->
      <div>
-        <BottomLeftChart />
+        <BottomLeftChart :cdata="cdata" />
      </div>
    </div>
  </div>
@@ -19,6 +19,9 @@
 <script>
 import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
 export default {
+  props:[
+    'cdata'
+],
  components: {
    BottomLeftChart
  }
@@ -26,7 +29,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-$box-height: 520px;
+$box-height: 220px;
 $box-width: 100%;
 #bottomLeft {
  padding: 20px 16px;
@@ -0,0 +1,55 @@
+<template>
+  <div id="bottomLeft">
+    <div >
+      <!-- <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">数据统计图</span>
+        </div>
+      </div> -->
+      <div>
+        <BottomLeftChart :cdata="cdata" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart1'
+export default {
+  props:[
+    'cdata'
+],
+  components: {
+    BottomLeftChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 170px;
+$box-width: 100%;
+#bottomLeft {
+  padding: 20px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 35px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,55 @@
+<template>
+  <div id="bottomLeft">
+    <div >
+      <!-- <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">数据统计图</span>
+        </div>
+      </div> -->
+      <div>
+        <BottomLeftChart :cdata="cdata" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart2'
+export default {
+  props:[
+    'cdata'
+],
+  components: {
+    BottomLeftChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 220px;
+$box-width: 100%;
+#bottomLeft {
+  padding: 20px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 35px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,55 @@
+<template>
+  <div id="bottomLeft">
+    <div >
+      <!-- <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">数据统计图</span>
+        </div>
+      </div> -->
+      <div>
+        <BottomLeftChart :cdata="cdata" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomLeftChart from '@/components/echart/bottom/bottomLeftChartsb'
+export default {
+  props:[
+    'cdata'
+],
+  components: {
+    BottomLeftChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 170px;
+$box-width: 100%;
+#bottomLeft {
+  padding: 20px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 35px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>
@@ -1,22 +1,116 @@
 <template>
  <div id="bottomRight">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-area" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
+          <div class="decoration2">
+            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
+          </div>
+        </div>
+      </div> -->
+      <div style="padding-top: 7px;">
+        <div style="text-align: center;"><span style="position: absolute;left: 20px;top: 20px;font-size: 20px;font-weight: bold;">设备运行状态</span><span style="margin-right: 44px;position: relative;"><div class="badge success" style="left: -28px;top:1px"></div> 运行数：{{eqpinfo.work_count}}</span><span style="margin-right: 44px;position: relative;"><div class="badge red" style="left: -28px;top:1px"></div>报警数：{{ eqpinfo.alarm_count }}</span><span style="color:grey"></span><span style="margin-right: 20px;position: relative;"><div class="badge gray" style="left: -28px;top:1px"></div>停机数：{{ eqpinfo.shutdown_count }}</span></div>
+        <div style="margin-top: 7px;">
+        <!-- <BottomRightChart /> -->
+        <div class="eqpbox" v-for="item in eqpinfo.workStatusList" :key="item.id">
+          <div class="eqpstatus" :style={backgroundColor:item.status}>
+              {{ item.eqp_name }} <div class="badge img" :class="item.status == '1' ? 'success' :item.status == '2'?'red':'gray'"></div>
+            </div> 
+          <!-- <div class="eqpname" :class="item.status == '1' ? 'red' : item.status == '2' ? 'grey': item.status == '4' ? 'yellow':'white'"></div>   -->
          
-        <BottomRightChart />
-
+        </div>
+      </div>
+      </div> 
+    </div>
  </div>
 </template>

 <script>
-import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
+// import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
+import { gettaskList } from '../api/kanban.js'
 export default {
+  
+  props:[
+    'eqpinfo'
+],
  components: {
-    BottomRightChart
+    // BottomRightChart
+  },
+  
+  data() {
+    return {
+      
+      alldata:{
+    "day_month_yield": {
+      month_qty:0,
+      day_qty:0,
+      month_qualified_percent:0,
+      day_qualified_percent:0
+    },
+    "equip_pie_list": [
+    0
+    ],
+    "equip_info_list": [
+        
+    ],
+    "report_record_list": [
+        
+      ]
+  },
+  run:0,
+  down:0,
+  warn:0,
+  white:0,
+  grey:0,
+  red:0,
+  yellow:0
+    }},
+   
+    mounted() {
+      this.$nextTick(function() {
+        this.run=0
+    this.down=0
+    this.warn=0
+    this.alldata.equip_info_list=this.eqpinfo
+    // this.eqpinfo.forEach(item=>{
+    //      if(item.daq_status=='green'){
+    //       this.run=this.run+1
+    //      }else if(item.daq_status=='grey'){
+    //       this.down=this.down+1
+    //      }else if(item.daq_status=='red'){
+    //       this.warn=this.warn+1
+    //      }
+
+    //      if(item.sys_status=='1'){
+    //       this.red=this.red+1
+    //      }else if(item.sys_status=='2'){
+    //       this.grey=this.grey+1
+    //      }else if(item.sys_status=='3'){
+    //       this.white=this.white+1
+    //      }else if(item.sys_status=='4'){
+    //       this.yellow=this.yellow+1
+    //      }
+    // })
+})
+   
+        
+  },
+  watch: {
+    alldata(newCount, oldCount) {
+    debugger
+console.log(`count变成了${newCount}，之前是${oldCount}`);
     }
+   }
+
 };
 </script>

-<style lang="scss" class>
-$box-height: 920px;
+<style lang="scss" class scoped>
+$box-height: 190px;
 $box-width: 100%;
 #bottomRight {
  padding: 14px 16px;
@@ -44,4 +138,59 @@ $box-width: 100%;
    }
  }
 }
+.eqpbox{
+  width:7.125%;
+  padding: 5px;
+  height: 45px;
+  text-align: center;
+  float: left;
+  
+}
+.eqpstatus{ 
+   height: 35px;
+   line-height: 35px;
+   background-color: #034b7a;
+   position: relative;
+  //  background-image: url(../assets/jcj.png);
+   background-size: 100% 100%;
+   font-size: 0.25rem;
+}
+.eqpbox .eqpname{
+  line-height: 25px;
+  background-color: rgba(19, 25, 47, 0.6);
+  height: 25px;
+  
+}
+.eqpbox .eqpname.red{
+  color: red;
+}
+.eqpbox .eqpname.grey{
+  color: grey;
+}
+.eqpbox .eqpname.yellow{
+  color: yellow;
+}
+.eqpbox .eqpname.white{
+  color: #fff;
+}
+.badge{
+  width: 20px;
+  height: 20px;
+  background-color: #67C23A;
+  border-radius: 20px;
+  position: absolute;
+  top:0px;
+  left: 0;
+}
+.badge.red{
+  background-color: #F56C6C;
+}
+.badge.img{
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+}
+.badge.gray{
+  background-color: gray;
+}
 </style>
@@ -0,0 +1,195 @@
+<template>
+  <div id="bottomRight">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-area" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
+          <div class="decoration2">
+            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
+          </div>
+        </div>
+      </div> -->
+      <div style="padding-top: 7px;">
+        <div style="text-align: center;"><span style="position: absolute;left: 20px;top: 20px;font-size: 20px;font-weight: bold;">设备运行状态</span><span style="margin-right: 44px;position: relative;"><div class="badge success" style="left: -28px;top:1px"></div> 运行数：{{eqpinfo.work_count}}</span><span style="margin-right: 44px;position: relative;"><div class="badge red" style="left: -28px;top:1px"></div>报警数：{{ eqpinfo.alarm_count }}</span><span style="color:grey"></span><span style="margin-right: 20px;position: relative;"><div class="badge gray" style="left: -28px;top:1px"></div>停机数：{{ eqpinfo.shutdown_count }}</span></div>
+        <div style="margin-top: 7px;">
+        <!-- <BottomRightChart /> -->
+        <div class="eqpbox" v-for="item in eqpinfo.workStatusList" :key="item.id">
+          <div class="eqpstatus" :style={backgroundColor:item.status}>
+              {{ item.eqp_name }} <div class="badge img" :class="item.status == '1' ? 'success' :item.status == '2'?'red':'gray'"></div>
+            </div> 
+          <!-- <div class="eqpname" :class="item.status == '1' ? 'red' : item.status == '2' ? 'grey': item.status == '4' ? 'yellow':'white'"></div>   -->
+          
+        </div>
+      </div>
+      </div> 
+    </div>
+  </div>
+</template>
+
+<script>
+// import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
+import { gettaskList } from '../api/kanban.js'
+export default {
+  
+  props:[
+    'eqpinfo'
+],
+  components: {
+    // BottomRightChart
+  },
+  
+  data() {
+    return {
+      
+      alldata:{
+    "day_month_yield": {
+      month_qty:0,
+      day_qty:0,
+      month_qualified_percent:0,
+      day_qualified_percent:0
+    },
+    "equip_pie_list": [
+    0
+    ],
+    "equip_info_list": [
+        
+    ],
+    "report_record_list": [
+        
+      ]
+  },
+  run:0,
+  down:0,
+  warn:0,
+  white:0,
+  grey:0,
+  red:0,
+  yellow:0
+    }},
+   
+    mounted() {
+      this.$nextTick(function() {
+        this.run=0
+    this.down=0
+    this.warn=0
+    this.alldata.equip_info_list=this.eqpinfo
+    // this.eqpinfo.forEach(item=>{
+    //      if(item.daq_status=='green'){
+    //       this.run=this.run+1
+    //      }else if(item.daq_status=='grey'){
+    //       this.down=this.down+1
+    //      }else if(item.daq_status=='red'){
+    //       this.warn=this.warn+1
+    //      }
+
+    //      if(item.sys_status=='1'){
+    //       this.red=this.red+1
+    //      }else if(item.sys_status=='2'){
+    //       this.grey=this.grey+1
+    //      }else if(item.sys_status=='3'){
+    //       this.white=this.white+1
+    //      }else if(item.sys_status=='4'){
+    //       this.yellow=this.yellow+1
+    //      }
+    // })
+})
+   
+        
+  },
+  watch: {
+    alldata(newCount, oldCount) {
+    debugger
+console.log(`count变成了${newCount}，之前是${oldCount}`);
+     }
+   }
+
+};
+</script>
+
+<style lang="scss" class scoped>
+$box-height: 150px;
+$box-width: 100%;
+#bottomRight {
+  padding: 14px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  //下滑线动态
+  .decoration2 {
+    position: absolute;
+    right: 0.125rem;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+.eqpbox{
+  width:10%;
+  padding: 5px;
+  height: 80px;
+  text-align: center;
+  float: left;
+  
+}
+.eqpstatus{ 
+   height: 55px;
+   line-height: 55px;
+   background-color: #034b7a;
+   position: relative;
+  //  background-image: url(../assets/jcj.png);
+   background-size: 100% 100%;
+   font-size: 0.22rem;
+}
+.eqpbox .eqpname{
+  line-height: 25px;
+  background-color: rgba(19, 25, 47, 0.6);
+  height: 25px;
+}
+.eqpbox .eqpname.red{
+  color: red;
+}
+.eqpbox .eqpname.grey{
+  color: grey;
+}
+.eqpbox .eqpname.yellow{
+  color: yellow;
+}
+.eqpbox .eqpname.white{
+  color: #fff;
+}
+.badge{
+  width: 20px;
+  height: 20px;
+  background-color: #67C23A;
+  border-radius: 20px;
+  position: absolute;
+  top:0px;
+  left: 0;
+}
+.badge.red{
+  background-color: #F56C6C;
+}
+.badge.img{
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+}
+.badge.gray{
+  background-color: gray;
+}
+</style>
@@ -0,0 +1,196 @@
+<template>
+  <div id="bottomRight">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-area" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
+          <div class="decoration2">
+            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
+          </div>
+        </div>
+      </div> -->
+      <div style="padding-top: 7px;">
+        <div style="text-align: right;"><span style="position: absolute;left: 20px;top: 20px;font-size: 20px;font-weight: bold;">设备运行状态</span><span style="margin-right: 44px;position: relative;"><div class="badge success" style="left: -28px;top:1px"></div> 运行数：{{eqpinfo.work_count}}</span><span style="margin-right: 44px;position: relative;"><div class="badge red" style="left: -28px;top:1px"></div>报警数：{{ eqpinfo.alarm_count }}</span><span style="color:grey"></span><span style="margin-right: 20px;position: relative;"><div class="badge gray" style="left: -28px;top:1px"></div>停机数：{{ eqpinfo.shutdown_count }}</span></div>
+        <div style="margin-top: 7px;">
+        <!-- <BottomRightChart /> -->
+        <div class="eqpbox" v-for="item in eqpinfo.workStatusList" :key="item.id">
+          <div class="eqpstatus" :style={backgroundColor:item.status}>
+              {{ item.eqp_name }} <div class="badge img" :class="item.status == '1' ? 'success' :item.status == '2'?'red':'gray'"></div>
+            </div> 
+          <!-- <div class="eqpname" :class="item.status == '1' ? 'red' : item.status == '2' ? 'grey': item.status == '4' ? 'yellow':'white'"></div>   -->
+          
+        </div>
+      </div>
+      </div> 
+    </div>
+  </div>
+</template>
+
+<script>
+// import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
+import { gettaskList } from '../api/kanban.js'
+export default {
+  
+  props:[
+    'eqpinfo'
+],
+  components: {
+    // BottomRightChart
+  },
+  
+  data() {
+    return {
+      
+      alldata:{
+    "day_month_yield": {
+      month_qty:0,
+      day_qty:0,
+      month_qualified_percent:0,
+      day_qualified_percent:0
+    },
+    "equip_pie_list": [
+    0
+    ],
+    "equip_info_list": [
+        
+    ],
+    "report_record_list": [
+        
+      ]
+  },
+  run:0,
+  down:0,
+  warn:0,
+  white:0,
+  grey:0,
+  red:0,
+  yellow:0
+    }},
+   
+    mounted() {
+      this.$nextTick(function() {
+        this.run=0
+    this.down=0
+    this.warn=0
+    this.alldata.equip_info_list=this.eqpinfo
+    // this.eqpinfo.forEach(item=>{
+    //      if(item.daq_status=='green'){
+    //       this.run=this.run+1
+    //      }else if(item.daq_status=='grey'){
+    //       this.down=this.down+1
+    //      }else if(item.daq_status=='red'){
+    //       this.warn=this.warn+1
+    //      }
+
+    //      if(item.sys_status=='1'){
+    //       this.red=this.red+1
+    //      }else if(item.sys_status=='2'){
+    //       this.grey=this.grey+1
+    //      }else if(item.sys_status=='3'){
+    //       this.white=this.white+1
+    //      }else if(item.sys_status=='4'){
+    //       this.yellow=this.yellow+1
+    //      }
+    // })
+})
+   
+        
+  },
+  watch: {
+    alldata(newCount, oldCount) {
+    debugger
+console.log(`count变成了${newCount}，之前是${oldCount}`);
+     }
+   }
+
+};
+</script>
+
+<style lang="scss" class scoped>
+$box-height: 200px;
+$box-width: 100%;
+#bottomRight {
+  padding: 14px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  //下滑线动态
+  .decoration2 {
+    position: absolute;
+    right: 0.125rem;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+.eqpbox{
+  width:10%;
+  padding: 5px;
+  height: 45px;
+  text-align: center;
+  float: left;
+  
+}
+.eqpstatus{ 
+   height: 35px;
+   line-height: 35px;
+   background-color: #034b7a;
+   position: relative;
+  //  background-image: url(../assets/jcj.png);
+   background-size: 100% 100%;
+   font-size: 0.10rem;
+}
+.eqpbox .eqpname{
+  line-height: 25px;
+  background-color: rgba(19, 25, 47, 0.6);
+  height: 25px;
+  
+}
+.eqpbox .eqpname.red{
+  color: red;
+}
+.eqpbox .eqpname.grey{
+  color: grey;
+}
+.eqpbox .eqpname.yellow{
+  color: yellow;
+}
+.eqpbox .eqpname.white{
+  color: #fff;
+}
+.badge{
+  width: 20px;
+  height: 20px;
+  background-color: #67C23A;
+  border-radius: 20px;
+  position: absolute;
+  top:0px;
+  left: 0;
+}
+.badge.red{
+  background-color: #F56C6C;
+}
+.badge.img{
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+}
+.badge.gray{
+  background-color: gray;
+}
+</style>
@@ -1,48 +1,53 @@
 <template>
  <div id="center">
    <div class="up">
-      <div
-        class="bg-color-black item"
-        v-for="item in titleItem"
-        :key="item.title"
-      >
-        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
-        <div>
-          <dv-digital-flop
-            class="dv-dig-flop ml-1 mt-2 pl-3"
-            :config="item.number"
-          />
-        </div>
-      </div>
+     
+     
    </div>
    <div class="down">
-      <div class="ranking bg-color-black">
+      <!-- <div class="ranking bg-color-black">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
-      </div>
+      </div> -->
      <div class="percent">
        <div class="item bg-color-black">
-          <span>今日任务通过率</span>
-          <CenterChart
+          <span>本月产量</span>
+          <CenterChart1
            :id="rate[0].id"
-            :tips="rate[0].tips"
+            :tips="data.day_month_yield.month_qty"
            :colorObj="rate[0].colorData"
          />
        </div>
        <div class="item bg-color-black">
-          <span>今日任务达标率</span>
+          <span>当日产量</span>
+          <CenterChart1
+            :id="rate[0].id"
+            :tips="data.day_month_yield.day_qty"
+            :colorObj="rate[0].colorData"
+          />
+        </div>
+        <div class="item bg-color-black">
+          <span>本月合格率</span>
          <CenterChart
-            :id="rate[1].id"
-            :tips="rate[1].tips"
+            :id="rate[0].id"
+            :tips="data.day_month_yield.month_qualified_percent"
            :colorObj="rate[1].colorData"
          />
        </div>
-        <div class="water">
-          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        <div class="item bg-color-black">
+          <span>当日合格率</span>
+          <CenterChart
+            :id="rate[1].id"
+            :tips="data.day_month_yield.day_qualified_percent"
+            :colorObj="rate[1].colorData"
+          />
        </div>
+        <!-- <div class="water">
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        </div> -->
      </div>
    </div>
  </div>
@@ -50,8 +55,11 @@

 <script>
 import CenterChart from '@/components/echart/center/centerChartRate'
-
+import CenterChart1 from '@/components/echart/center/centerChartRate1'
 export default {
+  props:[
+    'data'
+],
  data() {
    return {
      titleItem: [
@@ -214,7 +222,8 @@ export default {
    }
  },
  components: {
-    CenterChart
+    CenterChart,
+    CenterChart1
  }
 }
 </script>
@@ -233,7 +242,7 @@ export default {
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
-      height: 70px;
+      height: 150px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
@@ -258,15 +267,16 @@ export default {
      }
    }
    .percent {
-      width: 40%;
+      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
-        height: 120px;
+        height: 198px;
        span {
          margin-top: 8px;
-          font-size: 14px;
+          font-size: 18px;
+          font-weight: bold;
          display: flex;
          justify-content: center;
        }
@@ -1,20 +1,21 @@
 <template>
  <div id="centerLeft1">
    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-bar" class="text-icon"></icon>
-        </span>
      <div class="d-flex">
-          <span class="fs-xl text mx-2">任务通过率</span>
-          <dv-decoration-3 class="dv-dec-3" />
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex">
+          <span class="fs-xl text">设备利用率: <span>{{ piedata.rate +' %'}}</span></span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
        </div>
      </div>
      <div class="d-flex jc-center">
-        <CenterLeft1Chart />
+        <CenterLeft1Chart :piedata="piedata" />
+        
      </div>
      <!-- 4个主要的数据 -->
-      <div class="bottom-data">
+      <!-- <div class="bottom-data">
        <div
          class="item-box mt-2"
          v-for="(item, index) in numberData"
@@ -29,7 +30,7 @@
            <span class="colorYellow">(件)</span>
          </p>
        </div>
-      </div>
+      </div> -->
    </div>
  </div>
 </template>
@@ -37,6 +38,9 @@
 <script>
 import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
 export default {
+  props:[
+    'piedata'
+],
  data() {
    return {
      numberData: [
@@ -114,7 +118,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-$box-width: 300px;
+$box-width: 100%;
 $box-height: 410px;

 #centerLeft1 {
@@ -128,6 +132,9 @@ $box-height: 410px;
  }
  .text {
    color: #c3cbde;
+    font-size: 20px;
+    font-weight: bold;
+    padding-top: 12px;
  }
  .dv-dec-3 {
    position: relative;
@@ -1,56 +1,207 @@
 <template>
  <div id="centerRight1">
    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
+      <!-- <div class="d-flex pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
-          <span class="fs-xl text mx-2">任务完成排行榜</span>
+          <span class="fs-xl text mx-2">任务列表</span>
+        </div>
+      </div> -->
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
        </div>
      </div>
-      <div class="d-flex jc-center body-box">
-        <dv-scroll-board class="dv-scr-board" :config="config" />
+      
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="mo_task_code" label="生产任务单" align="center"  />
+          <el-table-column prop="material_name" label="产品名称" align="center"  />
+          <el-table-column prop="equip_name" label="设备名称" align="center" />
+          <el-table-column prop="report_qty" label="数量" align="center" :width="120" />
+          <el-table-column prop="work_man" label="生产人" align="center" :width="120" />
+          <el-table-column prop="plan_qty" label="计划数" align="center" :width="120" />
+          <el-table-column prop="remain_plan_qty" label="剩余计划数" align="center" :width="120" />
+          <el-table-column prop="report_time" label="提报时间" align="center" :width="150" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+            <!-- <template slot-scope="scope">
+              <el-card class="notice">
+    <el-carousel indicator-position="none" arrow="never" direction="vertical" :interval="5000">
+      <el-carousel-item  class="notice_item">
+          此处是公告内容！此处是公告内容！{{scope.row.mo_task_code}}
+      </el-carousel-item>
+   </el-carousel>
+  </el-card>
+              <vue-seamless-scroll
+        :data="list"
+        style="width: 100%"
+        :class-option="classOption1"
+      ><div v-text="scope.row.mo_task_code"></div></vue-seamless-scroll>
+             </template> -->
+             <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+            <el-table-column prop="mo_task_code" label="生产任务单" align="center"  />
+          <el-table-column prop="material_name" label="产品名称" align="center"  />
+          <el-table-column prop="equip_name" label="设备名称" align="center" />
+          <el-table-column prop="report_qty" label="数量" align="center" :width="120" />
+          <el-table-column prop="work_man" label="生产人" align="center" :width="120" />
+          <el-table-column prop="plan_qty" label="计划数" align="center" :width="120" />
+          <el-table-column prop="remain_plan_qty" label="剩余计划数" align="center" :width="120" />
+          <el-table-column prop="report_time" label="提报时间" align="center" :width="150" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
      </div>
    </div>
  </div>
 </template>

 <script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
 export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1',
+    'title'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+    classOption1() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 2, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
  data() {
    return {
      config: {
-        header: ['组件', '分支', '覆盖率'],
-        data: [
-          ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
-          ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
-          ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
-          ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
-          ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
-          ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
-          ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
-          ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
-          ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
-          ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
-        ],
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
-        columnWidth: [50],
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
        align: ['center']
      }
    }
-  }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
 }
 </script>

 <style lang="scss" scoped>
 $box-height: 410px;
-$box-width: 300px;
+$box-width: 1220px;
 #centerRight1 {
  padding: 16px;
  padding-top: 20px;
@@ -68,9 +219,71 @@ $box-width: 300px;
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
-      width: 270px;
-      height: 340px;
+      width: 1120px;
+      height: 320px;
    }
  }
 }
+.seamless-warp {
+  height: 300px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+    
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+
+}
+::v-deep .el-table td{
+  font-size: 12px;
+
+
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+
 </style>
@@ -1,15 +1,15 @@
 <template>
  <div id="centerRight2">
    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
+      <div class="d-flex  pl-2">
        <span>
          <icon name="align-left" class="text-icon"></icon>
        </span>
-        <span class="fs-xl text mx-2">产品销售渠道分析</span>
+        <!-- <span class="fs-xl text mx-2">产品销售渠道分析</span> -->
      </div>
      <div class="d-flex ai-center flex-column body-box">
-        <dv-capsule-chart class="dv-cap-chart" :config="config" />
-        <centerRight2Chart1 />
+       
+        <centerRight2Chart1 :cdata="cdata" />
      </div>
    </div>
  </div>
@@ -19,8 +19,12 @@
 import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'

 export default {
+  props:[
+    'cdata'
+],
  data() {
    return {
+     
      config: {
        data: [
          {
@@ -53,8 +57,8 @@ export default {

 <style lang="scss" scoped>
 #centerRight2 {
-  $box-height: 410px;
-  $box-width: 340px;
+  $box-height: 270px;
+  $box-width: 100%;
  padding: 5px;
  height: $box-height;
  width: $box-width;
@@ -0,0 +1,241 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        table-layout='auto'
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column prop="mo_task_code" label="单据编号" align="center" show-overflow-tooltip />
+          <el-table-column prop="equip_workline_name" label="设备名称" align="center" show-overflow-tooltip />
+          <el-table-column prop="create_time" label="任务生成时间" align="center" show-overflow-tooltip />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+          table-layout='auto'
+        >
+        <el-table-column prop="mo_task_code" label="单据编号" align="center" show-overflow-tooltip />
+          <el-table-column prop="equip_workline_name" label="设备名称" align="center" show-overflow-tooltip  />
+          <el-table-column prop="create_time" label="任务生成时间" align="center" show-overflow-tooltip  />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1',
+    'title'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum:7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 410px;
+$box-width: 420px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 270px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+    
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+
+
+}
+::v-deep .el-table td{
+  font-size: 10px;
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+::v-deep .el-table th>.cell{
+  white-space: nowrap !important;
+}
+</style>
@@ -0,0 +1,227 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ '安灯呼叫' }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column prop="info" label="设备信息" align="center" />
+          <el-table-column prop="fault" label="故障" align="center" :width="250" />
+          <!-- <el-table-column prop="source" label="发起人" align="center" /> -->
+          <el-table-column prop="create_time" label="发起时间" align="center" :width="200" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column prop="info" label="设备信息" align="center" />
+          <el-table-column prop="fault" label="故障" align="center" :width="250" />
+          <el-table-column prop="source" label="发起人" align="center" />
+          <el-table-column prop="create_time" label="发起时间" align="center" :width="200" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum:7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 270px;
+$box-width: calc( 100% - 0px );
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 220px;
+    }
+  }
+}
+.seamless-warp {
+  height: 240px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+</style>
@@ -0,0 +1,251 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务列表</span>
+        </div>
+      </div> -->
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        table-layout='auto'
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column prop="mo_task_code" label="单据编号" align="center" :width="140" />
+          <el-table-column prop="equip_workline_name" label="设备名称" align="center"/>
+          <el-table-column prop="checktype" label="质检类型" align="center" />
+          <el-table-column prop="material_name" label="物料名称" align="center" />
+          <el-table-column prop="material_specification" label="规格" align="center" />
+          <el-table-column prop="material_standard" label="型号" align="center" />
+          <el-table-column prop="qty" label="合格" align="center" :width="80" />
+          <el-table-column prop="rqty" label="不合格" align="center" :width="80" />
+          <el-table-column prop="result" label="质检结论" align="center" :width="80" />
+          <el-table-column prop="execuser" label="质检人" align="center" />
+          <el-table-column prop="exectime" label="质检时间" align="center" :width="140" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+          table-layout='auto'
+        >
+        <el-table-column prop="mo_task_code" label="单据编号" align="center" :width="140" />
+          <el-table-column prop="equip_workline_name" label="设备名称" align="center"  />
+          <el-table-column prop="checktype" label="质检类型" align="center" />
+          <el-table-column prop="material_name" label="物料名称" align="center" />
+          <el-table-column prop="material_specification" label="规格" align="center" />
+          <el-table-column prop="material_standard" label="型号" align="center" />
+          <el-table-column prop="qty" label="合格" align="center" :width="80" />
+          <el-table-column prop="rqty" label="不合格" align="center" :width="80" />
+          <el-table-column prop="result" label="质检结论" align="center" :width="80" />
+          <el-table-column prop="execuser" label="质检人" align="center" />
+          <el-table-column prop="exectime" label="质检时间" align="center" :width="140" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 410px;
+$box-width: 1220px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 300px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+    
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+
+}
+::v-deep .el-table td{
+  font-size: 10px;
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+</style>
@@ -0,0 +1,277 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务列表</span>
+        </div>
+      </div> -->
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="production_task_code" label="生产任务单" align="center" />
+          <el-table-column prop="material_name" label="产品名称" align="center" />
+          <el-table-column prop="work_line" label="产线信息" align="center" />
+          <el-table-column prop="code_batch" label="批次号" align="center" />
+          <el-table-column prop="plan_qty" label="计划数" align="center" />   
+          <el-table-column prop="complete_rate" label="完成率" align="center" />
+          <el-table-column prop="work_man" label="排班人员" align="center" />
+          <el-table-column prop="start_time" label="开工时间" align="center" :width="150" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+            <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+            <el-table-column prop="production_task_code" label="生产任务单" align="center" />
+          <el-table-column prop="material_name" label="产品名称" align="center" />
+          <el-table-column prop="work_line" label="产线信息" align="center" />
+          <el-table-column prop="code_batch" label="批次号" align="center" />
+          <el-table-column prop="plan_qty" label="计划数" align="center" />   
+          <el-table-column prop="complete_rate" label="完成率" align="center" >
+            <template slot-scope="scope">
+              <el-progress :text-inside="true" :stroke-width="22" :percentage="scope.row.complete_rate" :status="scope.row.complete_rate<90?'success':'warning'"></el-progress>
+            </template>
+          </el-table-column>
+          <el-table-column prop="work_man" label="排班人员" align="center" />
+          <el-table-column prop="start_time" label="开工时间" align="center" :width="150" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1',
+    'title'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+    classOption1() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 2, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 290px;
+$box-width: 100%;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 160px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+    
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+
+}
+::v-deep .el-table td{
+  font-size: 12px;
+
+
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+</style>
@@ -0,0 +1,267 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务列表</span>
+        </div>
+      </div> -->
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="eqp_code" label="设备编码" align="center" />
+          <el-table-column prop="eqp_name" label="设备名称" align="center" :width="180" />
+          <el-table-column prop="run_time" label="运行时间" align="center" />
+          <el-table-column prop="shutdown_time" label="停机时间" align="center" />
+          <el-table-column prop="hour_out" label="每小时产量" align="center" />   
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+            <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="eqp_code" label="设备编码" align="center" />
+          <el-table-column prop="eqp_name" label="设备名称" align="center" :width="180" />
+          <el-table-column prop="run_time" label="运行时间" align="center" />
+          <el-table-column prop="shutdown_time" label="停机时间" align="center" />
+          <el-table-column prop="hour_out" label="每小时产量" align="center" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1',
+    'title'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+    classOption1() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 2, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 3, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 240px;
+$box-width: 100%;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 110px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+    
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+
+}
+::v-deep .el-table td{
+  font-size: 12px;
+
+
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+</style>
@@ -0,0 +1,285 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务列表</span>
+        </div>
+      </div> -->
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="production_task_code" label="生产任务单" align="center"  />
+          <el-table-column prop="material_name" label="产品名称" align="center"  />
+          <el-table-column prop="carry_code" label="料箱编号" align="center" />
+          <el-table-column prop="qty" label="数量" align="center" />
+          <el-table-column prop="reporter" label="提报人" align="center" />
+          <el-table-column prop="report_time" label="提报时间" align="center" :width="150" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+            <!-- <template slot-scope="scope">
+              <el-card class="notice">
+    <el-carousel indicator-position="none" arrow="never" direction="vertical" :interval="5000">
+      <el-carousel-item  class="notice_item">
+          此处是公告内容！此处是公告内容！{{scope.row.mo_task_code}}
+      </el-carousel-item>
+   </el-carousel>
+  </el-card>
+              <vue-seamless-scroll
+        :data="list"
+        style="width: 100%"
+        :class-option="classOption1"
+      ><div v-text="scope.row.mo_task_code"></div></vue-seamless-scroll>
+             </template> -->
+             <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="production_task_code" label="生产任务单" align="center"  />
+          <el-table-column prop="material_name" label="产品名称" align="center"  />
+          <el-table-column prop="carry_code" label="料箱编号" align="center" />
+          <el-table-column prop="qty" label="数量" align="center" />
+          <el-table-column prop="reporter" label="提报人" align="center" />
+          <el-table-column prop="report_time" label="提报时间" align="center" :width="150" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1',
+    'title'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+    classOption1() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 2, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 410px;
+$box-width: 1220px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 285px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+    
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+
+}
+::v-deep .el-table td{
+  font-size: 12px;
+
+
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+
+</style>
@@ -0,0 +1,384 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class="jc-center body-box" v-if="type=='sb01'">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" />
+          <el-table-column prop="name" label="姓名" align="center" />
+          <el-table-column  label="日/月工时(h)" align="center" >
+            <template slot-scope="scope">
+{{ scope.row.work_hour +'/' + scope.row.month_work_hour}}
+</template>
+</el-table-column>
+          <el-table-column  label="日/月执行数" align="center" >
+            <template slot-scope="scope">
+{{ scope.row.excute_count +'/' + scope.row.month_excute_count}}
+</template>
+</el-table-column>
+          <!-- <el-table-column prop="month_work_hour" label="月工时/h" align="center" /> -->
+          <!-- <el-table-column prop="month_excute_count" label="月执行数" align="center" /> -->
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="name" label="姓名" align="center" />
+          <el-table-column  label="日/月工时(h)" align="center" >
+            <template slot-scope="scope">
+{{ scope.row.work_hour +'/' + scope.row.month_work_hour}}
+</template>
+</el-table-column>
+          <el-table-column  label="日/月执行数" align="center" >
+            <template slot-scope="scope">
+{{ scope.row.excute_count +'/' + scope.row.month_excute_count}}
+</template>
+</el-table-column>
+        </el-table>
+      </vue-seamless-scroll>
+      </div>
+      <div class="jc-center body-box" v-if="type=='sb03'">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" />
+          <el-table-column prop="name" label="姓名" align="center" />
+          <el-table-column prop="work_hour" label="工时汇总/h" align="center" >
+            
+</el-table-column>
+          <el-table-column prop="excute_count" label="执行数" align="center" >
+            
+</el-table-column>
+          <!-- <el-table-column prop="month_work_hour" label="月工时/h" align="center" /> -->
+          <!-- <el-table-column prop="month_excute_count" label="月执行数" align="center" /> -->
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="name" label="姓名" align="center" />
+      <el-table-column prop="work_hour" label="工时汇总/h" align="center" >
+            
+          </el-table-column>
+                    <el-table-column prop="excute_count" label="执行数" align="center" >
+                      
+          </el-table-column>
+        </el-table>
+      </vue-seamless-scroll>
+      </div>
+      <div class="jc-center body-box" v-if="type=='sb02'">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" />
+      <el-table-column prop="eqp_code" label="设备编码" align="center" />
+          <el-table-column prop="eqp_name" label="设备名称" align="center" :width="210" />
+          <el-table-column prop="status" label="报警状态" align="center" />
+          <el-table-column prop="andon_time" label="报警时间" align="center" :width="160" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="eqp_code" label="设备编码" align="center" />
+          <el-table-column prop="eqp_name" label="设备名称" align="center" :width="210" />
+          <el-table-column prop="status" label="报警状态" align="center" />
+          <el-table-column prop="andon_time" label="报警时间" align="center" :width="160" />
+        </el-table>
+      </vue-seamless-scroll>
+      </div>
+      
+      <div class="jc-center body-box" v-if="type=='mj01'">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="mold_name" label="模具信息" align="center" />
+          <el-table-column prop="apply_name" label="报修名称" align="center" :min-width="160" />
+          <el-table-column prop="applyer_name" label="报修人" align="center" />
+          <el-table-column prop="modifyer_name" label="维修人" align="center" />
+          <el-table-column prop="work_hour" label="工时" align="center" />
+          <!-- <el-table-column prop="responsible_name" label="复核人" align="center" /> -->
+          <el-table-column prop="status" label="状态" align="center" />
+          <el-table-column prop="complete_time" label="完成时间" align="center" :width="160" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="mold_name" label="模具信息" align="center" />
+          <el-table-column prop="apply_name" label="报修名称" align="center" :min-width="160" />
+          <el-table-column prop="applyer_name" label="报修人" align="center" />
+          <el-table-column prop="modifyer_name" label="维修人" align="center" />
+          <el-table-column prop="work_hour" label="工时" align="center" />
+          <!-- <el-table-column prop="responsible_name" label="复核人" align="center" /> -->
+          <el-table-column prop="status" label="状态" align="center" />
+          <el-table-column prop="complete_time" label="完成时间" align="center" :width="160" />
+        </el-table>
+      </vue-seamless-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1',
+    'title'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 4, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 4, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 270px;
+$box-width: calc( 100% - 0px );
+#centerRight1 {
+  padding: 16px;
+  // padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 210px;
+    }
+  }
+}
+.seamless-warp {
+  height: 140px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .bottom tr:nth-child(even) {
+  background-color: #092142;
+}
+::v-deep .bottom tr:hover {
+  background-color: #092142;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+</style>
@@ -0,0 +1,221 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class=" jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column prop="mo_task_code" label="单据编号" align="center" />
+          <el-table-column prop="equip_workline_name" label="设备名称" align="center" />
+          <el-table-column prop="create_time" label="任务生成时间" align="center" />
+          
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column prop="mo_task_code" label="单据编号" align="center" />
+          <el-table-column prop="equip_workline_name" label="设备名称" align="center" />
+          <el-table-column prop="create_time" label="任务生成时间" align="center" />
+        </el-table>
+      </vue-seamless-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'title'
+],
+  data() {
+    return {
+      config: {
+        header: [
+
+'单据编号',
+'设备/产线名称',
+'任务生成时间',],
+data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [40],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+'单据编号1',
+'设备/产线名称',
+'任务生成时间',],
+data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [40],
+        align: ['center']
+      }
+    }
+  },
+  computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 520px;
+$box-width: 633px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 580px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 360px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+}
+
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .bottom tr:nth-child(even) {
+  background-color: #092142;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+</style>
@@ -0,0 +1,330 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class=" jc-center body-box" v-if="type==1 || type==2 || type==3">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="eqp_code" label="设备编码" align="center" />
+          <el-table-column prop="eqp_name" label="设备名称" align="center" :width="160" />
+          <el-table-column prop="excuter_name" label="执行人" align="center" v-if="type==1" />
+          <el-table-column prop="excuter_name" label="报修人" align="center" v-if="type==2" />
+          <el-table-column prop="excuter_name" label="复核人" align="center" v-if="type==3" />
+          <el-table-column prop="create_time" label="发起时间" align="center" :width="160" />
+          
+      </el-table>
+      
+      
+      <el-table
+      v-if="hasMatch==true"
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+          :row-class-name="getRowClass"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="eqp_code" label="设备编码" align="center" />
+          <el-table-column prop="eqp_name" label="设备名称" align="center" :width="160" />
+          <el-table-column prop="excuter_name" label="执行人" align="center" v-if="type==1" />
+          <el-table-column prop="excuter_name" label="报修人" align="center" v-if="type==2" />
+          <el-table-column prop="excuter_name" label="复核人" align="center" v-if="type==3" />
+          <el-table-column prop="create_time" label="发起时间" align="center" :width="160" />
+        </el-table>
+        <vue-seamless-scroll
+      v-else
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="eqp_code" label="设备编码" align="center" />
+          <el-table-column prop="eqp_name" label="设备名称" align="center" :width="160" />
+          <el-table-column prop="excuter_name" label="执行人" align="center" v-if="type==1" />
+          <el-table-column prop="excuter_name" label="报修人" align="center" v-if="type==2" />
+          <el-table-column prop="excuter_name" label="复核人" align="center" v-if="type==3" />
+          <el-table-column prop="create_time" label="发起时间" align="center" :width="160" />
+        </el-table>
+      </vue-seamless-scroll>
+      </div>
+      <div class=" jc-center body-box" v-else>
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="mold_code" label="模具编码" align="center" />
+          <el-table-column prop="mold_name" label="模具名称" align="center" :width="160" />
+          <el-table-column prop="excuter_name" label="执行人" align="center" v-if="type=='mj01' || type=='mj02'" />
+          <el-table-column prop="excuter_name" label="报修人" align="center" v-if="type=='mj03'" />
+          <el-table-column prop="create_time" label="开始时间" align="center" :width="160" v-if="type=='mj01'" />
+          <el-table-column prop="create_time" label="报修时间" align="center" :width="160" v-if="type=='mj02'"  />
+          <el-table-column prop="create_time" label="创建时间" align="center" :width="160" v-if="type=='mj03'" />
+      </el-table>
+      <el-table
+      v-if="hasMatch==true"
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+          :row-class-name="getRowClass"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="mold_code" label="模具编码" align="center" />
+          <el-table-column prop="mold_name" label="模具名称" align="center" :width="160" />
+          <el-table-column prop="excuter_name" label="执行人" align="center" v-if="type=='mj01' || type=='mj02'" />
+          <el-table-column prop="excuter_name" label="报修人" align="center" v-if="type=='mj03'" />
+          <el-table-column prop="create_time" label="开始时间" align="center" :width="160" v-if="type=='mj01'" />
+          <el-table-column prop="create_time" label="报修时间" align="center" :width="160" v-if="type=='mj02'"  />
+          <el-table-column prop="create_time" label="创建时间" align="center" :width="160" v-if="type=='mj03'" />
+        </el-table>
+      <vue-seamless-scroll
+      v-else
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column
+      type="index"
+      width="50" label="序号" align="center" />
+      <el-table-column prop="mold_code" label="模具编码" align="center" />
+          <el-table-column prop="mold_name" label="模具名称" align="center" :width="160" />
+          <el-table-column prop="excuter_name" label="执行人" align="center" v-if="type=='mj01' || type=='mj02'" />
+          <el-table-column prop="excuter_name" label="报修人" align="center" v-if="type=='mj03'" />
+          <el-table-column prop="create_time" label="开始时间" align="center" :width="160" v-if="type=='mj01'" />
+          <el-table-column prop="create_time" label="报修时间" align="center" :width="160" v-if="type=='mj02'"  />
+          <el-table-column prop="create_time" label="创建时间" align="center" :width="160" v-if="type=='mj03'" />
+        </el-table>
+      </vue-seamless-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'title',
+    'hasMatch'
+],
+  data() {
+    return {
+      isPlaying:false,
+      config: {
+        header: [
+
+'单据编号',
+'设备/产线名称',
+'执行人',
+'任务生成时间',],
+data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [40],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+'单据编号1',
+'设备/产线名称',
+'执行人',
+'任务生成时间',],
+data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [40],
+        align: ['center']
+      }
+    }
+  },
+  computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 6, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+  methods: {
+    getRowClass(row,rowindex){
+      if (row.row.is_priority== '1') {
+        return 'rowactive';
+      } else  {
+        return '';
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 380px;
+$box-width: 633px;
+#centerRight1 {
+  padding: 16px;
+  // padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 580px;
+      height: 120px;
+    }
+  }
+}
+.seamless-warp {
+  height: 240px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+}
+
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .bottom tr:nth-child(even) {
+  background-color: #092142;
+}
+::v-deep .el-table  tr.rowactive{
+  color: red; 
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+</style>
@@ -0,0 +1,246 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex" style="display: block;width: 100%;text-align: center;">
+        <!-- <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span> -->
+        <div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
+          <span class=" text">{{ title }}</span>
+          <!-- <dv-decoration-3 class="dv-dec-3" /> -->
+        </div>
+      </div>
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column prop="production_task_code" label="生产任务单" align="center" />
+          <el-table-column prop="material_name" label="产品名称" align="center" />
+          <el-table-column prop="work_line" label="产线信息" align="center" />
+          <el-table-column prop="code_batch" label="批次号" align="center" :width="140" />
+          <el-table-column prop="plan_qty" label="计划数" align="center" :width="120" />   
+          <el-table-column prop="complete_rate" label="完成率" align="center" :width="120"  />
+          <el-table-column prop="start_time" label="开工时间" align="center" :width="150" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column prop="production_task_code" label="生产任务单" align="center" />
+          <el-table-column prop="material_name" label="产品名称" align="center"  />
+          <el-table-column prop="work_line" label="产线信息" align="center" />
+          <el-table-column prop="code_batch" label="批次号" align="center" :width="140" />
+          <el-table-column prop="plan_qty" label="计划数" align="center" :width="120" />   
+          <el-table-column prop="complete_rate" label="完成率" align="center" :width="120" >
+            <template slot-scope="scope">
+              <el-progress :text-inside="true" :stroke-width="22" :percentage="scope.row.complete_rate" :status="scope.row.complete_rate<90?'success':'warning'"></el-progress>
+            </template>
+          </el-table-column>
+          <el-table-column prop="start_time" label="开工时间" align="center" :width="150" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1',
+    'title'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+$box-width: 1220px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 280px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .el-table td{
+  font-size: 14px;
+
+
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .el-table::before {
+	height: 0;
+}
+::v-deep .el-table tr:hover>td{
+background-color: #034b7a !important;
+
+}
+</style>
@@ -0,0 +1,238 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <!-- <div class="d-flex pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务列表</span>
+        </div>
+      </div> -->
+      <div class="jc-center body-box">
+        <el-table
+        :data="list"
+        style="width: 100%"
+        class="top"
+        :header-cell-style="{background:'transparent',color:'#fff'}"
+      >
+      <el-table-column prop="mo_task_code" label="生产任务单" align="center" :width="180" />
+          <el-table-column prop="material_name" label="产品名称" align="center" :width="200" />
+          <el-table-column prop="workline_name" label="产线名称" align="center" :width="200"  />
+          <el-table-column prop="plan_qty" label="计划数" align="center" />
+          <el-table-column prop="complete_qty" label="完成数" align="center" />
+          <el-table-column prop="report_qty" label="提报数" align="center" />
+          <el-table-column prop="report_name" label="提报人" align="center" />
+          <el-table-column prop="report_time" label="提报时间" align="center" :width="200" />
+      </el-table>
+      
+      <vue-seamless-scroll
+        :data="list"
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+        <el-table
+          :data="list"
+          style="width: 100%"
+          class="bottom"
+        >
+        <el-table-column prop="mo_task_code" label="生产任务单" align="center" :width="180" />
+          <el-table-column prop="material_name" label="产品名称" align="center" :width="200" />
+          <el-table-column prop="workline_name" label="产线名称" align="center" :width="200"  />
+          <el-table-column prop="plan_qty" label="计划数" align="center" />
+          <el-table-column prop="complete_qty" label="完成数" align="center" />
+          <el-table-column prop="report_qty" label="提报数" align="center" />
+          <el-table-column prop="report_name" label="提报人" align="center" />
+          <el-table-column prop="report_time" label="提报时间" align="center" :width="200" />
+        </el-table>
+      </vue-seamless-scroll>
+
+
+        <!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
+        <dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+     vueSeamlessScroll
+  },
+  props:[
+    'list',
+    'type',
+    'list1'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+
+  data() {
+    return {
+      config: {
+        header: [
+
+        '生产任务单',
+        '产品名称',
+        '产线信息',
+        '提报类型',
+        '数量',
+        '提报人',
+        '计划数',
+        '剩余计划数',
+        '提报时间'],
+        data:this.list,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      },
+      config1: {
+        header: [
+
+        '单据编号',
+        '设备/产线名称',
+        '执行人',
+        '任务生成时间',],
+        data:this.list1,
+        // data: [
+        //   ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        //   ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        //   ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        //   ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        //   ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        //   ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        //   ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        //   ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        //   ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        //   ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        // ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [30],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    console.log('list',this.list)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+$box-width: 1220px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 1120px;
+      height: 320px;
+    }
+  }
+}
+.seamless-warp {
+  height: 300px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+::v-deep .top .el-table__body-wrapper {
+  display: none;
+  border-bottom: 0;
+}
+::v-deep .top .el-table__header-wrapper {
+  border-bottom: 0;
+}
+::v-deep .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+  border-bottom: 0;
+}
+::v-deep .el-table tr,.el-table tr{
+     background-color: transparent;
+}
+::v-deep .el-table, .el-table__expanded-cell,th{
+     background-color: transparent;
+     color:#fff
+}
+::v-deep .el-table thead tr{
+     background-image: linear-gradient(
+      to right,
+      #092142 12%,
+      #034b7a 50%,
+      #092142 88%
+    );
+}
+::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .top th.el-table__cell.is-leaf{
+border-bottom: 0;
+}
+::v-deep .el-table td{
+  font-size: 14px;
+
+
+}
+::v-deep .el-table__body-wrapper .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep .el-table::before {
+	height: 0;
+}
+</style>
@@ -0,0 +1,274 @@
+<template>
+  <div id="center">
+    <div class="up">
+     
+     
+    </div>
+    <div class="down">
+      <!-- <div class="ranking bg-color-black">
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
+      </div> -->
+      <div class="percent">
+         <div >本月产量：<span >{{ data.month_output }}</span></div>
+         <div >当日产量：<span >{{ data.day_output }}</span></div>
+         <div>本月合格率：<span >{{ data.month_pass_rate +'%'}} </span></div>
+         <div>当日合格率：<span >{{  data.day_pass_rate+'%'}}</span></div> 
+        <!-- <div class="water">
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import CenterChart from '@/components/echart/center/centerChartRate'
+// import CenterChart1 from '@/components/echart/center/centerChartRate1'
+export default {
+  props:[
+    'data'
+],
+  data() {
+    return {
+      titleItem: [
+        {
+          title: '今年累计任务建次数',
+          number: {
+            number: [120],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '本月累计任务次数',
+          number: {
+            number: [18],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今日累计任务次数',
+          number: {
+            number: [2],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年失败任务次数',
+          number: {
+            number: [14],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年成功任务次数',
+          number: {
+            number: [106],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年达标任务个数',
+          number: {
+            number: [100],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        }
+      ],
+      ranking: {
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 78
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '新乡2',
+            value: 80
+          },
+          {
+            name: '新乡3',
+            value: 80
+          },
+          {
+            name: '新乡4',
+            value: 80
+          },
+          {
+            name: '新乡5',
+            value: 80
+          },
+          {
+            name: '新乡6',
+            value: 80
+          }
+        ],
+        carousel: 'single',
+        unit: '人'
+      },
+      water: {
+        data: [24, 45],
+        shape: 'roundRect',
+        formatter: '{value}%',
+        waveNum: 3
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: 'centerRate1',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate2',
+          tips: 40,
+          colorData: {
+            textStyle: '#67e0e3',
+            series: {
+              color: ['#faf3a378', 'transparent'],
+              dataColor: {
+                normal: '#ff9800',
+                shadowColor: '#fcebad'
+              }
+            }
+          }
+        }
+      ]
+    }
+  },
+  components: {
+    // CenterChart,
+    // CenterChart1
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 32%;
+      height: 150px;
+      .dv-dig-flop {
+        width: 150px;
+        height: 30px;
+      }
+    }
+  }
+  .down {
+    padding: 6px 4px;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 255px;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
+    .ranking {
+      padding: 10px;
+      width: 59%;
+      .dv-scr-rank-board {
+        height: 225px;
+      }
+    }
+    .percent {
+      width: 100%;
+      padding: 60px 20px;
+      // text-align: center;
+      line-height: 70px;
+      font-size: 18px;
+      // display: flex;
+      // flex-wrap: wrap;
+      span{
+        font-size: 18px;
+        width: 30%;
+        display: inline-block;
+      }
+      .item {
+        width: 50%;
+        height: 198px;
+        span {
+          margin-top: 8px;
+          font-size: 18px;
+          display: flex;
+          font-weight: bold;
+          justify-content: center;
+        }
+      }
+      .water {
+        width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,330 @@
+<template>
+  <div id="center">
+    <div class="up">
+     
+     
+    </div>
+    <div class="down">
+      <!-- <div class="ranking bg-color-black">
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
+      </div> -->
+      <div class="percent">
+        <div class="item bg-color-black">
+          <span>设备/模具故障时间(h)</span>
+          <!-- <vue-seamless-scroll
+        class="seamless-warp"
+        style="width: 100%"
+        :class-option="classOption"
+      >
+    </vue-seamless-scroll> -->
+          <div class="num">
+            <div>{{ (data.equipFaultTime/(60*60)).toFixed(2) }}</div>
+            <div>{{ (data.moldFaultTime/(60*60)).toFixed(2) }}</div>
+            </div>
+          <!-- <CenterChart1
+            :id="rate[0].id"
+            :tips="data.monthCount"
+            :colorObj="rate[0].colorData"
+          /> -->
+        </div>
+        <div class="item bg-color-black">
+          <span>设备/模具维修时间(h)</span>
+          <div class="num">
+            <div>{{ (data.equipRepairTime/(60*60)).toFixed(2) }}</div>
+            <div>{{ (data.moldRepairTime/(60*60)).toFixed(2) }}</div>
+            </div>
+        </div>
+        <div class="item bg-color-black">
+          <span>设备/模具保养次数</span>
+          <div class="num">
+            <div>{{ data.equipMaintainCount }}</div>
+            <div>{{ data.moldMaintainCount }}</div>
+            </div>
+        </div>
+        <div class="item bg-color-black">
+          <span >本月故障时间(h)</span>
+        <div class="num">
+            <div>{{ (data.equipMonthFaultTime/(60*60)).toFixed(2) }}</div>
+            <div>{{ (data.moldMonthFaultTime/(60*60)).toFixed(2) }}</div>
+            </div>
+        </div>
+        <!-- <div class="water">
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import CenterChart from '@/components/echart/center/centerChartRate'
+// import CenterChart1 from '@/components/echart/center/centerChartRate1'
+// import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+
+  props:[
+    'data'
+],
+computed: {
+    // 滚动条的配置项
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+  data() {
+    return {
+      titleItem: [
+        {
+          title: '今年累计任务建次数',
+          number: {
+            number: [120],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '本月累计任务次数',
+          number: {
+            number: [18],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今日累计任务次数',
+          number: {
+            number: [2],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年失败任务次数',
+          number: {
+            number: [14],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年成功任务次数',
+          number: {
+            number: [106],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年达标任务个数',
+          number: {
+            number: [100],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        }
+      ],
+      ranking: {
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 78
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '新乡2',
+            value: 80
+          },
+          {
+            name: '新乡3',
+            value: 80
+          },
+          {
+            name: '新乡4',
+            value: 80
+          },
+          {
+            name: '新乡5',
+            value: 80
+          },
+          {
+            name: '新乡6',
+            value: 80
+          }
+        ],
+        carousel: 'single',
+        unit: '人'
+      },
+      water: {
+        data: [24, 45],
+        shape: 'roundRect',
+        formatter: '{value}%',
+        waveNum: 3
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: 'centerRate1',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate2',
+          tips: 40,
+          colorData: {
+            textStyle: '#67e0e3',
+            series: {
+              color: ['#faf3a378', 'transparent'],
+              dataColor: {
+                normal: '#ff9800',
+                shadowColor: '#fcebad'
+              }
+            }
+          }
+        }
+      ]
+    }
+  },
+  components: {
+    // vueSeamlessScroll
+    // CenterChart,
+    // CenterChart1
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 33%;
+      height: 150px;
+      .dv-dig-flop {
+        width: 150px;
+        height: 30px;
+      }
+    }
+  }
+  .down {
+    padding: 6px 4px;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 255px;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
+    .ranking {
+      padding: 10px;
+      width: 59%;
+      .dv-scr-rank-board {
+        height: 225px;
+      }
+    }
+    .percent {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 50%;
+        height: 198px;
+        span {
+          
+          margin-top: 8px;
+          font-size: 12px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+      .water {
+        width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+.num{
+  width: 120px;
+  height: 120px;
+  border: 2px solid;
+  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
+  margin: 0 auto;
+  border-radius: 120px;
+  text-align: center;
+  line-height: 60px;
+  margin-top: 20px;
+}
+
+</style>
@@ -0,0 +1,292 @@
+<template>
+  <div id="center">
+    <div class="up">
+     
+     
+    </div>
+    <div class="down">
+      <!-- <div class="ranking bg-color-black">
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
+      </div> -->
+      <div class="percent">
+        <div class="item bg-color-black">
+          <span>开工任务数</span>
+          <CenterChart1
+            :id="rate[0].id"
+            :tips="data.mo_task_count"
+            :colorObj="rate[0].colorData"
+          />
+        </div>
+        <div class="item bg-color-black">
+          <span>质检任务数</span>
+          <CenterChart1
+            :id="rate[0].id"
+            :tips="data.qc_all_count"
+            :colorObj="rate[0].colorData"
+          />
+        </div>
+        <div class="item bg-color-black">
+          <span>校验完成任务数</span>
+          <CenterChart1
+            :id="rate[0].id"
+            :tips="data.qc_complete_count"
+            :colorObj="rate[1].colorData"
+          />
+        </div>
+        <div class="item bg-color-black">
+          <span>质检通过任务数</span>
+          <CenterChart1
+            :id="rate[1].id"
+            :tips="data.qc_ok_count"
+            :colorObj="rate[1].colorData"
+          />
+        </div>
+        <!-- <div class="water">
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import CenterChart from '@/components/echart/center/centerChartRate'
+import CenterChart1 from '@/components/echart/center/centerChartRate1'
+export default {
+  props:[
+    'data'
+],
+  data() {
+    return {
+      titleItem: [
+        {
+          title: '今年累计任务建次数',
+          number: {
+            number: [120],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '本月累计任务次数',
+          number: {
+            number: [18],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今日累计任务次数',
+          number: {
+            number: [2],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年失败任务次数',
+          number: {
+            number: [14],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年成功任务次数',
+          number: {
+            number: [106],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年达标任务个数',
+          number: {
+            number: [100],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        }
+      ],
+      ranking: {
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 78
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '新乡2',
+            value: 80
+          },
+          {
+            name: '新乡3',
+            value: 80
+          },
+          {
+            name: '新乡4',
+            value: 80
+          },
+          {
+            name: '新乡5',
+            value: 80
+          },
+          {
+            name: '新乡6',
+            value: 80
+          }
+        ],
+        carousel: 'single',
+        unit: '人'
+      },
+      water: {
+        data: [24, 45],
+        shape: 'roundRect',
+        formatter: '{value}%',
+        waveNum: 3
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: 'centerRate1',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate2',
+          tips: 40,
+          colorData: {
+            textStyle: '#67e0e3',
+            series: {
+              color: ['#faf3a378', 'transparent'],
+              dataColor: {
+                normal: '#ff9800',
+                shadowColor: '#fcebad'
+              }
+            }
+          }
+        }
+      ]
+    }
+  },
+  components: {
+    // CenterChart,
+    CenterChart1
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 32%;
+      height: 150px;
+      .dv-dig-flop {
+        width: 150px;
+        height: 30px;
+      }
+    }
+  }
+  .down {
+    padding: 6px 4px;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 255px;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
+    .ranking {
+      padding: 10px;
+      width: 59%;
+      .dv-scr-rank-board {
+        height: 225px;
+      }
+    }
+    .percent {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 50%;
+        height: 198px;
+        span {
+          margin-top: 8px;
+          font-size: 14px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+      .water {
+        width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/Show More
+++ b/Show More