Merge branch 'projects/mescc/develop' into projects/mescc/zhp

4 months ago · 8a5b0f2857
--- a/.env.dev
+++ b/.env.dev
@@ -12,8 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统

 # 芋道管理系统/开发环境
 VUE_APP_BASE_API = 'http://192.168.1.61:48080'
 # VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
 # VUE_APP_BASE_API = 'http://192.168.1.61:48080'
 VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'

 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
  },
  "dependencies": {
    "@babel/parser": "7.18.4",
    "@jiaminghi/data-view": "^2.10.0",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "^1.6.8",
    "clipboard": "2.0.8",
--- a/src/api/produceData/index.js
+++ b/src/api/produceData/index.js
@@ -30,3 +30,19 @@ export function getProduceDataDetail(data){
    query: data
  })
 }

 // export function cockpitDataMonitor(data) {
 //   return request({
 //     url: '/ip/prod-output/cockpitDataMonitor',
 //     method: 'post',
 //     data: data
 //   })
 // }

 export function cockpitDataMonitor(query) {
  return request({
    url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=95bdbdc1c387a170105f84cd416c4c9f&city=110108',
    method: 'get',
    query: query
  })
 }
--- a/src/assets/images/companyData/energy.png
+++ b/src/assets/images/companyData/energy.png
--- a/src/assets/images/companyData/order.png
+++ b/src/assets/images/companyData/order.png
--- a/src/assets/images/companyData/prod-minor.png
+++ b/src/assets/images/companyData/prod-minor.png
--- a/src/assets/images/companyData/store.png
+++ b/src/assets/images/companyData/store.png
--- a/src/assets/images/login.png
+++ b/src/assets/images/login.png
--- a/src/assets/styles/login.scss
+++ b/src/assets/styles/login.scss
@@ -133,8 +133,8 @@ $base1px: 0.15vh; // 1px / 1080px;
        width: 100%;
        clear: both;
        position: relative;
        top: calc(56 * #{$base1px});
        height: calc(128 * #{$base1px});
        top: calc(#{$base1px});
        height: calc(100 * #{$base1px});
        display: flex;
        align-items: center;
        justify-content: center;
@@ -189,7 +189,7 @@ $base1px: 0.15vh; // 1px / 1080px;
        height: calc(16 * 0.12vh);
        line-height: calc(16 * 0.12vh);
        font-size: calc(12 * 0.12vh);
        color: #8c8c8c;
        color: #C7C7C7;

        a,
        a:hover,
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ import store from "./store";
 import router from "./router";
 import directive from "./directive"; // directive
 import plugins from "./plugins"; // plugins
 import { scrollBoard } from '@jiaminghi/data-view'

 import "./assets/icons"; // icon
 import "./permission"; // permission control
@@ -69,6 +70,7 @@ Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
 Vue.use(CodeBrickZj);
 Vue.use(scrollBoard)
 // Form Generator 组件需要使用到 tinymce
 import Tinymce from "@/components/tinymce/index.vue";
 Vue.component("tinymce", Tinymce);
--- a/src/views/copilot/components/FactoryDataHeader.vue
+++ b/src/views/copilot/components/FactoryDataHeader.vue
@@ -0,0 +1,131 @@
 <template>
  <div class="factory-header">
    <section class="menu1">
      <FactorySelect
        :companyName="companyName"
        :companyId="companyId"
        @updateCompany="updateCompany"
      />
    </section>
    <section class="menu2">
      <CopilotButton
        v-for="i in ['日', '周', '月', '年']"
        :key="i"
        :label="i"
        :active="i === period"
        @click="() => $emit('update:period', i)"
      />
      <div class="btn-group">
        <button type="button" class="export-btn" />
        <button
          type="button"
          class="fullscreen-btn"
          :class="[isFullscreen ? 'exit-fullscreen' : '']"
          @click="toggleFullScreen"
        />
      </div>
    </section>
    <div class="page-title">{{ companyName }}</div>
  </div>
 </template>

 <script>
 import CopilotButton from "./button.vue";
 import FactorySelect from "./FactorySelect.vue";
 import screenfull from "screenfull";

 export default {
  name: "FactoryDataHeader",
  components: { CopilotButton, FactorySelect },
  props: {
    companyName: {
      type: String,
    },
    companyId: {
      type: String,
    },
    period: {
      type: String,
    },
  },
  data() {
    return {
      isFullscreen: false,
    };
  },
  computed: {},
  methods: {
    toggleFullScreen() {
      this.isFullscreen = !this.isFullscreen;

      screenfull.toggle(document.querySelector(".factory-layout"));
      // 矫正宽度
      // const el = document.querySelector(".factory-layout");
      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
      // el.style.left = this.isFullscreen ? "0" : "54px";
    },
    updateCompany(obj) {
      this.$emit("updateCompany", obj);
    },
  },
 };
 </script>

 <style scoped>
@font-face {
  font-family: 优设标题黑;
  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
 }

 .factory-header {
  display: flex;
  gap: 12px;
  align-items: center;
 }

 .factory-header > .menu1 {
  width: 24vw;
  /* display: flex;
  align-items: center;
  gap: 8px; */
 }
 .factory-header > .menu2 {
  width: 30vw;
  display: flex;
  align-items: center;
  gap: 8px;
 }

 .export-btn,
 .fullscreen-btn {
  width: 32px;
  height: 32px;
  margin-left: 24px;
  cursor: pointer;
 }

 .export-btn {
  background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
    no-repeat;
 }

 .fullscreen-btn {
  background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
    no-repeat;
 }
 .exit-fullscreen {
  background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 /
    100% 100% no-repeat;
 }

 .page-title {
  flex: 1;
  font-size: 40px;
  line-height: 70px;
  letter-spacing: 5px;
  font-family: 优设标题黑;
  color: #6db6ff;
  text-align: right;
  user-select: none;
 }
 </style>
--- a/src/views/copilot/components/FactorySelect.vue
+++ b/src/views/copilot/components/FactorySelect.vue
@@ -0,0 +1,137 @@
 <template>
  <div class="factory-select">
    <div class="label-box" @click="openList">
      <span>{{ companyName }}</span>
      <span
        class="triangle"
        :style="{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }"
      ></span>
    </div>
    <div class="option-list" v-show="isOpen">
      <div
        v-for="item in company"
        :key="item.id"
        @click="chooseCompany(item.id, item.name)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: "FactorySelect",
  props: {
    companyName: {
      type: String,
    },
    companyId: {
      type: String,
    },
  },
  data() {
    return {
      isOpen: false,
      company: [
        { id: "1", name: "瑞昌中建材光电材料有限公司" },
        { id: "2", name: "邯郸中建材光电材料有限公司" },
        { id: "3", name: "株洲中建材光电材料有限公司" },
        { id: "4", name: "佳木斯中建材光电材料有限公司" },
        { id: "5", name: "成都中建材光电材料有限公司" },
        { id: "6", name: "凯盛中建材光电材料有限公司" },
        { id: "7", name: "蚌埠中建材光电材料有限公司" },
      ],
    };
  },
  methods: {
    openList() {
      this.isOpen = !this.isOpen;
    },
    chooseCompany(id, name) {
      // this.companyId = id;
      // this.companyName = name;
      this.$emit("updateCompany", { companyName: name, companyId: id });
      this.isOpen = false;
    },
  },
 };
 </script>
 <style lang="scss" scoped>
 .factory-select {
  width: 100%;
  position: relative;
  .label-box {
    flex: 1;
    position: relative;
    background: #006acd40;
    backdrop-filter: blur(3px);
    padding: 12px;
    padding-left: 20px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
  .label-box::before,
  .label-box::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    background: transparent;
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
    border-top-color: #007be4;
  }

  .label-box::before {
    left: 0;
    border-left-color: #007be4;
  }

  .label-box::after {
    right: 0;
    border-right-color: #007be4;
  }
  .triangle {
    position: absolute;
    right: 15px;
    top: 18px;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #1d74d8;
  }
  .option-list {
    width: 100%;
    position: absolute;
    z-index: 1000;
    div {
      padding-left: 23px;
      font-size: 20px;
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: rgba(1, 34, 86, 0.8);
      cursor: pointer;
    }
    div:hover {
      background-color: rgba(0, 106, 205, 0.61);
    }
  }
  .option-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 34, 86, 0.9);
    filter: blur(2px);
    z-index: -1;
  }
 }
 </style>
--- a/src/views/copilot/factoryData/assets/images/bipv.png
+++ b/src/views/copilot/factoryData/assets/images/bipv.png
--- a/src/views/copilot/factoryData/assets/images/chip.png
+++ b/src/views/copilot/factoryData/assets/images/chip.png
--- a/src/views/copilot/factoryData/assets/images/fto.png
+++ b/src/views/copilot/factoryData/assets/images/fto.png
--- a/src/views/copilot/factoryData/assets/images/std.png
+++ b/src/views/copilot/factoryData/assets/images/std.png
--- a/src/views/copilot/factoryData/components/Container.vue
+++ b/src/views/copilot/factoryData/components/Container.vue
@@ -0,0 +1,232 @@
 <!-- 
    filename: Container.vue
    author: liubin
    date: 2024-04-09 10:44:09
    description: 
 -->

 <template>
  <div class="copilot-container">
    <!-- refresh btn  -->
    <button
      v-if="false"
      style="
        appearance: none;
        outline: none;
        border: none;
        background: none;
        color: #fff;
        cursor: pointer;
        position: absolute;
        top: 8px;
        right: 8px;
      "
      @click="$emit('refresh')"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        style="width: 24px; height: 24px"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
        />
      </svg>
    </button>
    <!-- decoration  -->
    <div class="corner tl"></div>
    <div class="corner tr"></div>
    <div v-if="side == 'left'" class="corner bl"></div>
    <div v-if="side == 'right'" class="corner br"></div>
    <!-- content  -->
    <div
      class="container-head"
      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
    >
      <Icon :icon="icon"></Icon>
      <h2 class="container-title">{{ title }}</h2>
    </div>
    <div
      class="container-body"
      :class="[
        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
      ]"
    >
      <slot />
    </div>
  </div>
 </template>

 <script>
 import ContainerIconVue from "./ContainerIcon.vue";
 export default {
  name: "DashboardContainer",
  components: {
    Icon: ContainerIconVue,
  },
  props: {
    side: {
      type: String,
      default: "left",
    },
    icon: {
      type: String,
      default: "cube",
    },
    title: {
      type: String,
      default: "Default Title",
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
 };
 </script>

 <style scoped lang="scss">
 .copilot-container {
  height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 20px 1px #fff1;
  backdrop-filter: blur(4px);

  &::before {
    content: "";
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 0.11415vw;
    border-radius: 2px;
    top: 0%;
    left: 0;
    background: radial-gradient(
      circle at center,
      #024798 2%,
      #024798 30%,
      transparent
    );
    z-index: 1;
  }

  &::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 60%;
    height: 0.31415vh;
    border-radius: 2px;
    left: 8%;
    bottom: 0;
    background: linear-gradient(to right, #024798, transparent);
    z-index: 0;
  }

  .container-head {
    // height: 40px;
    height: 3.8vh;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;

    .container-title {
      font-size: 1.18vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
    }
  }

  .container-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 0;
  }

  .corner {
    z-index: 1;
    position: absolute;
    // width: 16px;
    // height: 16px;
    width: 0.95vw;
    height: 0.95vw;
  }

  .corner.tl {
    border-top: 2px solid #0175dc;
    border-left: 2px solid #0175dc;
    top: 0;
    left: 0;
  }

  .corner.tr {
    top: 0;
    right: 0;
    border-top: 2px solid #0175dc;
    border-right: 2px solid #0175dc;
  }

  .corner.bl {
    // width: 20px;
    // height: 20px;
    width: 1.064vw;
    height: 1.064vw;
    bottom: 0;
    left: 0;
    // border-left: 10px solid #0175dc;
    // border-bottom: 10px solid #0175dc;
    // border-top: 10px solid transparent;
    // border-right: 10px solid transparent;
    border-left: 0.532vw solid #0175dc;
    border-bottom: 0.532vw solid #0175dc;
    border-top: 0.532vw solid transparent;
    border-right: 0.532vw solid transparent;
  }

  .corner.br {
    bottom: 0;
    right: 0;
    // width: 20px;
    // height: 20px;
    width: 1.064vw;
    height: 1.064vw;
    // border-left: 10px solid transparent;
    // border-bottom: 10px solid #0175dc;
    // border-top: 10px solid transparent;
    // border-right: 10px solid #0175dc;
    border-left: 0.532vw solid transparent;
    border-bottom: 0.532vw solid #0175dc;
    border-top: 0.532vw solid transparent;
    border-right: 0.532vw solid #0175dc;
  }

  .gradient-to-right {
    background: linear-gradient(to right, #0c3f68cc, transparent);
  }

  .gradient-to-left {
    background: linear-gradient(to left, #0c3f68cc, transparent);
  }

  .body-gradient-to-right {
    background: linear-gradient(to right, #0003, transparent);
  }

  .body-gradient-to-left {
    background: linear-gradient(to left, #0003, transparent);
  }
 }
 </style>
--- a/src/views/copilot/factoryData/components/ContainerIcon.vue
+++ b/src/views/copilot/factoryData/components/ContainerIcon.vue
@@ -0,0 +1,56 @@
 <!-- 
    filename: ContainerIcon.vue
    author: liubin
    date: 2024-04-09 16:41:36
    description: 
 -->

 <template>
  <div class="container-icon" :style="bgStyle"></div>
 </template>

 <script>
 import prod from "@/assets/images/companyData/prod-minor.png";
 import store from "@/assets/images/companyData/store.png";
 import energy from "@/assets/images/companyData/energy.png";
 import order from "@/assets/images/companyData/order.png";

 export default {
  name: "ContainerIcon",
  components: {},
  props: {
    icon: {
      type: String,
      default: "prod",
    },
  },
  data() {
    return {};
  },
  computed: {
    bgStyle() {
      return {
        prod:
          "background: url(" + prod + ") no-repeat center center / 100% 100%",
        store:
          "background: url(" + store + ") no-repeat center center / 100% 100%",
        energy:
          "background: url(" + energy + ") no-repeat center center / 100% 100%",
        order:
          "background: url(" + order + ") no-repeat center center / 100% 100%",
      }[this.icon];
    },
  },
  methods: {},
 };
 </script>

 <style scoped lang="scss">
 .container-icon {
  //   width: 32px;
  //   height: 32px;
  width: 1.701vw;
  height: 1.701vw;
  background: #ccc2;
 }
 </style>
--- a/src/views/copilot/factoryData/components/Energy.vue
+++ b/src/views/copilot/factoryData/components/Energy.vue
@@ -0,0 +1,371 @@
 <template>
  <div class="left-chart-base">
    <div class="legend">
      <span
        v-for="item in legend"
        :key="item.label"
        class="legend-item"
        :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
        >{{ item.label }}</span
      >
    </div>
    <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
  </div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
 export default {
  name: "Energy",
  props: {
    vHeight: {
      type: Number,
      default: 34,
    },
    legend: {
      type: Array,
      required: true,
    },
    xAxis: {
      type: Array,
      required: true,
    },
    series: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      isFullscreen: false,
      actualOptions: null,
      chart: "",
      options: {
        color: ["#FFD160", "#2760FF", "#12FFF5"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0",
          top: "15%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#4561AE",
            },
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.7)",
            fontSize: 12,
          },
          data: this.xAxis,
        },
        yAxis: [
          {
            type: "value",
            name: "KW/h",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.7)",
              fontSize: 12,
              align: "right",
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.7)",
              fontSize: 12,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4561AE",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#4561AE",
              },
            },
          },
          {
            type: "value",
            name: "m³/h",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.7)",
              fontSize: 12,
              align: "left",
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 0.7)",
              fontSize: 12,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4561AE",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#4561AE",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            data: [],
            type: "line",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FFD160" + "80" },
                { offset: 0.5, color: "#FFD160" + "20" },
                { offset: 1, color: "#FFD160" + "00" },
              ]),
            },
            lineStyle: {
              width: 2,
            },
            symbol: "circle",
            symbolSize: 8,
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "",
            data: [],
            type: "line",
            yAxisIndex: 1,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2760FF" + "80" },
                { offset: 0.5, color: "#2760FF" + "20" },
                { offset: 1, color: "#2760FF" + "00" },
              ]),
            },
            lineStyle: {
              width: 2,
            },
            symbol: "circle",
            symbolSize: 8,
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "",
            data: [],
            type: "line",
            yAxisIndex: 1,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#12FFF5" + "80" },
                { offset: 0.5, color: "#12FFF5" + "20" },
                { offset: 1, color: "#12FFF5" + "00" },
              ]),
            },
            lineStyle: {
              width: 2,
            },
            symbol: "circle",
            symbolSize: 8,
            emphasis: {
              focus: "series",
            },
          },
        ],
      },
    };
  },
  watch: {
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    // isFullscreen(val) {
    //   this.actualOptions.series.map((item) => {
    //     item.barWidth = val ? 18 : 12;
    //   });
    //   this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
    //   this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
    //   this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
    //   this.initOptions(this.actualOptions);
    // },
    // series(val) {
    //   if (!val) {
    //     this.initOptions(this.options);
    //     return;
    //   }
    //   const actualOptions = JSON.parse(JSON.stringify(this.options));
    //   actualOptions.series[0].data = val[0].data;
    //   actualOptions.series[0].name = val[0].name;
    //   actualOptions.series[1].data = val[1].data;
    //   actualOptions.series[1].name = val[1].name;
    //   actualOptions.series[2].data = val[2].data;
    //   actualOptions.series[2].name = val[2].name;
    //   this.actualOptions = actualOptions;
    //   this.initOptions(actualOptions);
    // },
  },
  mounted() {
    // if (screenfull.isEnabled) {
    //   screenfull.on("change", () => {
    //     this.isFullscreen = screenfull.isFullscreen;
    //   });
    // }
    this.canvasReset();
    window.addEventListener("resize", this.canvasReset);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.canvasReset);
  },
  methods: {
    canvasReset() {
      debounce(() => {
        this.initChart();
      }, 500)();
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
      const actualOptions = JSON.parse(JSON.stringify(this.options));
      actualOptions.series[0].data = this.series[0].data;
      actualOptions.series[0].name = this.series[0].name;
      actualOptions.series[1].data = this.series[1].data;
      actualOptions.series[1].name = this.series[1].name;
      actualOptions.series[2].data = this.series[2].data;
      actualOptions.series[2].name = this.series[2].name;
      this.actualOptions = actualOptions;
      this.chart.setOption(actualOptions);
    },
  },
 };
 </script>
 <style scoped lang="scss">
 .left-chart-base {
  // position: relative;
  height: 100%;

  .legend {
    position: absolute;
    top: 5.2vh;
    right: 4vw;
  }

  .legend-item {
    position: relative;
    // font-size: 12px;
    margin-right: 1.34vw;

    &::before {
      content: "";
      display: inline-block;
      // width: 10px;
      // height: 10px;
      width: 0.531vw;
      height: 0.531vw;
      background-color: #ccc;
      border-radius: 2px;
      margin-right: 0.22vw;
    }
  }
  .legend-item:nth-child(1):before {
    // width: 12px;
    // height: 2px;
    width: 0.638vw;
    height: 0.1064vw;
    background-color: #ffd160;
    position: absolute;
    top: 50%;
    // left: -16px;
    left: -0.851vw;
    transform: translateY(-50%);
  }
  .legend-item:nth-child(1):after {
    background-color: #ffd160;
    content: "";
    display: inline-block;
    position: absolute;
    // width: 6px;
    // height: 6px;
    width: 0.3191vw;
    height: 0.3191vw;
    border-radius: 100%;
    top: 50%;
    left: -0.851vw;
    // left: -16px;
    transform: translateY(-50%) translateX(50%);
  }
  .legend-item:nth-child(2):before {
    // width: 12px;
    // height: 2px;
    width: 0.638vw;
    height: 0.1064vw;
    background-color: #2760ff;
    position: absolute;
    top: 50%;
    // left: -16px;
    left: -0.851vw;
    transform: translateY(-50%);
  }
  .legend-item:nth-child(2):after {
    background-color: #2760ff;
    content: "";
    display: inline-block;
    position: absolute;
    // width: 6px;
    // height: 6px;
    width: 0.3191vw;
    height: 0.3191vw;
    border-radius: 100%;
    top: 50%;
    left: -0.851vw;
    // left: -16px;
    transform: translateY(-50%) translateX(50%);
  }
  .legend-item:nth-child(3):before {
    // width: 12px;
    // height: 2px;
    width: 0.638vw;
    height: 0.1064vw;
    background-color: #12fff5;
    position: absolute;
    top: 50%;
    // left: -16px;
    left: -0.851vw;
    transform: translateY(-50%);
  }
  .legend-item:nth-child(3):after {
    background-color: #12fff5;
    content: "";
    display: inline-block;
    position: absolute;
    // width: 6px;
    // height: 6px;
    width: 0.3191vw;
    height: 0.3191vw;
    border-radius: 100%;
    top: 50%;
    left: -0.851vw;
    // left: -16px;
    transform: translateY(-50%) translateX(50%);
  }
 }
 </style>
--- a/src/views/copilot/factoryData/components/Order.vue
+++ b/src/views/copilot/factoryData/components/Order.vue
@@ -0,0 +1,77 @@
 <template>
  <dv-scroll-board
    v-if="aa"
    :config="config"
    style="width: 100%; height: 100%"
  />
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 export default {
  name: "Order",
  data() {
    return {
      aa: true,
      config: {
        header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
        headerBGC: "rgba(0, 106, 205, 0.22)",
        oddRowBGC: "rgba(0, 106, 205, 0.22)",
        evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
        data: [],
        rowNum: 12,
        waitTime: 3000,
        columnWidth: [50],
        align: ["center"],
        carousel: "page",
      },
    };
  },
  mounted() {
    this.getTableList();
    this.tableReset();
    window.addEventListener("resize", this.tableReset);
  },
  methods: {
    tableReset() {
      this.aa = false;
      debounce(() => {
        this.initTable();
      }, 500)();
    },
    initTable() {
      this.aa = true;
    },
    getTableList() {
      let _this = this;
      setTimeout(
        (function name() {
          _this.config.data = [
            ["1", "行1列1", "行1列2", "行1列3", "50%"],
            ["2", "行2列1", "行2列2", "行2列3", "50%"],
            ["3", "行3列1", "行3列2", "行3列3", "50%"],
            ["4", "行4列1", "行4列2", "行4列3", "50%"],
            ["5", "行5列1", "行5列2", "行5列3", "50%"],
            ["6", "行6列1", "行6列2", "行6列3", "50%"],
            ["7", "行7列1", "行7列2", "行7列3", "50%"],
            ["8", "行8列1", "行8列2", "行8列3", "50%"],
            ["9", "行9列1", "行9列2", "行9列3", "50%"],
            ["10", "行10列1", "行10列2", "行10列3", "50%"],
            ["11", "行11列1", "行11列2", "行11列3", "50%"],
            ["12", "行12列1", "行12列2", "行12列3", "50%"],
            ["13", "行13列1", "行13列2", "行13列3", "50%"],
            ["14", "行14列1", "行14列2", "行14列3", "50%"],
            ["15", "行15列1", "行15列2", "行15列3", "50%"],
            ["16", "行16列1", "行16列2", "行16列3", "50%"],
            ["17", "行17列1", "行17列2", "行17列3", "50%"],
            ["18", "行18列1", "行18列2", "行18列3", "50%"],
            ["19", "行19列1", "行19列2", "行19列3", "50%"],
            ["20", "行20列1", "行20列2", "行20列3", "50%"],
          ];
        })(),
        2000
      );
      this.initTable();
    },
  },
 };
 </script>
--- a/src/views/copilot/factoryData/components/ProdMonitor.vue
+++ b/src/views/copilot/factoryData/components/ProdMonitor.vue
@@ -0,0 +1,272 @@
 <template>
  <div class="prod-monitor">
    <div class="fto-box">
      <div class="icon">
        <img
          src="./../assets/images/fto.png"
          alt=""
          style="width: 2.1875vw; height: 2.2875vw"
        />
      </div>
      <div class="middle-box">
        <span class="type">玻璃类型</span>
        <span class="type-name">FTO投入</span>
      </div>
      <div class="right-box">
        <span class="type">投入数量</span>
        <span class="num">8391222</span>
      </div>
    </div>
    <div class="std-box">
      <div class="icon">
        <img
          src="./../assets/images/std.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">标准组检产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">740</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">783</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num">96%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="chip-box">
      <div class="icon">
        <img
          src="./../assets/images/chip.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">芯片产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">740</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">783</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num">96%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bipv-box">
      <div class="icon">
        <img
          src="./../assets/images/bipv.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">BIPV产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">740</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">783</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num">96%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: "ProdMonitor",
 };
 </script>
 <style lang="scss" scoped>
 .prod-monitor {
  height: 100%;
  display: flex;
  gap: 6px;
  flex-direction: column;
  .fto-box,
  .std-box,
  .chip-box,
  .bipv-box {
    box-shadow: inset 0 0 12px 2px #fff3;
    border-radius: 4px;
    display: flex;
    align-items: center;
    .icon {
      flex: 1;
      text-align: center;
    }
    .middle-box {
      flex: 2.086;
      position: relative;
    }
    .right-box {
      flex: 2.424;
      position: relative;
    }
    .type {
      display: inline-block;
      font-size: 0.9375vw;
      color: #6db6ff;
      position: relative;
      text-align: right;
      padding-right: 0.417vw;
      letter-spacing: 2px;
      width: 6.25vw;
    }
    .type1 {
      display: inline-block;
      font-size: 0.9375vw;
      color: #6db6ff;
      position: relative;
      text-align: right;
      padding-right: 0.6vw;
      width: 6.25vw;
      padding-left: 1.6vw;
      text-align: justify;
      text-align-last: justify;
    }
    .type-name {
      font-size: 1.042vw;
      color: #fff;
      position: relative;
      text-align: left;
      padding-left: 0.573vw;
    }
    .type-name::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.042vw;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1)
        )
        2 2;
      position: absolute;
      left: 0;
      top: 4px;
    }
    .num {
      font-size: 1.042vw;
      color: #fff;
      position: relative;
      text-align: left;
      padding-left: 0.573vw;
    }
    .num::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.042vw;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1)
        )
        2 2;
      position: absolute;
      left: 0;
      top: 4px;
    }
  }
  .fto-box {
    flex: 1;
    .type::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.6146vw;
      border: 1px solid;
      border-image: linear-gradient(
          135deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1),
          rgba(31, 143, 255, 0)
        )
        2 2;
      position: absolute;
      left: 0;
      top: -2px;
    }
  }
  .std-box {
    flex: 1.3;
  }
  .chip-box {
    flex: 1.3;
  }
  .bipv-box {
    flex: 1.3;
  }
  .std-box,
  .chip-box,
  .bipv-box {
    .separate::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 3.125vw;
      border: 1px solid;
      border-image: linear-gradient(
          135deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1),
          rgba(31, 143, 255, 0)
        )
        2 2;
      position: absolute;
      left: 0;
      top: -2px;
    }
  }
 }
 </style>
--- a/src/views/copilot/factoryData/components/Store.vue
+++ b/src/views/copilot/factoryData/components/Store.vue
@@ -0,0 +1,170 @@
 <template>
  <div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
 export default {
  name: "Store",
  props: {
    vHeight: {
      type: Number,
      default: 34,
    },
    xAxis: {
      type: Array,
      required: true,
    },
    series: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      isFullscreen: false,
      actualOptions: null,
      chart: "",
      options: {
        grid: {
          left: "3%",
          right: "1%",
          bottom: "0",
          top: "10%",
          containLabel: true,
        },
        tooltip: {},
        xAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#4561AE",
            },
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.7)",
            fontSize: 12,
          },
          data: this.xAxis,
        },
        yAxis: {
          name: "单位/片",
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.7)",
            fontSize: 12,
            align: "right",
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.7)",
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4561AE",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#4561AE",
            },
          },
        },
        series: [
          {
            name: "", // this.series[0].name,
            type: "bar",
            barWidth: 12,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#12f7f1", // 0% 处的颜色
                  },
                  {
                    offset: 0.35,
                    color: "#12f7f177", // 100% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: "#12f7f133", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: [], // this.series[0].data,
          },
        ],
      },
    };
  },
  watch: {
    series(val) {
      if (!val) {
        this.initOptions(this.options);
        return;
      }
      const actualOptions = JSON.parse(JSON.stringify(this.options));
      actualOptions.series[0].data = val[0].data;
      actualOptions.series[0].name = val[0].name;
      actualOptions.series[1].data = val[1].data;
      actualOptions.series[1].name = val[1].name;
      this.actualOptions = actualOptions;
      this.initOptions(actualOptions);
    },
  },
  mounted() {
    // if (screenfull.isEnabled) {
    //   screenfull.on("change", () => {
    //     this.isFullscreen = screenfull.isFullscreen;
    //   });
    // }
    this.canvasReset();
    window.addEventListener("resize", this.canvasReset);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.canvasReset);
  },
  methods: {
    canvasReset() {
      debounce(() => {
        this.initChart();
      }, 500)();
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(document.getElementById("factoryStoreChart"));
      const actualOptions = JSON.parse(JSON.stringify(this.options));
      actualOptions.series[0].data = this.series[0].data;
      actualOptions.series[0].name = this.series[0].name;
      this.actualOptions = actualOptions;
      this.chart.setOption(actualOptions);
    },
  },
 };
 </script>
 <style></style>
--- a/src/views/copilot/factoryData/index.vue
+++ b/src/views/copilot/factoryData/index.vue
@@ -0,0 +1,186 @@
 <template>
  <div class="factory-layout">
    <FactoryDataHeader
      :companyName="companyName"
      :companyId="companyId"
      :period="period"
      @updateCompany="updateCompany"
      @update:period="period = $event"
    />
    <div class="factory-section">
      <section class="top flex">
        <db-container title="生产监控" icon="prod">
          <prod-monitor />
        </db-container>
        <db-container title="仓库监控.当前" icon="store">
          <store :series="series" :xAxis="xAxis" />
        </db-container>
      </section>
      <section class="bottom flex">
        <db-container title="能源监控" icon="energy">
          <energy
            :legend="energyLegend"
            :series="energySeries"
            :xAxis="energyxAxis"
          />
        </db-container>
        <db-container title="订单监控" icon="order">
          <order />
        </db-container>
      </section>
    </div>
    <div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
  </div>
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
 import Container from "./components/Container.vue";
 import ProdMonitor from "./components/ProdMonitor.vue";
 import Store from "./components/Store.vue";
 import Energy from "./components/Energy.vue";
 import Order from "./components/Order.vue";
 import { cockpitDataMonitor } from "@/api/produceData";
 export default {
  name: "FactoryData",
  components: {
    FactoryDataHeader,
    DbContainer: Container,
    ProdMonitor,
    Store,
    Energy,
    Order,
  },
  data() {
    const year = new Date().getFullYear();
    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
    return {
      companyId: "1",
      companyName: "瑞昌中建材光电材料有限公司",
      period: "日",

      energyLegend: [
        { label: "电", color: "#FFD160" },
        { label: "水", color: "#2760FF" },
        { label: "气", color: "#12FFF5" },
      ],
      energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],

      legend: [
        { label: `${year - 1}年`, color: "#12f7f1" },
        // { label: `${year}年`, color: "#58adfa" },
      ],
      xAxis: cities,
    };
  },
  computed: {
    energySeries() {
      return [
        {
          name: "电",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
        {
          name: "水",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
        {
          name: "气",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
      ];
    },
    series() {
      // const ftoInvest = this.$store.getters.home.ftoInvest;
      // if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
      return [
        {
          name: "2023年",
          data: Array.from({ length: 7 }, () =>
            Math.floor(Math.random() * 1000)
          ),
        },
      ];
      // }

      // return [
      //   {
      //     name: `${new Date().getFullYear() - 1}年`,
      //     data: ftoInvest.previous,
      //   },
      //   {
      //     name: `${new Date().getFullYear()}年`,
      //     data: ftoInvest.current,
      //   },
      // ];
    },
  },
  mounted() {
    this.getMes1();
  },
  methods: {
    updateCompany(obj) {
      this.companyId = obj.companyId;
      this.companyName = obj.companyName;
    },
    getMes1() {
      // cockpitDataMonitor({
      //   factorys: ["1"],
      //   date: 4,
      // }).then((res) => {
      //   console.log(res);
      // });
      cockpitDataMonitor().then((res) => {});
    },
  },
 };
 </script>
 <style lang="scss" scoped>
 .factory-layout {
  padding: 16px;
  background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
    no-repeat;
  position: absolute;
  height: calc(100% + 38px);
  left: -16px;
  top: -8px;
  width: calc(100% + 30px);
  z-index: 1001;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  .factory-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    .flex {
      display: flex;
      gap: 16px;
      flex: 1;
    }
    .top > div,
    .bottom > div {
      height: 100%;
    }
  }
  .factory-footer {
    /** position: absolute;
  bottom: 10px; **/
    height: 10px;
    width: 100%;
    color: rgb(80, 80, 80);
    user-select: none;
    font-size: 14px;
    letter-spacing: 1px;
    display: grid;
    place-content: center;
  }
 }
 </style>
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -9,7 +9,7 @@
          class="welcome"
          style="
            position: absolute;
            top: 15%;
            top: 12%;
            left: 20%;
            user-select: none;
            display: flex;
@@ -51,6 +51,11 @@
            向世界先进水平挑战，为人类社会文明做贡献
          </p>
        </div>
        <img
          src="../assets/images/login.png"
          style="position: absolute; top: 30%; left: 15%; width: 40vw"
          alt=""
        />
      </div>
      <!-- 表单 -->
      <div class="field">
@@ -64,7 +69,7 @@
            style=""
            class="cnbm_logo"
          />
          <h3 class="title" style="margin: 16px 0;">集团工业互联网平台</h3>
          <h3 class="title" style="margin: 16px 0">发电玻璃智能管控平台</h3>
        </h2>
        <h2 class="pc-title" style="">
          <img
@@ -75,7 +80,9 @@
            style=""
            class="cnbm_logo"
          />
          <span style="font-weight: bold; letter-spacing: 1px; font-size: 32px;">集团工业互联网平台</span>
          <span style="font-weight: bold; letter-spacing: 1px; font-size: 32px"
            >发电玻璃智能管控平台</span
          >
        </h2>

        <!-- 表单 -->
@@ -164,7 +171,7 @@
        </div>
        <!-- footer -->
        <div class="footer">
          Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved.
          版权所有：中建材智能自动化研究院有限公司&nbsp;&nbsp;&nbsp;版本：1.0
        </div>
      </div>
    </div>
--- a/yarn.lock
+++ b/yarn.lock
@@ -972,6 +972,13 @@
  dependencies:
    regenerator-runtime "^0.14.0"

 "@babel/runtime@^7.5.5":
  version "7.24.5"
  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
  dependencies:
    regenerator-runtime "^0.14.0"

 "@babel/template@^7.22.15", "@babel/template@^7.23.9", "@babel/template@^7.24.0":
  version "7.24.0"
  resolved "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz"
@@ -1064,6 +1071,51 @@
    wrap-ansi "^8.1.0"
    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"

 "@jiaminghi/bezier-curve@*":
  version "0.0.9"
  resolved "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz#5196aca93c8b061a612b4c3eabcedf9490cef6ee"
  integrity sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==
  dependencies:
    "@babel/runtime" "^7.5.5"

 "@jiaminghi/c-render@^0.4.3":
  version "0.4.3"
  resolved "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz#982ebd8f71b443bb9507834227834973ebd9b6d8"
  integrity sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==
  dependencies:
    "@babel/runtime" "^7.5.5"
    "@jiaminghi/bezier-curve" "*"
    "@jiaminghi/color" "*"
    "@jiaminghi/transition" "*"

 "@jiaminghi/charts@*":
  version "0.2.18"
  resolved "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz#63ded95200789fc1a1fd04b7fd9e56f58d22d90f"
  integrity sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==
  dependencies:
    "@babel/runtime" "^7.5.5"
    "@jiaminghi/c-render" "^0.4.3"

 "@jiaminghi/color@*":
  version "1.1.3"
  resolved "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz#a2336750d1266155ffe80375c58c26fdec495611"
  integrity sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==

 "@jiaminghi/data-view@^2.10.0":
  version "2.10.0"
  resolved "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz#2146d8fc71b9f24be808238ca050ddb7a4c8949f"
  integrity sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==
  dependencies:
    "@babel/runtime" "^7.5.5"
    "@jiaminghi/charts" "*"

 "@jiaminghi/transition@*":
  version "1.1.11"
  resolved "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz#576d8af092434b34201eba5eaecc79dd33c8ad8c"
  integrity sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==
  dependencies:
    "@babel/runtime" "^7.5.5"

 "@jridgewell/gen-mapping@^0.3.5":
  version "0.3.5"
  resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"