update

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  parserOptions: {
+    parser: '@babel/eslint-parser'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.en.md

@@ -0,0 +1,36 @@
+# mingda-trade-web
+
+#### Description
+名达工艺-外贸端-web
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

README.md

@@ -0,0 +1,37 @@
+# mingda-trade-web
+
+#### 介绍
+名达工艺-外贸端-web
+
+#### 软件架构
+软件架构说明
+
+
+#### 安装教程
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 使用说明
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 参与贡献
+
+1.  Fork 本仓库
+2.  新建 Feat_xxx 分支
+3.  提交代码
+4.  新建 Pull Request
+
+
+#### 特技
+
+1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
+3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
+4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
+5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
+6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "foreign-trade-shopp",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
+    "axios": "^1.6.8",
+    "core-js": "^3.8.3",
+    "crypto-js": "^4.1.1",
+    "echarts": "^5.5.0",
+    "echarts4": "npm:echarts@^4.0.0",
+    "element-ui": "^2.15.14",
+    "moment": "^2.30.1",
+    "nprogress": "0.2.0",
+    "svg-sprite-loader": "^6.0.11",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vue-seamless-scroll": "^1.1.23",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "vue-template-compiler": "^2.6.14"
+  }
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>大数据分析系统</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+<script>
+</script>
+<style lang="scss">
+#app {
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
+}
+#nprogress .bar {
+  background: #4b8df8 !important;
+}
+body {
+  margin: 0;
+}
+</style>

src/api/amphiPosition.js

@@ -0,0 +1,30 @@
+import request from "@/utils/request";
+
+// 跨为分析
+
+//1.跨位汇总表
+export function zyjhzxTable(params) {
+  return request({
+    url: "/kban/zyjhzxTable",
+    method: "get",
+    params,
+  });
+}
+
+// 4.30天作业区完成情况折线图
+export function zyjhzx(params) {
+  return request({
+    url: "/kban/zyjhzx",
+    method: "get",
+    params,
+  });
+}
+
+// 5.本日各作业区计划完成情况
+export function today_zyjhzx(params) {
+  return request({
+    url: "/kban/today_zyjhzx",
+    method: "get",
+    params,
+  });
+}

src/api/forwardDemand.js

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+// 1.需求计划与分析
+export function qfxqTable(params) {
+  return request({
+    url: "/kban/qfxqTable",
+    method: "get",
+    params,
+  });
+}
+
+// 2.柱状图
+export function qfxqWc(params) {
+  return request({
+    url: "/kban/qfxqWc",
+    method: "get",
+    params,
+  });
+}

src/api/home.js

@@ -0,0 +1,84 @@
+import request from "@/utils/request";
+
+// 首页
+
+//获取商品列表
+export function goodsPage(params) {
+  return request({
+    url: "manage/trade/goodsPage.htm",
+    method: "post",
+    data: params,
+  });
+}
+
+// 获取品种列表
+export function breadlist(params) {
+  return request({
+    url: "manage/trade/breadlist.htm",
+    method: "get",
+    params,
+  });
+}
+
+// 获取使用分类
+export function uselist(params) {
+  return request({
+    url: "manage/trade/uselist.htm",
+    method: "get",
+    params,
+  });
+}
+
+// 获取节日列表
+export function festivalList(params) {
+  return request({
+    url: "manage/trade/festivalList.htm",
+    method: "get",
+    params,
+  });
+}
+
+// 加入外贸清单
+export function tradeSampleSave(params) {
+  return request({
+    url: "manage/trade/tradeShopSave.htm",
+    method: "post",
+    data: params,
+  });
+}
+
+// 加入外贸清单（校验商品是否存在）
+export function tradeShopSaveCheck(params) {
+  return request({
+    url: "manage/trade/tradeShopSaveCheck.htm",
+    method: "post",
+    data: params,
+  });
+}
+
+//获取外贸清单数量
+export function tradeShopList(params) {
+  return request({
+    url: "manage/trade/tradeShopList.htm",
+    method: "post",
+    data: params,
+  });
+}
+
+// 获取年份
+export function yearList(params) {
+  return request({
+    url: "manage/trade/yearList.htm",
+    method: "get",
+    params,
+  });
+}
+
+// 批量加入外贸清单
+export function yearLtradeShopListSaveByIdsist(params) {
+  return request({
+    url: "manage/trade/tradeShopListSaveByIds.htm",
+    method: "post",
+    data:params,
+  });
+}

src/api/lineTableAnalysis.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 线表分析
+export function kbanXbjh(params) {
+  return request({
+    url: "/kban/xbjh",
+    method: "get",
+    params,
+  });
+}

src/api/midSchedule.js

@@ -0,0 +1,11 @@
+import request from "@/utils/request";
+
+// 中日程分析
+// 汇总表
+export function qfxqTable(params) {
+  return request({
+    url: "/kban/qfxqTable",
+    method: "get",
+    params,
+  });
+}

src/api/realTimeMonitor.js

@@ -0,0 +1,68 @@
+import request from "@/utils/request";
+
+//实时监测
+
+// 1.考勤
+export function kq(params) {
+  return request({
+    url: "/kban/kq",
+    method: "get",
+    params,
+  });
+}
+
+// 3.实时消息
+export function msg(params) {
+  return request({
+    url: "/kban/msg",
+    method: "get",
+    params,
+  });
+}
+
+
+// 4.月度计划
+export function ydjh(params) {
+  return request({
+    url: "/kban/ydjh",
+    method: "get",
+    params,
+  });
+}
+
+// 5.作业计划
+export function zyjh(params) {
+  return request({
+    url: "/kban/zyjh",
+    method: "get",
+    params,
+  });
+}
+
+// 6.本月计划汇总量
+export function getEveryKw(params) {
+  return request({
+    url: "/kban/getEveryKw",
+    method: "get",
+    params,
+  });
+}
+
+// 7.作业区执行情况
+export function zxqZxDetail(params) {
+  return request({
+    url: "/kban/zxqZxDetail",
+    method: "get",
+    params,
+  });
+}
+
+
+// 8.作业区计划量完成量对比饼图
+export function zxqwcqk(params) {
+  return request({
+    url: "/kban/zxqwcqk",
+    method: "get",
+    params,
+  });
+}

src/components/AmphiPosition/index.vue

@@ -0,0 +1,825 @@
+<template>
+  <!-- 垮位分析 -->
+  <div class="amphiPosition-container">
+    <!-- 筛选 -->
+    <div class="formData-box">
+      <el-form ref="form" :model="formData" label-width="90px">
+        <el-form-item label="请选择年份" size="mini">
+          <el-select v-model="formData.year" placeholder="">
+            <el-option label="2024" :value="2024"></el-option>
+            <el-option label="2025" :value="2025"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="query-btn" @click="queryBtn">确定</div>
+    </div>
+    <div class="amphiPosition-box">
+      <div class="left-box">
+        <div class="border-out">
+          <div class="border-inner">
+            <!-- 表格 -->
+            <div class="left-top-box">
+              <table class="table-sum">
+                <tr>
+                  <td class="radius">月度计划总张数</td>
+                  <td class="radius" colspan="3">{{ tableSumObj.zs }}张</td>
+                </tr>
+                <tr>
+                  <td>上料张数</td>
+                  <td colspan="3">{{ tableSumObj.sl }}张</td>
+                </tr>
+                <tr>
+                  <td>跨位</td>
+                  <td>作业区</td>
+                  <td>计划张数</td>
+                  <td>完成张数</td>
+                </tr>
+                <tr v-for="(item, index) in tableSumObj.detail" :key="index">
+                  <td>{{ item.kw }}</td>
+                  <td>{{ item.zyq }}</td>
+                  <td>{{ item.sl }}张</td>
+                  <td>{{ item.wc }}张</td>
+                </tr>
+              </table>
+              <div class="desc-title" style="margin-top: 2%">垮位汇总表</div>
+            </div>
+            <!-- 切割饼图 -->
+            <div class="left-center-box">
+              <div id="loaderPie" class="loaderPie"></div>
+              <div id="cutOnePie" class="cutOnePie"></div>
+              <div id="cutSecondPie" class="cutSecondPie"></div>
+              <div id="cutThreePie" class="cutThreePie"></div>
+              <div id="cutSumPie" class="cutSumPie"></div>
+            </div>
+
+            <!-- 上料及各做业务区柱状图 -->
+            <div class="left-bottom-box">
+              <div id="loaderBar" class="loaderBar"></div>
+              <div class="desc-title">各工作区完成计划工张数数据分析</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="border-out">
+          <div class="border-inner">
+            <!-- 折线图 -->
+            <div class="right-top-box">
+              <div id="TableLine" class="TableLine"></div>
+              <div class="desc-title">30天作业区完成情况</div>
+            </div>
+            <!-- 文字描述 -->
+            <div class="right-center-box">
+              <div class="right-center-title">
+                一区 计划：{{ tableConfigObj.jh }}张 到货检査：{{
+                  tableConfigObj.jc
+                }}张 上料:{{ tableConfigObj.sl }}张
+              </div>
+            </div>
+            <!-- 滚动列表 -->
+            <div class="right-bottom-box">
+              <dv-scroll-board ref="tableConfig" :config="tableConfig" />
+              <div class="desc-title">本日各作业区计划完成情况</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { zyjhzxTable, zyjhzx, today_zyjhzx } from "@/api/amphiPosition";
+export default {
+  name: "AmphiPosition",
+  data() {
+    return {
+      formData: {
+        year: 2024,
+      },
+      tableSumObj: {},
+      tableConfig: {
+        header: ["作业区", "船号", "批量", "分段", "套料图号", "状态"],
+        data: [],
+        rowNum: 6,
+        align: ["center"],
+        headerHeight: 35,
+        headerBGC: "#063079",
+        oddRowBGC: "",
+        evenRowBGC: "#12264f",
+      },
+      tableConfigObj: {},
+    };
+  },
+  created() {
+    this.queryBtn();
+  },
+  methods: {
+    // 根据年份查询
+    queryBtn() {
+      this.zyjhzxTable(); //垮位汇总表
+      this.zyjhzx(); //30天作业区完成情况折线图
+      this.today_zyjhzx(); //本日各作业区计划完成情况
+    },
+    zyjhzxTable() {
+      zyjhzxTable({
+        nf: this.formData.nf,
+      }).then((res) => {
+        this.tableSumObj = res.data;
+        let wclOneValue = 0;
+        let wcOneValue = 0;
+        let slOneValue = 0;
+        let wclSecondValue = 0;
+        let wcSecondValue = 0;
+        let slSecondValue = 0;
+        let wclThreeValue = 0;
+        let wcThreeValue = 0;
+        let slThreeValue = 0;
+        let wclSumValue = 0;
+        let wcSumValue = 0;
+        let slSumValue = 0;
+        // =======
+        let zyq1 = 0;
+        let zyq2 = 0;
+        let zyq3 = 0;
+        let zyq4 = 0;
+        //   切割饼图
+        this.loaderPie(res.data.zs - res.data.sl, res.data.sl);
+        res.data.detail.forEach((item) => {
+          if (item.kw == "一垮") {
+            wcOneValue += item.wc;
+            wclOneValue = (slOneValue += item.sl) - wcOneValue;
+            this.cutOnePie(wclOneValue, wcOneValue);
+          } else if (item.kw == "二垮") {
+            wcSecondValue += item.wc;
+            wclSecondValue = (slSecondValue += item.sl) - wcSecondValue;
+            this.cutSecondPie(wclSecondValue, wcSecondValue);
+          } else if (item.kw == "三垮") {
+            wcThreeValue += item.wc;
+            wclThreeValue = (slThreeValue += item.sl) - wcThreeValue;
+            this.cutThreePie(wclThreeValue, wcThreeValue);
+          } else if (item.kw == "四五六垮") {
+            wcSumValue += item.wc;
+            wclSumValue = (slSumValue += item.sl) - wcSumValue;
+            this.cutSumPie(wclSumValue, wcSumValue);
+          }
+          // =================
+          if (item.zyq == "一区") {
+            zyq1 += item.sl;
+          } else if (item.zyq == "二区") {
+            zyq2 += item.sl;
+          } else if (item.zyq == "三区") {
+            zyq3 += item.sl;
+          } else if (item.zyq == "四区") {
+            zyq4 += item.sl;
+          }
+        });
+        let zyqDataY = [zyq1, zyq2, zyq3, zyq4];
+        var bgData = [res.data.zs, res.data.zs, res.data.zs, res.data.zs];
+        this.$nextTick(() => {
+          this.loaderBar(zyqDataY, bgData);
+        });
+      });
+    },
+    zyjhzx() {
+      zyjhzx({
+        nf: this.formData.nf,
+      }).then((res) => {
+        let dataX = [];
+        let dataY = [];
+        let legendData = [];
+        let seriesData = [];
+        res.data.forEach((item) => {
+          dataX.push(item.day);
+          dataY.push(item.sl);
+          legendData.push(item.zyq);
+          seriesData.push({
+            name: item.zyq,
+            type: "line",
+            stack: "Total",
+            data: item.sl,
+          });
+        });
+        //   折线图
+        this.TableLine(legendData, dataX, dataY, seriesData);
+      });
+    },
+    today_zyjhzx() {
+      today_zyjhzx({
+        nf: this.formData.nf,
+      }).then((res) => {
+        this.tableConfigObj = res.data;
+        let data = [];
+        if (res.data.detail.length) {
+          res.data.detail.forEach((item, index) => {
+            data.push({
+              zyq: item.zyq,
+              dcCh: item.dcCh,
+              dcPl: item.dcPl,
+              dcFd: item.dcFd,
+              tzbh: item.tzbh,
+              zt: item.zt,
+            });
+          });
+          let valueArray = data.map((obj) => Object.values(obj));
+          this.$nextTick(() => {
+            this.$refs["tableConfig"].updateRows(valueArray);
+          });
+        }
+      });
+    },
+    loaderPie(wclValue, wcValue) {
+      var myChart = this.$echarts.init(document.getElementById("loaderPie"));
+      var option = {
+        title: {
+          text: "上料分析",
+          left: "center",
+          bottom: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "normal",
+          },
+        },
+        color: ["#91cc75", "#5470c6"],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          left: "center",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        series: [
+          {
+            name: "上料",
+            type: "pie",
+            radius: "60%",
+            center: ["50%", "50%"],
+            minAngle: wcValue && wclValue ? 20 : "",
+            avoidLabelOverlap: true,
+            data: [
+              { value: wcValue, name: "完成" },
+              { value: wclValue, name: "未完成" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    cutOnePie(wclOneValue, wcOneValue) {
+      var myChart = this.$echarts.init(document.getElementById("cutOnePie"));
+
+      var option = {
+        title: {
+          text: "一垮分析",
+          left: "center",
+          bottom: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "normal",
+          },
+        },
+        color: ["#91cc75", "#fac858"],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          show: false,
+          left: "center",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          itemWidth: 20,
+          itemHeight: 12,
+        },
+        series: [
+          {
+            name: "一垮",
+            type: "pie",
+            radius: "60%",
+            center: ["50%", "50%"],
+            minAngle: wcOneValue && wclOneValue ? 20 : "",
+            avoidLabelOverlap: true,
+            data: [
+              { value: wcOneValue, name: "完成" },
+              { value: wclOneValue, name: "未完成" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    cutSecondPie(wclSecondValue, wcSecondValue) {
+      var myChart = this.$echarts.init(document.getElementById("cutSecondPie"));
+
+      var option = {
+        title: {
+          text: "二垮分析",
+          left: "center",
+          bottom: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "normal",
+          },
+        },
+        color: ["#fac858", "#ee6666"],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          show: false,
+          left: "center",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          itemWidth: 20,
+          itemHeight: 12,
+        },
+        series: [
+          {
+            name: "二垮",
+            type: "pie",
+            radius: "60%",
+            center: ["50%", "50%"],
+            minAngle: wcSecondValue && wclSecondValue ? 20 : "",
+            avoidLabelOverlap: true,
+            data: [
+              { value: wcSecondValue, name: "完成" },
+              { value: wclSecondValue, name: "未完成" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    cutThreePie(wclThreeValue, wcThreeValue) {
+      var myChart = this.$echarts.init(document.getElementById("cutThreePie"));
+
+      var option = {
+        title: {
+          text: "三垮分析",
+          left: "center",
+          bottom: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "normal",
+          },
+        },
+        color: ["#1afffd", "#2e7cff"],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          show: false,
+          left: "center",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        series: [
+          {
+            name: "三垮",
+            type: "pie",
+            radius: "60%",
+            center: ["50%", "50%"],
+            minAngle: wcThreeValue && wclThreeValue ? 20 : "",
+            data: [
+              { value: wcThreeValue, name: "完成" },
+              { value: wclThreeValue, name: "未完成" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    cutSumPie(wclSumValue, wcSumValue) {
+      var myChart = this.$echarts.init(document.getElementById("cutSumPie"));
+
+      var option = {
+        title: {
+          text: "四五六垮",
+          left: "center",
+          bottom: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "normal",
+          },
+        },
+        color: ["#ff81cb", "#2865aa"],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          left: "center",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        series: [
+          {
+            name: "四五六垮",
+            type: "pie",
+            radius: "60%",
+            center: ["50%", "50%"],
+            minAngle: wcSumValue && wclSumValue ? 20 : "",
+            data: [
+              { value: wcSumValue, name: "完成" },
+              { value: wclSumValue, name: "未完成" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    loaderBar(zyqDataY, bgData) {
+      var myChart = this.$echarts.init(document.getElementById("loaderBar"));
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+            lineStyle: {
+              color: "rgba(150,150,150,0.2)",
+              width: 70,
+              type: "solid",
+            },
+          },
+          formatter: (params) => {
+            var res = "";
+            res =
+              params[1].marker +
+              params[1].name +
+              "<br/>" +
+              params[0].seriesName +
+              "：" +
+              params[0].value +
+              "<br/>" +
+              params[1].seriesName +
+              "：" +
+              params[1].value;
+            return res;
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "3%",
+          right: "3%",
+          bottom: "0",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["一区", "二区", "三区", "四区"],
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+          },
+        ],
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#e4e4e4",
+          },
+          data: zyqDataY,
+        },
+        series: [
+          {
+            name: "总数量",
+            type: "bar",
+            barGap: "-100%",
+            label: {
+              show: false,
+            },
+            barWidth: 40,
+            itemStyle: {
+              color: "#2e7cff",
+            },
+            data: bgData, // 载入背景数据
+            z: 0,
+          },
+          {
+            name: "完成数量",
+            type: "bar",
+            barWidth: 40,
+            itemStyle: {
+              color: "#1afffd",
+            },
+            data: zyqDataY, // 载入数据(内含自定义参数)
+            z: 1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    TableLine(legendData, dataX, dataY, seriesData) {
+      var myChart = this.$echarts.init(document.getElementById("TableLine"));
+
+      var option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        color: [
+          "#e15828",
+          "#2e7cff",
+          "#00c0ef",
+          "#5470c6",
+          "#ffcb89",
+          "#3ba272",
+        ],
+        legend: {
+          data: legendData,
+          top: "5%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "2%",
+          top: "10%",
+          bottom: "3%",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: dataX,
+          axisLabel: {
+            color: "#e4e4e4",
+          },
+          nameTextStyle: {
+            color: "#e4e4e4",
+            fontSize: 12,
+            padding: [0, 0, 0, 0],
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#064585",
+            },
+          },
+          axisLabel: {
+            color: "#e4e4e4",
+          },
+          nameTextStyle: {
+            color: "#e4e4e4",
+            fontSize: 12,
+            padding: [0, 40, 10, 0],
+          },
+        },
+        series: [
+          {
+            name: "作业区1",
+            type: "line",
+            stack: "Total",
+            data: [
+              120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 4, 90,
+              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
+              230,
+            ],
+          },
+          {
+            name: "作业区2",
+            type: "line",
+            stack: "Total",
+            data: [
+              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
+              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
+              230,
+            ],
+          },
+          {
+            name: "作业区3",
+            type: "line",
+            stack: "Total",
+            data: [
+              120, 132, 101, 134, 130, 230, 210, 132, 101, 134, 90, 230, 4, 90,
+              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
+              230,
+            ],
+          },
+          {
+            name: "作业区4",
+            type: "line",
+            stack: "Total",
+            data: [
+              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
+              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
+              230,
+            ],
+          },
+          {
+            name: "作业区5",
+            type: "line",
+            stack: "Total",
+            data: [
+              120, 132, 101, 134, 30, 230, 210, 132, 101, 134, 90, 230, 4, 90,
+              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
+              230,
+            ],
+          },
+          {
+            name: "作业区6",
+            type: "line",
+            stack: "Total",
+            data: [
+              220, 182, 591, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
+              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
+              230,
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.amphiPosition-container {
+  margin-top: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+  .amphiPosition-box {
+    display: flex;
+    align-items: stretch;
+    height: calc(100vh - 105px);
+    .left-box {
+      width: 45%;
+      height: 100%;
+      margin-right: 5px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .left-top-box {
+        width: 100%;
+        height: 31%;
+        .table-sum {
+          width: 100%;
+          border-collapse: collapse;
+          color: #ffffff;
+          .radius {
+            border-top-left-radius: 10px;
+          }
+        }
+        .table-sum tr td {
+          font-size: 12px;
+        }
+      }
+      //   饼图
+      .left-center-box {
+        width: 100%;
+        height: 33%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .loaderPie,
+        .cutOnePie,
+        .cutSecondPie,
+        .cutThreePie,
+        .cutSumPie {
+          width: 100%;
+          height: 90%;
+        }
+      }
+      // 上料各作业区柱状图
+      .left-bottom-box {
+        height: 33%;
+        padding-top: 2%;
+        .loaderBar {
+          height: 80%;
+        }
+      }
+    }
+    .right-box {
+      width: 55%;
+      height: 100%;
+      //   折线图
+      .right-top-box {
+        height: 45%;
+        .TableLine {
+          width: 100%;
+          height: 90%;
+        }
+      }
+      .right-center-box {
+        margin-top: 2%;
+        margin-bottom: 3%;
+        .right-center-title {
+          color: #fff;
+          text-align: center;
+          font-size: 16px;
+          font-weight: bold;
+        }
+      }
+      //   滚动表格
+      .right-bottom-box {
+        height: 37%;
+      }
+    }
+  }
+  // 共用
+  .border-out {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    border: 1px #0174f5 solid;
+    padding: 1px;
+    box-sizing: border-box;
+  }
+  .border-inner {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 2px solid #016ae0;
+    border-radius: 10px;
+    background-color: rgba(2, 8, 23, 0.54);
+    overflow: hidden;
+  }
+
+  .box-top {
+    margin-top: 5px;
+  }
+  .desc-title {
+    color: #fff;
+    text-align: center;
+    margin-top: 2vh;
+    font-size: 12px;
+  }
+}
+</style>

src/components/ForwardDemand/index.vue

@@ -0,0 +1,614 @@
+<template>
+  <!-- 前方需求分析 -->
+  <div class="forwardDemand-container">
+    <!-- 筛选 -->
+    <div class="formData-box">
+      <el-form ref="form" :model="formData" label-width="90px">
+        <el-form-item label="请选择年份" size="mini">
+          <el-select v-model="formData.year">
+            <el-option label="2024" :value="2024"></el-option>
+            <el-option label="2025" :value="2025"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="query-btn" @click="queryBtn">确定</div>
+    </div>
+    <div class="forwardDemand-box">
+      <div class="left-box">
+        <div class="border-out">
+          <div class="border-inner">
+            <div class="left-top-title">需求计划分析</div>
+            <!-- 表格 -->
+            <div class="left-top-box">
+              <el-row class="sum-border">
+                <el-col :span="7" class="col-right-border">需求总量</el-col>
+                <el-col :span="17" class="col-right-border-text green"
+                  >{{ rowObj.xq }}吨</el-col
+                >
+              </el-row>
+              <vue-seamless-scroll
+                :data="tableList"
+                :class-option="classOption"
+                class="warp-box"
+                :class="
+                  tableList.length == 1
+                    ? 'warp-box-1'
+                    : tableList.length == 2
+                    ? 'warp-box-2'
+                    : ''
+                "
+              >
+                <el-row
+                  class="row-border"
+                  v-for="(item, index) in tableList"
+                  :key="index"
+                  ref="refHeight"
+                >
+                  <el-col :span="3" class="col-right-border">船号</el-col>
+                  <el-col :span="4" class="col-right-border">{{
+                    item.dcCh
+                  }}</el-col>
+                  <el-col :span="4" class="col-right-border">批次数量</el-col>
+                  <el-col :span="5" class="col-right-border"
+                    >{{ item.pcsl }} 吨</el-col
+                  >
+                  <el-col :span="3" class="col-right-border">重量</el-col>
+                  <el-col :span="5" class="col-right-border-text"
+                    >{{ item.zl }} 吨</el-col
+                  >
+                </el-row>
+              </vue-seamless-scroll>
+            </div>
+            <!-- 需求、计划柱状图 -->
+            <div class="left-bottom-box">
+              <div id="TableBar" class="TableBar"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="border-out">
+          <div class="border-inner">
+            <div class="right-top-title">需求与生产分析</div>
+            <div class="right-top-box">
+              <div class="table-text">
+                <div>
+                  <span class="span1">前方需求</span>
+                  <span class="span2-orage">{{ xqzlSum }}吨</span>
+                </div>
+                <div>
+                  <span class="span1">月度计划</span>
+                  <span class="span2-orage">{{ jhzlSum }}吨</span>
+                </div>
+                <div>
+                  <span class="span1">完工总量</span>
+                  <span class="span2-red">{{ wczlSum }}吨</span>
+                </div>
+                <div>
+                  <span class="span1">需求与计划百分比</span>
+                  <span class="span2-green">{{
+                    xqzlSum && jhzlSum
+                      ? ((jhzlSum / xqzlSum) * 100).toFixed(2) + "%"
+                      : "0%"
+                  }}</span>
+                </div>
+                <div>
+                  <span class="span1">需求与完成百分比</span>
+                  <span class="span2-green">{{
+                    xqzlSum && wczlSum
+                      ? ((wczlSum / xqzlSum) * 100).toFixed(2) + "%"
+                      : "0%"
+                  }}</span>
+                </div>
+              </div>
+            </div>
+            <!-- 需求、计划、完成柱状图 -->
+            <div class="right-bottom-box">
+              <div id="ShipBar" class="ShipBar"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { qfxqTable, qfxqWc } from "@/api/forwardDemand";
+import VueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "ForwardDemand",
+  components: {
+    VueSeamlessScroll,
+  },
+  data() {
+    return {
+      formData: {
+        year: 2024,
+      },
+      // 1.前方需求汇总表
+      tableList: [],
+      classOption: {
+        step: 1,
+        singleHeight: 0,
+        waitTime: 500,
+      },
+      // 3.	需求与生产分析文本
+      rowObj: {},
+      xqzlSum: 0,
+      jhzlSum: 0,
+      wczlSum: 0,
+    };
+  },
+  mounted() {
+    this.queryBtn();
+  },
+  methods: {
+    // 根据年份查询
+    queryBtn() {
+      this.qfxqTable();
+      this.qfxqWc();
+    },
+    // 1.前方需求汇总表
+    qfxqTable() {
+      qfxqTable({
+        nf: this.formData.year,
+      }).then((res) => {
+        this.tableList = res.data.detail;
+        this.rowObj = res.data;
+        this.$nextTick(() => {
+          const elementHeight = this.$refs.refHeight;
+          elementHeight.forEach((li, index) => {
+            this.classOption.singleHeight = li.$el.offsetHeight;
+          });
+        });
+      });
+    },
+    // 2.4.柱状图 3.计算
+    qfxqWc() {
+      qfxqWc({
+        nf: this.formData.year,
+      }).then((res) => {
+        let dataX = [];
+        let dataJhzlY = [];
+        let dataWczlY = [];
+        let dataXqzlY = [];
+        this.xqzlSum = 0;
+        this.jhzlSum = 0;
+        this.wczlSum = 0;
+        res.data.forEach((item) => {
+          dataX.push(item.dc_ch);
+          dataJhzlY.push(item.jhzl);
+          dataWczlY.push(item.wczl);
+          dataXqzlY.push(item.xqzl);
+          this.xqzlSum += item.xqzl;
+          this.jhzlSum += item.jhzl;
+          this.wczlSum += item.wczl;
+        });
+
+        // 按船只划分重量柱状图
+        this.TableBar(dataX, dataXqzlY, dataJhzlY);
+        // 按船只月度计划--完成总量柱状图
+        this.ShipBar(dataX, dataXqzlY, dataJhzlY, dataWczlY);
+      });
+    },
+    TableBar(dataX, dataXqzlY, dataJhzlY) {
+      var myChart = this.$echarts.init(document.getElementById("TableBar"));
+
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          top: "",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          right: "2%",
+          orient: "vertical",
+        },
+        grid: {
+          left: "2%",
+          right: "4%",
+          top: "2%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: dataX,
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "需求重量",
+            type: "bar",
+            data: dataXqzlY,
+            itemStyle: {
+              color: "#5470c6",
+            },
+          },
+          {
+            name: "计划重量",
+            type: "bar",
+            data: dataJhzlY,
+            itemStyle: {
+              color: "#fac858",
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    ShipBar(dataX, dataXqzlY, dataJhzlY, dataWczlY) {
+      var myChart = this.$echarts.init(document.getElementById("ShipBar"));
+
+      var option = {
+        title: {
+          text: "需求和计划以及完工重量分析",
+          left: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          padding: [40, 0, 0, 0],
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: "15%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          right: "2%",
+          orient: "vertical",
+        },
+        grid: {
+          top: "15%",
+          left: "2%",
+          right: "4%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            data: dataX,
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 0, 0, 0],
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#064585",
+                // type: "dashed"
+              },
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 0, 10, 0],
+            },
+          },
+        ],
+        series: [
+          {
+            name: "需求重量",
+            type: "bar",
+            data: dataXqzlY,
+            itemStyle: {
+              color: "#5470c6",
+            },
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "最大值",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "最小值",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }],
+            },
+          },
+          {
+            name: "计划重量",
+            type: "bar",
+            data: dataJhzlY,
+            itemStyle: {
+              color: "#fac858",
+            },
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "最大值",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "最小值",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }],
+            },
+          },
+          {
+            name: "完工重量",
+            type: "bar",
+            data: dataWczlY,
+            itemStyle: {
+              color: "#91cc75",
+            },
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "最大值",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "最小值",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.forwardDemand-container {
+  margin-top: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+  .forwardDemand-box {
+    display: flex;
+    align-items: stretch;
+    height: calc(100vh - 105px);
+    // 需求计划分析
+    .left-box {
+      width: 30%;
+      height: 100%;
+      margin-right: 5px;
+
+      .left-top-title {
+        width: 32%;
+        height: 22px;
+        background-image: url("@/assets/image/tit01s.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        margin: 0 auto;
+        font-size: 14px;
+        color: #ffffff;
+        text-align: center;
+        margin: 0 auto;
+      }
+      .left-top-box {
+        height: 22.1%;
+        margin: 3% 2% 2% 2%;
+        .sum-border {
+          border: 1px solid #3490ba;
+          color: #fff;
+          font-size: 0.8rem;
+          .col-right-border {
+            height: 2.5rem;
+            line-height: 2.5rem;
+            text-align: center;
+            border-right: 1px solid #3490ba;
+          }
+          .col-right-border-text {
+            height: 2.5rem;
+            line-height: 2.5rem;
+            text-align: center;
+          }
+          .green {
+            color: #4cae4c;
+            font-size: 1.25rem;
+          }
+        }
+        .warp-box {
+          height: 6rem;
+          overflow: hidden;
+          border-left: 1px solid #3490ba;
+          border-right: 1px solid #3490ba;
+          border-bottom: 1px solid #3490ba;
+        }
+        .warp-box-1 {
+          height: 2rem;
+        }
+        .warp-box-2 {
+          height: 4rem;
+        }
+        // .warp-box-3 {
+        //   height: 6rem;
+        // }
+        // .warp-box-4 {
+        //   height: 8rem;
+        // }
+        .row-border {
+          color: #fff;
+          text-align: left;
+          font-size: 0.8rem;
+          .col-right-border {
+            height: 2rem;
+            line-height: 2rem;
+            text-align: center;
+            border-right: 1px solid #3490ba;
+            border-top: 1px solid #3490ba;
+          }
+          .col-right-border-text {
+            height: 2rem;
+            line-height: 2rem;
+            text-align: center;
+            border-top: 1px solid #3490ba;
+          }
+        }
+      }
+      .left-bottom-box {
+        height: 71%;
+        .TableBar {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .right-box {
+      width: 70%;
+      height: 100%;
+      .right-top-title {
+        width: 32%;
+        height: 24px;
+        background-image: url("@/assets/image/tit01s.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        margin: 0 auto;
+        font-size: 14px;
+        color: #ffffff;
+        text-align: center;
+        margin: 0 auto;
+      }
+      // 需求与生产分析
+      .right-top-box {
+        height: 8%;
+        padding: 1% 1% 2% 1%;
+        .table-text {
+          height: 100%;
+          border: 1px solid #5bc0de;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+          .span1 {
+            color: #ffffff;
+            font-size: 1.25rem;
+            margin-right: 0.5rem;
+          }
+          .span2-orage {
+            font-size: 1.25rem;
+            color: #feb602;
+          }
+          .span2-green {
+            font-size: 1.25rem;
+            color: #4cae4c;
+          }
+          .span2-red {
+            font-size: 1.25rem;
+            color: #e9230d;
+          }
+        }
+      }
+      .right-bottom-box {
+        height: 82%;
+        .ShipBar {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  // 共用
+  .border-out {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    border: 1px #0174f5 solid;
+    padding: 1px;
+    box-sizing: border-box;
+  }
+  .border-inner {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 2px solid #016ae0;
+    border-radius: 10px;
+  }
+  .box-top {
+    margin-top: 5px;
+  }
+  .border-out {
+    height: 100%;
+    .border-inner {
+      height: 100%;
+      background-color: rgba(2, 8, 23, 0.1);
+    }
+  }
+}
+</style>

src/components/LineTableAnalysis/index.vue

@@ -0,0 +1,617 @@
+<template>
+  <!-- 线表分析 -->
+  <div class="lineTableAnalysis-container">
+    <!-- 筛选 -->
+    <div class="formData-box">
+      <el-form ref="form" :model="formData" label-width="90px">
+        <el-form-item label="请选择年份" size="mini">
+          <el-select v-model="formData.year" placeholder="">
+            <el-option label="2024" :value="2024"></el-option>
+            <el-option label="2025" :value="2025"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="query-btn" @click="queryBtn">确定</div>
+    </div>
+    <div class="lineTableAnalysis-box">
+      <div class="left-box">
+        <div class="border-out">
+          <div class="border-inner">
+            <!-- 线标分析-折线图 -->
+            <div class="left-top-box">
+              <div class="left-top-title">线表分析</div>
+              <div id="TableLine" class="TableLine"></div>
+            </div>
+          </div>
+        </div>
+        <div class="border-out box-top">
+          <div class="border-inner">
+            <!-- 线标分析 -柱状图 -->
+            <div class="left-bottom-box">
+              <div class="left-bottom-title">线表分析</div>
+              <div id="TableBar" class="TableBar"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="border-out">
+          <div class="border-inner">
+            <!-- 完成量-与未完成量 -->
+            <div class="right-top-box">
+              <div class="right-top-title">线表分析</div>
+              <div id="ShipBar" class="ShipBar"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { kbanXbjh } from "@/api/lineTableAnalysis";
+export default {
+  name: "LineTableAnalysis",
+  data() {
+    return {
+      formData: {
+        year: 2024,
+      },
+      xbjhList: [],
+      ydjhList: [],
+      monthList: [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+    };
+  },
+  mounted() {
+    this.queryBtn();
+  },
+  methods: {
+    kbanXbjh() {
+      kbanXbjh({
+        nf: this.formData.year,
+      }).then((res) => {
+        const ydjhList = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+        res.data.ydjh.forEach((item) => {
+          ydjhList[item.mon - 1] = item.zl;
+        });
+        this.xbjhList = res.data.xbjh;
+        this.ydjhList = ydjhList;
+        // 线表分析折线图
+        this.TableLine();
+        // 线表分析柱状图
+        this.TableBar();
+        // 船只分析甘特图
+        this.ShipBar();
+      });
+    },
+    // 根据年份查询
+    queryBtn() {
+      this.kbanXbjh();
+    },
+    TableLine() {
+      var myChart = this.$echarts.init(document.getElementById("TableLine"));
+      var option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        color: ["#1afffd", "#5470c6"],
+        legend: {
+          data: ["线表计划", "月度计划"],
+          top: "5%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "3%",
+          bottom: "5%",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.monthList,
+          axisLabel: {
+            color: "#e4e4e4",
+          },
+          nameTextStyle: {
+            color: "#e4e4e4",
+            fontSize: 12,
+            padding: [0, 0, 0, 0],
+          },
+        },
+        yAxis: {
+          name: "重量（吨）",
+          type: "value",
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#064585",
+            },
+          },
+          axisLabel: {
+            color: "#e4e4e4",
+          },
+          nameTextStyle: {
+            color: "#e4e4e4",
+            fontSize: 12,
+            padding: [0, 30, 10, 0],
+          },
+        },
+        series: [
+          {
+            name: "线表计划",
+            type: "line",
+            data: this.xbjhList,
+          },
+          {
+            name: "月度计划",
+            type: "line",
+            data: this.ydjhList,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    TableBar() {
+      var myChart = this.$echarts.init(document.getElementById("TableBar"));
+
+      var option = {
+        color: ["#1afffd", "#2e7cff"],
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["线表计划", "月度计划"],
+          top: "5%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            data: this.monthList,
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 0, 0, 0],
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "重量（吨）",
+            type: "value",
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#064585",
+                // type: "dashed"
+              },
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 30, 10, 0],
+            },
+          },
+        ],
+        series: [
+          {
+            name: "线表计划",
+            type: "bar",
+            data: this.xbjhList,
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            name: "月度计划",
+            type: "bar",
+            data: this.ydjhList,
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    ShipBar() {
+      var myChart = this.$echarts4.init(document.getElementById("ShipBar"));
+      var option = {
+        legend: {
+          left: "center",
+          top: "2%",
+          data: ["线表计划", "月度计划"],
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          containLabel: true,
+          top: "10%",
+          left: "2%",
+          right: "4%",
+          bottom: "3%",
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#91a0be",
+          },
+          axisPointer: {
+            type: "line", // 使用线型指示器
+            lineStyle: {
+              color: "#fff", // 设置线的颜色
+              width: 1,
+              type: "dashed",
+            },
+          },
+          formatter: (params) => {
+            var res = params[0].name + "</br>";
+            var date0 = params[0].data;
+            var date1 = params[1].data;
+            var date2 = params[2].data;
+            var date3 = params[3].data;
+            date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1);
+            date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1);
+            date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1);
+
+            date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1);
+            res +=
+              params[1].marker +
+              params[1].seriesName +
+              ":</br>" +
+              date0 +
+              "~" +
+              date1 +
+              "</br>";
+            res +=
+              params[3].marker +
+              params[3].seriesName +
+              ":</br>" +
+              date2 +
+              "~" +
+              date3 +
+              "</br>";
+            return res;
+          },
+        },
+        xAxis: {
+          type: "time",
+          max: new Date("2024-12"),
+          min: new Date("2024-01"),
+          interval: 3600 * 24 * 1001 * 30.7,
+          axisLabel: {
+            show: true,
+            color: "#e4e4e4",
+            formatter: (value) => {
+              var date = new Date(value);
+              console.log();
+              // 获取月份，并加1因为 JavaScript 中月份是从0开始的
+              var month = date.getMonth() + 1;
+              // 返回月份或不显示
+              return month === 0 || month === 13 ? "" : month + "月";
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#616878",
+            },
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dashed",
+              color: "#1350b0",
+            },
+          },
+          axisTick: {
+            show: false, // 设置为false去掉刻度线
+          },
+        },
+        yAxis: {
+          data: [
+            "船只1",
+            "船只2",
+            "船只3",
+            "船只4",
+            "船只5",
+            "船只6",
+            "船只7",
+            "船只8",
+            "船只9",
+            "船只10",
+          ],
+          axisLabel: {
+            color: "#e4e4e4",
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#616878",
+            },
+          },
+          // axisTick: {
+          //   show: false, // 设置为false去掉刻度线
+          // },
+        },
+        series: [
+          {
+            name: "线表计划（隐藏）",
+            type: "bar",
+            stack: "sum1",
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+              },
+            },
+            data: [
+              new Date("2024/01/01"),
+              new Date("2024/02/01"),
+              new Date("2024/03/01"),
+              new Date("2024/04/01"),
+              new Date("2024/04/01"),
+              new Date("2024/05/01"),
+              new Date("2024/06/01"),
+              new Date("2024/04/01"),
+              new Date("2024/06/01"),
+              new Date("2024/03/01"),
+            ],
+          },
+          {
+            name: "线表计划",
+            type: "bar",
+            stack: "sum1",
+            //修改地方2
+            itemStyle: {
+              normal: {
+                color: "#1afffd",
+              },
+            },
+            data: [
+              new Date("2024/10/01"),
+              new Date("2024/11/01"),
+              new Date("2024/11/01"),
+              new Date("2024/06/01"),
+              new Date("2024/10/01"),
+              new Date("2024/10/01"),
+              new Date("2024/12/01"),
+              new Date("2024/12/01"),
+              new Date("2024/08/01"),
+              new Date("2024/08/01"),
+            ],
+          },
+          {
+            name: "月度计划（隐藏）",
+            type: "bar",
+            stack: "sum2",
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+              },
+            },
+            data: [
+              new Date("2024/03"),
+              new Date("2024/09"),
+              new Date("2024/02"),
+              new Date("2024/10"),
+              new Date("2024/04"),
+              new Date("2024/04"),
+              new Date("2024/04"),
+              new Date("2024/07"),
+              new Date("2024/09"),
+              new Date("2024/09"),
+            ],
+          },
+          {
+            name: "月度计划",
+            type: "bar",
+            stack: "sum2",
+            //修改地方3
+            itemStyle: {
+              normal: {
+                color: "#2e7cff",
+              },
+            },
+            data: [
+              new Date("2024/09/01"),
+              new Date("2024/12/01"),
+              new Date("2024/05/01"),
+              new Date("2024/12/01"),
+              new Date("2024/08/01"),
+              new Date("2024/05/01"),
+              new Date("2024/11/01"),
+              new Date("2024/08/01"),
+              new Date("2024/11/01"),
+              new Date("2024/11/01"),
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.lineTableAnalysis-container {
+  margin-top: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+  transition: opacity 1003s;
+  .lineTableAnalysis-box {
+    display: flex;
+    align-items: stretch;
+    height: calc(100vh - 105px);
+    .left-box {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      //   线表分析折线图
+      .left-top-box {
+        height: 100%;
+        .left-top-title {
+          width: 32%;
+          height: 24px;
+          background-image: url("@/assets/image/tit01s.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          margin: 0 auto;
+          font-size: 14px;
+          color: #ffffff;
+          text-align: center;
+          margin: 0 auto;
+        }
+        .TableLine {
+          width: 100%;
+          height: calc(100% - 24px);
+        }
+      }
+      //   线表分析柱状图
+      .left-bottom-box {
+        height: 100%;
+        .left-bottom-title {
+          width: 32%;
+          height: 24px;
+          background-image: url("@/assets/image/tit01s.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          margin: 0 auto;
+          font-size: 14px;
+          color: #ffffff;
+          text-align: center;
+          margin: 0 auto;
+        }
+        .TableBar {
+          width: 100%;
+          height: calc(100% - 24px);
+        }
+      }
+    }
+    .right-box {
+      width: 50%;
+      height: 100%;
+      margin-left: 5px;
+      //   线表分析甘特图
+      .right-top-box {
+        height: 100%;
+        .right-top-title {
+          width: 32%;
+          height: 24px;
+          background-image: url("@/assets/image/tit01s.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 14px;
+          color: #ffffff;
+          text-align: center;
+          margin: 0 auto;
+        }
+        .ShipBar {
+          width: 100%;
+          height: calc(100% - 24px);
+        }
+      }
+    }
+  }
+
+  .box-top {
+    margin-top: 5px;
+  }
+
+  .border-out {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    border: 1px #0174f5 solid;
+    padding: 1px;
+    box-sizing: border-box;
+  }
+  .border-inner {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 2px solid #016ae0;
+    border-radius: 10px;
+  }
+  .border-inner {
+    background-color: rgba(2, 8, 23, 0.1);
+  }
+}
+</style>

src/components/MidSchedule/index.vue

@@ -0,0 +1,981 @@
+<template>
+  <!-- 中日程分析 -->
+  <div class="midSchedule-container">
+    <!-- 筛选 -->
+    <div class="formData-box">
+      <el-form ref="form" :model="formData" label-width="90px">
+        <el-form-item label="请选择年份" size="mini">
+          <el-select v-model="formData.year" placeholder="">
+            <el-option label="2024" :value="2024"></el-option>
+            <el-option label="2025" :value="2025"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="query-btn" @click="queryBtn">确定</div>
+    </div>
+    <div class="midSchedule-box">
+      <div class="left-box">
+        <div class="border-out">
+          <div class="border-inner">
+            <!-- 线标分析-折线图 -->
+            <div class="left-top-box">
+              <div class="left-top-title">中日程汇总表</div>
+              <table class="table-sum">
+                <tr>
+                  <td class="table-sum-title">图纸数量</td>
+                  <td class="table-sum-text">
+                    {{ tableSumObj.tzsl ? tableSumObj.tzsl : 0 }}张
+                  </td>
+                  <td class="table-sum-title">来图数量</td>
+                  <td class="table-sum-text">
+                    {{ tableSumObj.ltsl ? tableSumObj.ltsl : 0 }}张
+                  </td>
+                </tr>
+                <tr>
+                  <td class="table-sum-title">需求重量</td>
+                  <td class="table-sum-text">
+                    {{ tableSumObj.xqzl ? tableSumObj.xqzl : 0 }}吨
+                  </td>
+                  <td class="table-sum-title">订货清单重量</td>
+                  <td class="table-sum-text">
+                    {{ tableSumObj.dhzl ? tableSumObj.dhzl : 0 }}吨
+                  </td>
+                </tr>
+                <tr>
+                  <td class="table-sum-title">月度计划重量</td>
+                  <td class="table-sum-text">
+                    {{ tableSumObj.jhzl ? tableSumObj.jhzl : 0 }}吨
+                  </td>
+                  <td class="table-sum-title">完成重量</td>
+                  <td class="table-sum-text">
+                    {{ tableSumObj.wczl ? tableSumObj.wczl : 0 }}吨
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <div class="left-bottom-box">
+              <table class="table-sum">
+                <tr v-for="(item, index) in tableSumObj.detail" :key="index">
+                  <td class="table-sum-title">船号</td>
+                  <td class="table-sum-text">
+                    {{ item.dcCh }}
+                  </td>
+                  <td class="table-sum-title">批次数量</td>
+                  <td class="table-sum-text">
+                    {{ item.pcsl ? item.pcsl : 0 }}张
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="right-top-box">
+          <div class="border-out">
+            <div class="border-inner">
+              <!-- 柱状图 -->
+              <div class="right-top-title">中日程数据分析</div>
+              <el-row class="row">
+                <el-col :span="12">
+                  <div id="DrawingBar" class="drawingBar"></div>
+                </el-col>
+                <el-col :span="12">
+                  <div id="ForwardDemandBar" class="forwardDemandBar"></div
+                ></el-col>
+              </el-row>
+              <el-row class="row">
+                <el-col :span="12">
+                  <div id="MonthlyPlanBar" class="monthlyPlanBar"></div
+                ></el-col>
+                <el-col :span="12"
+                  ><div id="FinishBar" class="finishBar"></div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+        <div class="right-bottom-box">
+          <div class="border-out">
+            <div class="border-inner">
+              <!-- 饼图 -->
+              <div class="right-bottom-title">中日程数据分析</div>
+              <el-row class="row">
+                <el-col :span="6">
+                  <div id="DrawingPie" class="drawingPie"></div>
+                </el-col>
+                <el-col :span="6">
+                  <div id="ForwardDemandPie" class="forwardDemandPie"></div>
+                </el-col>
+                <el-col :span="6">
+                  <div id="MonthlyPlanPie" class="monthlyPlanPie"></div>
+                </el-col>
+                <el-col :span="6">
+                  <div id="FinishPie" class="finishPie"></div
+                ></el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { qfxqTable } from "@/api/midSchedule";
+export default {
+  name: "MidSchedule",
+  data() {
+    return {
+      formData: {
+        year: 2024,
+      },
+      tableSumList: [],
+      tableSumObj: {},
+      xbjhList: [],
+      ydjhList: [],
+      monthList: [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+    };
+  },
+  mounted() {
+    this.queryBtn();
+  },
+  methods: {
+    // 根据年份查询
+    queryBtn() {
+      this.qfxqTable();
+    },
+    qfxqTable() {
+      qfxqTable({
+        nf: this.formData.year,
+      }).then((res) => {
+        this.tableSumObj = res.data;
+        this.DrawingBar();
+        this.ForwardDemandBar();
+        this.MonthlyPlanBar();
+        this.FinishBar();
+        this.DrawingPie(20, 45);
+        this.ForwardDemandPie(20, 45);
+        this.MonthlyPlanPie(20, 45);
+        this.FinishPie(20, 45);
+      });
+    },
+    DrawingBar() {
+      var myChart = this.$echarts.init(document.getElementById("DrawingBar"));
+
+      var option = {
+        color: ["#2e7cff", "#fc8452"],
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["线表计划", "月度计划"],
+          top: "5%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            data: this.monthList,
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 0, 0, 0],
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#064585",
+                // type: "dashed"
+              },
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 30, 10, 0],
+            },
+          },
+        ],
+        series: [
+          {
+            name: "线表计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            name: "月度计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    ForwardDemandBar() {
+      var myChart = this.$echarts.init(
+        document.getElementById("ForwardDemandBar")
+      );
+
+      var option = {
+        color: ["#2e7cff", "#91cd76"],
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["线表计划", "月度计划"],
+          top: "5%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            data: this.monthList,
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 0, 0, 0],
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#064585",
+                // type: "dashed"
+              },
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 30, 10, 0],
+            },
+          },
+        ],
+        series: [
+          {
+            name: "线表计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            name: "月度计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    MonthlyPlanBar() {
+      var myChart = this.$echarts.init(
+        document.getElementById("MonthlyPlanBar")
+      );
+
+      var option = {
+        color: ["#2e7cff", "#feb602"],
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["线表计划", "月度计划"],
+          top: "5%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            data: this.monthList,
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 0, 0, 0],
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#064585",
+                // type: "dashed"
+              },
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 30, 10, 0],
+            },
+          },
+        ],
+        series: [
+          {
+            name: "线表计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            name: "月度计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    FinishBar() {
+      var myChart = this.$echarts.init(document.getElementById("FinishBar"));
+
+      var option = {
+        color: ["#2e7cff", "#1afffd"],
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["线表计划", "月度计划"],
+          top: "5%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            data: this.monthList,
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 0, 0, 0],
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#064585",
+                // type: "dashed"
+              },
+            },
+            axisLabel: {
+              color: "#e4e4e4",
+            },
+            nameTextStyle: {
+              color: "#e4e4e4",
+              fontSize: 12,
+              padding: [0, 30, 10, 0],
+            },
+          },
+        ],
+        series: [
+          {
+            name: "线表计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            name: "月度计划",
+            type: "bar",
+            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
+            markPoint: {
+              data: [
+                {
+                  type: "max",
+                  name: "Max",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+                {
+                  type: "min",
+                  name: "Min",
+                  label: {
+                    show: true,
+                    color: "#fff",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    DrawingPie(wclValue, wcValue) {
+      var myChart = this.$echarts.init(document.getElementById("DrawingPie"));
+      var option = {
+        title: {
+          text: "中日程与图纸",
+          left: "center",
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            fontWeight: "normal",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        color: ["#ff7d0a", "#5470c6"],
+        legend: {
+          show: true,
+          left: "center",
+          top: "10%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          itemWidth: 25,
+          itemHeight: 15,
+        },
+        series: [
+          {
+            name: "中日程与图纸",
+            type: "pie",
+            radius: "50%",
+            center: ["50%", "50%"],
+            minAngle: wcValue && wclValue ? 20 : "",
+            avoidLabelOverlap: true,
+            data: [
+              { value: wcValue, name: "完成量" },
+              { value: wclValue, name: "未完成量" },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    ForwardDemandPie(wclValue, wcValue) {
+      var myChart = this.$echarts.init(
+        document.getElementById("ForwardDemandPie")
+      );
+
+      var option = {
+        title: {
+          text: "中日程与前方需求",
+          left: "center",
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            fontWeight: "normal",
+          },
+        },
+        color: ["#91cc75", "#2e7cff"],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          show: true,
+          left: "center",
+          top: "10%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          itemWidth: 25,
+          itemHeight: 15,
+        },
+        series: [
+          {
+            name: "中日程与前方需求",
+            type: "pie",
+            radius: "50%",
+            center: ["50%", "50%"],
+            minAngle: wcValue && wclValue ? 20 : "",
+            avoidLabelOverlap: true,
+            data: [
+              { value: wcValue, name: "完成量" },
+              { value: wclValue, name: "未完成量" },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    MonthlyPlanPie(wclValue, wcValue) {
+      var myChart = this.$echarts.init(
+        document.getElementById("MonthlyPlanPie")
+      );
+
+      var option = {
+        title: {
+          text: "中日程与月度计划",
+          left: "center",
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "normal",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        color: ["#feb602", "#5470c6"],
+        legend: {
+          show: true,
+          left: "center",
+          top: "10%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          itemWidth: 25,
+          itemHeight: 15,
+        },
+        series: [
+          {
+            name: "中日程与月度计划",
+            type: "pie",
+            radius: "50%",
+            center: ["50%", "50%"],
+            minAngle: wcValue && wclValue ? 20 : "",
+            avoidLabelOverlap: true,
+            data: [
+              { value: wcValue, name: "完成量" },
+              { value: wclValue, name: "未完成量" },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    FinishPie(wclValue, wcValue) {
+      var myChart = this.$echarts.init(document.getElementById("FinishPie"));
+      var option = {
+        title: {
+          text: "中日程与完成重量",
+          left: "center",
+          // left:"center",
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "normal",
+          },
+        },
+        // color: ["#ff81cb", "#2865aa"],
+        color: ["#1afffd", "#2e7cff"],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          show: true,
+          left: "center",
+          top: "10%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          itemWidth: 25,
+          itemHeight: 15,
+        },
+        series: [
+          {
+            name: "中日程与完成重量",
+            type: "pie",
+            radius: "50%",
+            center: ["50%", "50%"],
+            minAngle: wcValue && wclValue ? 20 : "",
+            minAngle: 20,
+            avoidLabelOverlap: true,
+            data: [
+              { value: wcValue, name: "完成量" },
+              { value: wclValue, name: "未完成量" },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.midSchedule-container {
+  margin-top: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+  transition: opacity 1003s;
+  .midSchedule-box {
+    display: flex;
+    align-items: stretch;
+    height: calc(100vh - 105px);
+    .left-box {
+      width: 35%;
+      height: 100%;
+      .left-top-box {
+        .left-top-title {
+          width: 32%;
+          height: 24px;
+          background-image: url("@/assets/image/tit01s.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          margin: 0 auto;
+          font-size: 14px;
+          color: #ffffff;
+          text-align: center;
+          margin: 0 auto;
+        }
+      }
+      .left-bottom-box {
+        // border: 1px solid red;
+        .row-border {
+          color: #fff;
+          text-align: left;
+          font-size: 0.8rem;
+          .col-right-border {
+            height: 2rem;
+            line-height: 2rem;
+            text-align: center;
+            border-right: 1px solid #3490ba;
+            border-top: 1px solid #3490ba;
+          }
+          .col-right-border-text {
+            height: 2rem;
+            line-height: 2rem;
+            text-align: center;
+            border-top: 1px solid #3490ba;
+          }
+        }
+      }
+    }
+    .right-box {
+      width: 65%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-left: 5px;
+      //   柱状图
+      .right-top-box {
+        height: 55%;
+        margin-bottom: 5px;
+        .right-top-title {
+          width: 32%;
+          height: 24px;
+          background-image: url("@/assets/image/tit01s.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 14px;
+          color: #ffffff;
+          text-align: center;
+          margin: 0 auto;
+        }
+        .row {
+          height: calc(50% - 12px);
+          .el-col-12 {
+            height: 100%;
+
+            .drawingBar,
+            .forwardDemandBar,
+            .monthlyPlanBar,
+            .finishBar {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+      //   饼图
+      .right-bottom-box {
+        height: 45%;
+        .right-bottom-title {
+          width: 32%;
+          height: 24px;
+          background-image: url("@/assets/image/tit01s.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          font-size: 14px;
+          color: #ffffff;
+          text-align: center;
+          margin: 0 auto;
+        }
+        .row {
+          height: calc(100% - 24px);
+          .el-col-6 {
+            height: 100%;
+            .drawingPie,
+            .forwardDemandPie,
+            .monthlyPlanPie,
+            .finishPie {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .box-top {
+    margin-top: 5px;
+  }
+
+  .border-out {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    border: 1px #0174f5 solid;
+    padding: 1px;
+    box-sizing: border-box;
+  }
+  .border-inner {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 2px solid #016ae0;
+    border-radius: 10px;
+  }
+  .border-inner {
+    background-color: rgba(2, 8, 23, 0.1);
+  }
+}
+</style>

src/layout/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="layout-container">
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: "Layout",
+};
+</script>
+<style></style>

src/main.js

@@ -0,0 +1,35 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import ElementUI from "element-ui"; //el
+import "element-ui/lib/theme-chalk/index.css"; //el
+import "@/assets/icon_font/iconfont.css"; //阿里矢量图
+import "./permission"; // 登录权限
+import "@/styles/index.scss"; // global css
+
+// 时间插件
+import moment from "moment";
+Vue.prototype.$moment = moment;
+
+// echarts
+import * as echarts from 'echarts';
+Vue.prototype.$echarts = echarts;
+
+import * as echarts4 from 'echarts4';
+Vue.prototype.$echarts4 = echarts4;
+
+// datav
+import dataV from '@jiaminghi/data-view'
+Vue.use(dataV)
+
+// 需要汉化
+moment.locale("zh-cn");
+
+Vue.config.productionTip = false;
+Vue.use(ElementUI);
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");

src/permission.js

@@ -0,0 +1,13 @@
+import router from "./router";
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
+
+router.beforeEach(async (to, from, next) => {
+  NProgress.start();
+  next();
+});
+router.afterEach(() => {
+  NProgress.done();
+});

src/router/index.js

@@ -0,0 +1,42 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Layout from "@/layout";
+
+Vue.use(VueRouter);
+
+export const constantRoutes = [
+  {
+    path: "/redirect",
+    component: Layout,
+    children: [
+      {
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect/index"),
+      },
+    ],
+  },
+  {
+    path: "/",
+    component: () => import("../views/home/index.vue"),
+  },
+  {
+    path: "/404",
+    component: () => import("../views/errorPage/404.vue"),
+  },
+  {
+    path: "/500",
+    component: () => import("@/views/errorPage/500.vue"),
+  },
+];
+
+export const routes = [
+  ...constantRoutes,
+  // 404页必须放在末尾！！！
+  { path: "*", redirect: "/404" },
+];
+const router = new VueRouter({
+  mode: "hash",
+  routes,
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,29 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    cartNum: 0, //购物车数量
+    navBarIndex: 0, //默认菜单高亮
+  },
+  getters: {
+    cartNum(state) {
+      return state.cartNum;
+    },
+    navBarIndex(state) {
+      return state.navBarIndex;
+    },
+  },
+  mutations: {
+    CART_NUM: (state, cartNum) => {
+      state.cartNum = cartNum;
+    },
+    NAV_BAR_INDEX: (state, navBarIndex) => {
+      state.navBarIndex = navBarIndex;
+    },
+  },
+  actions: {},
+  modules: {},
+});

src/styles/font/font.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "data_number";
+  src: url("./data_number.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}

src/styles/index.css

@@ -0,0 +1,111 @@
+@charset "UTF-8";
+@import url(f:\ccgroup\gj-erp-kban-vue\src\styles\font\font.css);
+.el-input__inner {
+  background-color: rgba(1, 1, 1, 0) !important;
+  border: 2px solid #00c0ef !important;
+  color: #72e3ff !important;
+  font-weight: bold;
+}
+
+.table-sum {
+  width: 96%;
+  border-collapse: collapse;
+  color: #ffffff;
+}
+
+.table-sum .table-sum-title {
+  font-size: 14px;
+}
+
+.table-sum .table-sum-text {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.table-sum tr td {
+  border: 1px solid #5bc0de;
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+  text-indent: 10px;
+}
+
+.formData-box {
+  width: 300px;
+  position: relative;
+  top: 10px;
+  display: flex;
+}
+
+.formData-box .query-btn {
+  height: 22px;
+  background-color: #00c0ef;
+  color: white;
+  border: #00cdff 2px solid;
+  min-width: 50px;
+  border-radius: 5px;
+  margin-left: 20px;
+  text-align: center;
+  font-size: 14px;
+  position: relative;
+  top: 2px;
+  cursor: pointer;
+}
+
+.formData-box .el-form-item__label {
+  color: #fff;
+}
+
+.el-select .el-input .el-select__caret {
+  color: #00c0ef !important;
+}
+
+.el-table,
+.el-table tr,
+.el-table__fixed-right::before,
+.el-table__fixed::before {
+  background-color: rgba(1, 1, 1, 0) !important;
+}
+
+.el-table th,
+.el-table td {
+  text-align: center !important;
+  height: 30px !important;
+  padding: 0 !important;
+  color: #fff;
+}
+
+.el-table-column--selection .cell {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.el-table--border {
+  border: none !important;
+}
+
+.el-table .el-table__cell {
+  padding: 0 !important;
+}
+
+.el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  border: none !important;
+  background-color: rgba(1, 1, 1, 0) !important;
+}
+
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent !important;
+}

src/styles/index.min.css

@@ -0,0 +1 @@
+@import url(f:\ccgroup\gj-erp-kban-vue\src\styles\font\font.css);.el-input__inner{background-color:rgba(1,1,1,0) !important;border:2px solid #00c0ef !important;color:#72e3ff !important;font-weight:bold}.table-sum{width:96%;border-collapse:collapse;color:#ffffff}.table-sum .table-sum-title{font-size:14px}.table-sum .table-sum-text{font-weight:bold;font-size:18px}.table-sum tr td{border:1px solid #5bc0de;padding-top:0.3rem;padding-bottom:0.3rem;text-indent:10px}.formData-box{width:300px;position:relative;top:10px;display:flex}.formData-box .query-btn{height:22px;background-color:#00c0ef;color:white;border:#00cdff 2px solid;min-width:50px;border-radius:5px;margin-left:20px;text-align:center;font-size:14px;position:relative;top:2px;cursor:pointer}.formData-box .el-form-item__label{color:#fff}.el-select .el-input .el-select__caret{color:#00c0ef !important}.el-table,.el-table tr,.el-table__fixed-right::before,.el-table__fixed::before{background-color:rgba(1,1,1,0) !important}.el-table th,.el-table td{text-align:center !important;height:30px !important;padding:0 !important;color:#fff}.el-table-column--selection .cell{padding-left:0 !important;padding-right:0 !important}.el-table--border{border:none !important}.el-table .el-table__cell{padding:0 !important}.el-table--border::after,.el-table--group::after,.el-table::before{border:none !important;background-color:rgba(1,1,1,0) !important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,0.3);-webkit-box-shadow:inset006pxrgba(0, 0, 0, 0.5)}::-webkit-scrollbar-corner{background:transparent !important}

src/styles/index.scss

@@ -0,0 +1,96 @@
+@import "./font/font.css";
+.el-input__inner {
+  background-color: rgba(1, 1, 1, 0) !important;
+  border: 2px solid #00c0ef !important;
+  color: #72e3ff !important;
+  font-weight: bold;
+}
+.table-sum {
+  width: 96%;
+  // margin-left: 2%;
+  border-collapse: collapse;
+  color: #ffffff;
+  .table-sum-title {
+    font-size: 14px;
+  }
+  .table-sum-text {
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
+.table-sum tr td {
+  border: 1px solid #5bc0de;
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+  text-indent: 10px;
+}
+.formData-box {
+  width: 300px;
+  position: relative;
+  top: 10px;
+  display: flex;
+  .query-btn{
+    height: 22px;
+    background-color: #00c0ef;
+    color: white;
+    border: #00cdff 2px solid;
+    min-width: 50px;
+    border-radius: 5px;
+    margin-left: 20px;
+    text-align: center;
+    font-size: 14px;
+    position: relative;
+    top: 2px;
+    cursor: pointer;
+  }
+
+  .el-form-item__label {
+    color: #fff;
+  }
+}
+
+.el-select .el-input .el-select__caret {
+  color: #00c0ef !important;
+}
+.el-table,
+.el-table tr,
+.el-table__fixed-right::before,
+.el-table__fixed::before {
+  background-color: rgba(1, 1, 1, 0) !important;
+}
+.el-table th,
+.el-table td {
+  text-align: center !important;
+  height: 30px !important;
+  padding: 0 !important;
+  color: #fff;
+}
+.el-table-column--selection .cell {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.el-table--border {
+  border: none !important;
+}
+.el-table .el-table__cell {
+  padding: 0 !important;
+}
+.el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  border: none !important;
+  background-color: rgba(1, 1, 1, 0) !important;
+}
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+}
+::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0) !important;
+}

src/utils/encryption.js

@@ -0,0 +1,30 @@
+import CryptoJS from "crypto-js";
+
+// 解密
+export function decrypt(word, keyStr) {
+  keyStr = keyStr || "ylhzabcdefghi066";
+  var key = CryptoJS.enc.Utf8.parse(keyStr);
+
+  var decrypt = CryptoJS.AES.decrypt(word, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+}
+
+// 加密
+export function encrypt(word, keyStr) {
+  keyStr = keyStr || "ylhzabcdefghi066";
+  if (!word) return "";
+  const key = CryptoJS.enc.Utf8.parse(keyStr);
+
+  const srcs = CryptoJS.enc.Utf8.parse(word);
+
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    mode: CryptoJS.mode.ECB,
+
+    padding: CryptoJS.pad.Pkcs7,
+  });
+
+  return encrypted.toString();
+}

src/utils/request.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+const service = axios.create({
+  baseURL: "http://kban.runpengsoft.com",
+  timeout: 600000, //600000
+  withCredentials: false,
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default service;

src/views/errorPage/404.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">~ ~ ~ ~ ~ ~ ~ ~
+          <!-- <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a> -->
+        </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请您联系管理员，或者单击下面的按钮返回主页。</div>
+        <a href="" class="bullshit__return-home" @click="goHome">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return '页面错误...'
+    }
+  },
+  methods: {
+    goHome() {
+      this.$router.push('/home')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/errorPage/500.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
+      返回首页
+    </el-button>
+    <el-row class="row-flex">
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+        <!-- gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面 -->
+        <h2>您没有权限访问该页面</h2>
+        <!-- <h6>如有不满请联系你领导</h6> -->
+        <ul class="list-unstyled">
+          <li>或者你可以去:</li>
+          <li class="link-type">
+            <router-link to="/home"> 回首页 </router-link>
+          </li>
+          <!-- <li class="link-type">
+            <a href="https://www.taobao.com/">随便看看</a>
+          </li> -->
+          <li>
+            <a href="#" @click.prevent="dialogVisible = true">点我看图</a>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img
+          :src="errGif"
+          width="313"
+          height="428"
+          alt="Girl has dropped her ice cream."
+        >
+      </el-col>
+    </el-row>
+    <el-dialog :visible.sync="dialogVisible" title="随便看">
+      <img :src="ewizardClap" class="pan-img">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import errGif from '@/assets/401_images/401.gif'
+
+export default {
+  name: 'Page401',
+  data() {
+    return {
+      errGif: errGif + '?' + +new Date(),
+      ewizardClap:
+        'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
+      dialogVisible: false
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({ path: '/home' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 0 auto;
+  padding-top: 100px;
+  height: 100vh;
+  overflow: hidden;
+  .pan-back-btn {
+    background: #008489;
+    color: #fff;
+    border: none !important;
+  }
+  .row-flex{
+    display: flex;
+    align-items: center;
+  }
+  .pan-gif {
+    margin: 0 auto;
+    display: block;
+  }
+  .pan-img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+  .list-unstyled {
+    font-size: 14px;
+    li {
+      padding-bottom: 5px;
+    }
+    a {
+      color: #008489;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="home-container">
+    <!-- header -->
+    <div class="home-header">
+      <div class="home-header-left">
+        <div v-for="(item, index) in headerLeftList" :key="index">
+          <div
+            class="home-header-name"
+            :class="leftActiveIndex == index ? 'home-header-name-active' : ''"
+            @click="headerLeftChange(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="home-header-right">
+        <div v-for="(item, index) in headerRightList" :key="index">
+          <div
+            class="home-header-name"
+            :class="rightActiveIndex == index ? 'home-header-name-active' : ''"
+            @click="headerRightChange(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- body -->
+    <transition name="fade">
+      <div v-if="leftActiveIndex == 0">
+        <!-- 实时监测 -->
+        <real-time-monitor />
+      </div>
+    </transition>
+    <transition name="fade">
+      <div v-if="leftActiveIndex == 1">
+        <!-- 线表分析 -->
+        <line-table-analysis />
+      </div>
+    </transition>
+    <transition name="fade">
+      <div v-if="leftActiveIndex == 2">
+        <!-- 中日程分析 -->
+        <mid-schedule />
+      </div>
+    </transition>
+    <transition name="fade">
+      <div v-if="rightActiveIndex == 0">
+        <!-- 前方需求分析 -->
+        <forward-demand />
+      </div>
+    </transition>
+    <transition name="fade">
+      <div v-if="rightActiveIndex == 1">
+        <!-- 跨位分析 -->
+        <amphi-position />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import RealTimeMonitor from "@/components/RealTimeMonitor";
+import LineTableAnalysis from "@/components/LineTableAnalysis";
+import MidSchedule from "@/components/MidSchedule";
+import ForwardDemand from "@/components/ForwardDemand";
+import AmphiPosition from "@/components/AmphiPosition";
+export default {
+  name: "Home",
+  components: {
+    RealTimeMonitor,
+    LineTableAnalysis,
+    MidSchedule,
+    ForwardDemand,
+    AmphiPosition,
+  },
+  data() {
+    return {
+      headerLeftList: [
+        {
+          id: 1,
+          name: "实时监测",
+        },
+        {
+          id: 2,
+          name: "线表分析",
+        },
+        {
+          id: 3,
+          name: "中日程分析",
+        },
+      ], //左侧tabs
+      headerRightList: [
+        {
+          id: 4,
+          name: "前方需求分析",
+        },
+        {
+          id: 5,
+          name: "跨位分析",
+        },
+        {
+          id: 6,
+          name: "小池集成",
+        },
+      ], //右侧tabs
+      leftActiveIndex: 0,
+      rightActiveIndex: 99,
+    };
+  },
+  created() {},
+  methods: {
+    // 点击左侧tabs
+    headerLeftChange(item, index) {
+      this.leftActiveIndex = index;
+      this.rightActiveIndex = 99;
+    },
+    // 点击右侧tabs
+    headerRightChange(item, index) {
+      this.rightActiveIndex = index;
+      this.leftActiveIndex = 99;
+    },
+  },
+};
+</script>
+<style lang="scss" scope>
+.home-container {
+  // width: 100%;
+  height: 100vh;
+  min-height: 100vh;
+  background-image: url("@/assets/image/bg01.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  .home-header {
+    // height: 37px;
+    display: flex;
+    justify-content: space-between;
+    .home-header-left {
+      width: 18%;
+      display: flex;
+      justify-content: space-between;
+      margin-left: 3%;
+    }
+    .home-header-right {
+      min-width: 18%;
+      display: flex;
+      justify-content: space-between;
+      margin-right: 3%;
+    }
+
+    .home-header-name {
+      font-size: 14px;
+      color: #fff;
+      opacity: 0.8;
+      padding-top: 8px;
+      padding-left: 10px;
+      padding-right: 10px;
+      padding-bottom: 5px;
+      cursor: pointer;
+      text-shadow: 0 6px 8px #00225b;
+      white-space: nowrap;
+      &:hover {
+        opacity: 1;
+      }
+    }
+    .home-header-name-active {
+      border-bottom: 4px solid #4b8df8;
+    }
+  }
+  .fade-enter {
+    opacity: 0;
+  }
+  .fade-enter-active {
+    transition: opacity 1s;
+  }
+}
+</style>

src/views/redirect/index.vue

@@ -0,0 +1,12 @@
+<script>
+export default {
+  created() {
+    const { params, query } = this.$route
+    const { path } = params
+    this.$router.replace({ path: '/' + path, query })
+  },
+  render: function(h) {
+    return h() // avoid warning message
+  }
+}
+</script>

vue.config.js

@@ -0,0 +1,50 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  publicPath: "./",
+  outputDir: "dist",
+  assetsDir: "static",
+  lintOnSave: false,
+  productionSourceMap: false,
+  devServer: {
+    host: "0.0.0.0",
+    port: 1109,
+    open: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    // proxy: {
+    //   "/kban/": {
+    //     target: "http://kban.runpengsoft.com",
+    //     changOrigin: true,
+    //     pathRewrite: {
+    //       "^/kban": "",
+    //     },
+    //   },
+    // },
+    client: {
+      overlay: false,
+    },
+  },
+  configureWebpack: {
+    optimization: {
+      splitChunks: {
+        chunks: "all",
+        cacheGroups: {
+          libs: {
+            name: "chunk-libs",
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            minSize: 10000,
+            maxSize: 10000,
+          },
+          default: {
+            chunks: "all",
+            priority: 5,
+            minSize: 10000,
+            maxSize: 10000,
+          },
+        },
+      },
+    },
+  },
+});