feat: 预测

src/router/router-static.js

@@ -1,122 +1,126 @@
-import Vue from "vue";
+import Vue from 'vue';
 //配置路由
-import VueRouter from "vue-router";
+import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 //1.创建组件
-import Index from "@/views/index";
-import Home from "@/views/home";
-import Board from "@/views/board";
-import Login from "@/views/login";
-import NotFound from "@/views/404";
-import UpdatePassword from "@/views/update-password";
-import pay from "@/views/pay";
-import register from "@/views/register";
-import center from "@/views/center";
-import qiye from "@/views/modules/qiye/list";
-import rainfalldata from "@/views/modules/rainfalldata/list";
-import rainfalldataforecast from "@/views/modules/rainfalldataforecast/list";
-import syslog from "@/views/modules/syslog/list";
-import Station from "@/views/modules/station/list";
-import loadData from "@/views/modules/load-data/index";
-
-
+import Index from '@/views/index';
+import Home from '@/views/home';
+import Board from '@/views/board';
+import Login from '@/views/login';
+import NotFound from '@/views/404';
+import UpdatePassword from '@/views/update-password';
+import pay from '@/views/pay';
+import register from '@/views/register';
+import center from '@/views/center';
+import qiye from '@/views/modules/qiye/list';
+import rainfalldata from '@/views/modules/rainfalldata/list';
+import rainfalldataforecast from '@/views/modules/rainfalldataforecast/list';
+import syslog from '@/views/modules/syslog/list';
+import Station from '@/views/modules/station/list';
+import loadData from '@/views/modules/load-data/index';
+import loadForecasting from '@/views/modules/load-forecasting/index';
 
 //2.配置路由   注意：名字
 export const routes = [
   {
-    path: "/",
-    name: "系统首页",
+    path: '/',
+    name: '系统首页',
     component: Index,
     children: [
       {
         // 这里不设置值，是把main作为默认页面
-        path: "/",
-        name: "系统首页",
+        path: '/',
+        name: '系统首页',
         component: Home,
-        meta: { icon: "", title: "center", affix: true },
+        meta: { icon: '', title: 'center', affix: true },
       },
       {
-        path: "/station",
-        name: "变电站",
+        path: '/station',
+        name: '变电站',
         component: Station,
       },
       {
-        path: "/loadData",
-        name: "电暖变电负荷数据",
+        path: '/loadData',
+        name: '电暖变电负荷数据',
         component: loadData,
       },
       {
-        path: "/updatePassword",
-        name: "修改密码",
+        path: '/loadForecasting',
+        name: '电采暖负荷预测',
+        component: loadForecasting,
+      },
+      {
+        path: '/updatePassword',
+        name: '修改密码',
         component: UpdatePassword,
-        meta: { icon: "", title: "updatePassword" },
+        meta: { icon: '', title: 'updatePassword' },
       },
       {
-        path: "/pay",
-        name: "支付",
+        path: '/pay',
+        name: '支付',
         component: pay,
-        meta: { icon: "", title: "pay" },
+        meta: { icon: '', title: 'pay' },
       },
       {
-        path: "/center",
-        name: "个人信息",
+        path: '/center',
+        name: '个人信息',
         component: center,
-        meta: { icon: "", title: "center" },
+        meta: { icon: '', title: 'center' },
       },
       {
-        path: "/qiye",
-        name: "变电站",
+        path: '/qiye',
+        name: '变电站',
         component: qiye,
       },
       {
-        path: "/rainfalldata",
-        name: "电采暖负荷数据",
+        path: '/rainfalldata',
+        name: '电采暖负荷数据',
         component: rainfalldata,
       },
       {
-        path: "/rainfalldataforecast",
-        name: "电采暖负荷预测",
+        path: '/rainfalldataforecast',
+        name: '电采暖负荷预测',
         component: rainfalldataforecast,
       },
       {
-        path: "/syslog",
-        name: "系统日志",
+        path: '/syslog',
+        name: '系统日志',
         component: syslog,
       },
     ],
   },
   {
-    path: "/login",
-    name: "login",
+    path: '/login',
+    name: 'login',
     component: Login,
-    meta: { icon: "", title: "login" },
+    meta: { icon: '', title: 'login' },
   },
   {
-    path: "/board",
-    name: "board",
+    path: '/board',
+    name: 'board',
     component: Board,
-    meta: { icon: "", title: "board" },
+    meta: { icon: '', title: 'board' },
   },
   {
-    path: "/register",
-    name: "register",
+    path: '/register',
+    name: 'register',
     component: register,
-    meta: { icon: "", title: "register" },
+    meta: { icon: '', title: 'register' },
   },
   {
-    path: "*",
+    path: '*',
     component: NotFound,
   },
 ];
 //3.实例化VueRouter  注意：名字
 const router = new VueRouter({
-  mode: "hash",
+  mode: 'hash',
   /*hash模式改为history*/
   routes, // （缩写）相当于 routes: routes
 });
 const originalPush = VueRouter.prototype.push;
 //修改原型对象中的push方法
 VueRouter.prototype.push = function push(location) {
-  return originalPush.call(this, location).catch((err) => err);
+  return originalPush.call(this, location).catch(err => err);
 };
 export default router;

src/utils/menu.js

@@ -6,128 +6,139 @@ const menu = {
           {
             child: [
               {
-                appFrontIcon: "cuIcon-qrcode",
-                menu: "变电站",
-                menuJump: "列表",
-                tableName: "station",
+                appFrontIcon: 'cuIcon-qrcode',
+                menu: '变电站',
+                menuJump: '列表',
+                tableName: 'station',
               },
             ],
-            menu: "变电站管理",
+            menu: '变电站管理',
           },
-           {
+          {
             child: [
               {
-                appFrontIcon: "cuIcon-qrcode",
-                menu: "电暖变电负荷数据",
-                menuJump: "列表",
-                tableName: "loadData",
+                appFrontIcon: 'cuIcon-qrcode',
+                menu: '电暖变电负荷数据',
+                menuJump: '列表',
+                tableName: 'loadData',
               },
             ],
-            menu: "电暖变电负荷数据管理",
+            menu: '电暖变电负荷数据管理',
           },
-        //   {
-        //     child: [
-        //       {
-        //         allButtons: ["新增", "查看", "修改", "删除", "首页总数"],
-        //         appFrontIcon: "cuIcon-qrcode",
-        //         buttons: ["新增", "查看", "修改", "删除", "首页总数"],
-        //         menu: "变电站",
-        //         menuJump: "列表",
-        //         tableName: "qiye",
-        //       },
-        //     ],
-        //     menu: "变电站管理",
-        //   },
+          {
+            child: [
+              {
+                appFrontIcon: 'cuIcon-qrcode',
+                menu: '电采暖负荷预测',
+                menuJump: '列表',
+                tableName: 'loadForecasting',
+              },
+            ],
+            menu: '电采暖负荷预测',
+          },
+          //   {
+          //     child: [
+          //       {
+          //         allButtons: ["新增", "查看", "修改", "删除", "首页总数"],
+          //         appFrontIcon: "cuIcon-qrcode",
+          //         buttons: ["新增", "查看", "修改", "删除", "首页总数"],
+          //         menu: "变电站",
+          //         menuJump: "列表",
+          //         tableName: "qiye",
+          //       },
+          //     ],
+          //     menu: "变电站管理",
+          //   },
           {
             child: [
               {
                 allButtons: [
-                  "新增",
-                  "查看",
-                  "修改",
-                  "删除",
-                  "城市降雨量",
-                  "月降雨量统计",
-                  "地型统计",
-                  "城市",
-                  "温度统计",
-                  "年降雨量统计",
-                  "导出",
-                  "导入",
-                  "上传模板",
-                  "下载模板",
-                  "首页总数",
-                  "首页统计",
+                  '新增',
+                  '查看',
+                  '修改',
+                  '删除',
+                  '城市降雨量',
+                  '月降雨量统计',
+                  '地型统计',
+                  '城市',
+                  '温度统计',
+                  '年降雨量统计',
+                  '导出',
+                  '导入',
+                  '上传模板',
+                  '下载模板',
+                  '首页总数',
+                  '首页统计',
                 ],
-                appFrontIcon: "cuIcon-copy",
+                appFrontIcon: 'cuIcon-copy',
                 buttons: [
-                  "新增",
-                  "查看",
-                  "修改",
-                  "删除",
-                  "城市降雨量",
-                  "月降雨量统计",
-                  "地型统计",
-                  "年降雨量统计",
-                  "首页总数",
-                  "温度统计",
-                  "导出",
-                  "导入",
-                  "上传模板",
-                  "下载模板",
+                  '新增',
+                  '查看',
+                  '修改',
+                  '删除',
+                  '城市降雨量',
+                  '月降雨量统计',
+                  '地型统计',
+                  '年降雨量统计',
+                  '首页总数',
+                  '温度统计',
+                  '导出',
+                  '导入',
+                  '上传模板',
+                  '下载模板',
                 ],
-                menu: "电采暖负荷数据",
-                menuJump: "列表",
-                tableName: "rainfalldata",
+                menu: '电采暖负荷数据',
+                menuJump: '列表',
+                tableName: 'rainfalldata',
               },
             ],
-            menu: "电采暖负荷数据管理",
+            menu: '电采暖负荷数据管理',
           },
           {
             child: [
               {
-                allButtons: ["新增", "查看", "修改", "删除"],
-                appFrontIcon: "cuIcon-clothes",
-                buttons: ["新增", "查看", "修改", "删除"],
-                menu: "电采暖负荷预测",
-                menuJump: "列表",
-                tableName: "rainfalldataforecast",
+                allButtons: ['新增', '查看', '修改', '删除'],
+                appFrontIcon: 'cuIcon-clothes',
+                buttons: ['新增', '查看', '修改', '删除'],
+                menu: '电采暖负荷预测',
+                menuJump: '列表',
+                tableName: 'rainfalldataforecast',
               },
             ],
-            menu: "电采暖负荷预测管理",
+            menu: '电采暖负荷预测管理',
           },
           {
             child: [
               {
-                allButtons: ["查看"],
-                appFrontIcon: "cuIcon-form",
-                buttons: ["查看"],
-                menu: "看板",
-                tableName: "hasBoard",
+                allButtons: ['查看'],
+                appFrontIcon: 'cuIcon-form',
+                buttons: ['查看'],
+                menu: '看板',
+                tableName: 'hasBoard',
               },
             ],
-            menu: "看板管理",
+            menu: '看板管理',
           },
           {
             child: [
               {
-                allButtons: ["查看", "删除"],
-                appFrontIcon: "cuIcon-explore",
-                buttons: ["查看", "删除"],
-                menu: "系统日志",
-                tableName: "syslog",
+                allButtons: ['查看', '删除'],
+                appFrontIcon: 'cuIcon-explore',
+                buttons: ['查看', '删除'],
+                menu: '系统日志',
+                tableName: 'syslog',
               },
             ],
-            menu: "系统管理",
+            menu: '系统管理',
           },
         ],
         frontMenu: [],
-        hasBackLogin: "是",
-        hasBackRegister: "否",
-        hasFrontLogin: "否",
-        hasFrontRegister: "否",
-        roleName: "管理员",
-        tableName: "users",
+        hasBackLogin: '是',
+        hasBackRegister: '否',
+        hasFrontLogin: '否',
+        hasFrontRegister: '否',
+        roleName: '管理员',
+        tableName: 'users',
       },
       {
         backMenu: [
@@ -135,73 +146,65 @@ const menu = {
             child: [
               {
                 allButtons: [
-                  "新增",
-                  "查看",
-                  "修改",
-                  "删除",
-                  "城市降雨量",
-                  "月降雨量统计",
-                  "地型统计",
-                  "城市",
-                  "温度统计",
-                  "年降雨量统计",
-                  "导出",
-                  "导入",
-                  "上传模板",
-                  "下载模板",
-                  "首页总数",
-                  "首页统计",
-                ],
-                appFrontIcon: "cuIcon-copy",
-                buttons: [
-                  "查看",
-                  "城市降雨量",
-                  "月降雨量统计",
-                  "地型统计",
-                  "温度统计",
-                  "年降雨量统计",
-                  "首页总数",
+                  '新增',
+                  '查看',
+                  '修改',
+                  '删除',
+                  '城市降雨量',
+                  '月降雨量统计',
+                  '地型统计',
+                  '城市',
+                  '温度统计',
+                  '年降雨量统计',
+                  '导出',
+                  '导入',
+                  '上传模板',
+                  '下载模板',
+                  '首页总数',
+                  '首页统计',
                 ],
-                menu: "降雨量数据",
-                menuJump: "列表",
-                tableName: "rainfalldata",
+                appFrontIcon: 'cuIcon-copy',
+                buttons: ['查看', '城市降雨量', '月降雨量统计', '地型统计', '温度统计', '年降雨量统计', '首页总数'],
+                menu: '降雨量数据',
+                menuJump: '列表',
+                tableName: 'rainfalldata',
               },
             ],
-            menu: "降雨量数据管理",
+            menu: '降雨量数据管理',
           },
           {
             child: [
               {
-                allButtons: ["新增", "查看", "修改", "删除"],
-                appFrontIcon: "cuIcon-clothes",
-                buttons: ["新增", "查看", "修改", "删除"],
-                menu: "电采暖负荷预测",
-                menuJump: "列表",
-                tableName: "rainfalldataforecast",
+                allButtons: ['新增', '查看', '修改', '删除'],
+                appFrontIcon: 'cuIcon-clothes',
+                buttons: ['新增', '查看', '修改', '删除'],
+                menu: '电采暖负荷预测',
+                menuJump: '列表',
+                tableName: 'rainfalldataforecast',
               },
             ],
-            menu: "电采暖负荷预测管理",
+            menu: '电采暖负荷预测管理',
           },
           {
             child: [
               {
-                allButtons: ["查看"],
-                appFrontIcon: "cuIcon-form",
-                buttons: ["查看"],
-                menu: "看板",
-                tableName: "hasBoard",
+                allButtons: ['查看'],
+                appFrontIcon: 'cuIcon-form',
+                buttons: ['查看'],
+                menu: '看板',
+                tableName: 'hasBoard',
               },
             ],
-            menu: "看板管理",
+            menu: '看板管理',
           },
         ],
         frontMenu: [],
-        hasBackLogin: "是",
-        hasBackRegister: "是",
-        hasFrontLogin: "否",
-        hasFrontRegister: "否",
-        roleName: "企业",
-        tableName: "qiye",
+        hasBackLogin: '是',
+        hasBackRegister: '是',
+        hasFrontLogin: '否',
+        hasFrontRegister: '否',
+        roleName: '企业',
+        tableName: 'qiye',
       },
     ];
   },

src/views/modules/load-forecasting/components/add-or-update.vue

@@ -0,0 +1,575 @@
+<template>
+  <div class="addEdit-block">
+    <el-form class="add-update-preview" ref="ruleForm" :model="ruleForm" label-width="180px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="变电站名称" prop="subNm">
+            <el-input v-model="ruleForm.subNm" placeholder="请输入变电站名称" :readonly="type == 'view'"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="归属县旗" prop="compNm">
+            <el-input v-model="ruleForm.compNm" placeholder="请输入归属县旗名称" :readonly="type == 'view'"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电压等级" prop="voltageLevel">
+            <el-input type="number" v-model="ruleForm.voltageLevel" placeholder="请输入电压等级" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="主变台数" prop="mainNum">
+            <el-input
+              type="number"
+              style="width: 100%"
+              v-model="ruleForm.mainNum"
+              placeholder="请输入主变台数"
+              :readonly="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="主变容量(MVA)" prop="mainCapacity">
+            <el-input
+              type="number"
+              style="width: 100%"
+              v-model="ruleForm.mainCapacity"
+              placeholder="请输入主变容量"
+              :readonly="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="采集日期" prop="dataDate">
+            <el-input v-model="ruleForm.dataDate" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="当日温度(℃)" prop="temperature">
+            <el-input v-model="ruleForm.temperature" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大负荷(MW)" prop="peakLoad">
+            <el-input v-model="ruleForm.peakLoad" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="基础负荷(MW)" prop="baseLoad">
+            <el-input v-model="ruleForm.baseLoad" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电采暖负荷(MW)" prop="electricHeatingLoad">
+            <el-input v-model="ruleForm.electricHeatingLoad" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电采暖负荷(MW)" prop="electricHeatingLoad">
+            <el-input v-model="ruleForm.electricHeatingLoad" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="用户数" prop="usersNum">
+            <el-input v-model="ruleForm.usersNum" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="平房区用户数" prop="pingfangUsers">
+            <el-input v-model="ruleForm.pingfangUsers" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="平房区接入电暖用户数" prop="electricHeatingUsers">
+            <el-input v-model="ruleForm.electricHeatingUsers" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="平房区已接入电采暖容量(MWA)" prop="pingfangElectricHeatingCapacity">
+            <el-input v-model="ruleForm.pingfangElectricHeatingCapacity" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item class="btn">
+        <el-button class="btn3" v-if="type != 'view'" type="success" @click="onSubmit">
+          <span class="icon iconfont icon-xihuan"></span>
+          提交
+        </el-button>
+        <el-button class="btn4" v-if="type != 'view'" type="success" @click="back()">
+          <span class="icon iconfont icon-xihuan"></span>
+          取消
+        </el-button>
+        <el-button class="btn5" v-if="type == 'view'" type="success" @click="back()">
+          <span class="icon iconfont icon-xihuan"></span>
+          返回
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      type: 'view', // add, edit, view
+      ruleForm: {},
+    };
+  },
+  props: ['parent'],
+  methods: {
+    openDialog(id, type) {
+      this.type = type;
+      this.resetForm();
+      if (id) this.info(id);
+    },
+    info(id) {
+      this.$http({
+        url: `subLoad/detail/${id}`,
+        method: 'get',
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    resetForm() {
+      this.ruleForm = {};
+    },
+    // 返回
+    back() {
+      this.parent.addOrUpdateOrDetailFlag = false;
+      this.resetForm();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.addEdit-block {
+  padding: 30px;
+  background: none;
+  width: 100%;
+}
+.add-update-preview {
+  border-radius: 10px;
+  padding: 40px 25% 40px 18%;
+  background: #ffffff;
+  border-color: #eee;
+  border-width: 1px;
+  border-style: solid;
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+
+.search-box {
+  position: absolute;
+}
+
+.el-date-editor.el-input {
+  width: auto;
+}
+.add-update-preview ::v-deep .el-form-item {
+  border: 0px solid #eee;
+  padding: 0;
+  margin: 0 0 22px 0;
+  display: inline-block;
+  width: 100%;
+}
+.add-update-preview .el-form-item ::v-deep .el-form-item__label {
+  padding: 0 10px 0 0;
+  color: #6e6e6e;
+  font-weight: 500;
+  width: 180px;
+  font-size: 15px;
+  line-height: 40px;
+  text-align: right;
+}
+
+.add-update-preview .el-form-item ::v-deep .el-form-item__content {
+  margin-left: 180px;
+}
+.add-update-preview .el-form-item span.text {
+  padding: 0 10px;
+  color: #333;
+  background: none;
+  font-weight: 500;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 40px;
+  min-width: 50%;
+}
+
+.add-update-preview .el-input {
+  width: 100%;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner[readonly='readonly'] {
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number {
+  text-align: left;
+  width: 100%;
+}
+.add-update-preview .el-input-number ::v-deep .el-input__inner {
+  text-align: left;
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
+  text-align: left;
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
+  display: none;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
+  display: none;
+}
+.add-update-preview .el-select {
+  width: 100%;
+}
+.add-update-preview .el-select ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 10px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 34px;
+}
+.add-update-preview .el-date-editor {
+  width: 100%;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner[readonly='readonly'] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .viewBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .viewBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .downBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .downBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .unBtn {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 0px;
+  margin: 0 20px 0 0;
+  outline: none;
+  color: #999;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  line-height: 40px;
+  height: 40px;
+  .iconfont {
+    margin: 0 2px;
+    color: #fff;
+    display: none;
+    font-size: 14px;
+    height: 34px;
+  }
+}
+.add-update-preview .unBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview ::v-deep .el-upload--picture-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  line-height: initial;
+  vertical-align: middle;
+}
+
+.add-update-preview ::v-deep .upload .upload-img {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload .el-icon-plus {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+.add-update-preview ::v-deep .el-upload__tip {
+  color: #666;
+  font-size: 15px;
+}
+
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-height: 150px;
+  height: auto;
+}
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner[readonly='readonly'] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  min-width: 400px;
+  height: auto;
+}
+.add-update-preview .el-form-item.btn {
+  padding: 0;
+  margin: 20px 0 0;
+  .btn1 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0356bb;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn1:hover {
+    opacity: 0.8;
+  }
+  .btn2 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #39c9ee;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 34px;
+    }
+  }
+  .btn2:hover {
+    opacity: 0.8;
+  }
+  .btn3 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #6ea0dc;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn3:hover {
+    opacity: 0.8;
+  }
+  .btn4 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #4abcff;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn4:hover {
+    opacity: 0.8;
+  }
+  .btn5 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0977fd;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn5:hover {
+    opacity: 0.8;
+  }
+}
+</style>

src/views/modules/load-forecasting/components/uploadModal.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-dialog
+    title="上传数据文件"
+    :visible.sync="open"
+    width="500px"
+    append-to-body
+    destroy-on-close
+  >
+    <el-form ref="ruleForm" :model="form" label-width="80px">
+      <el-form-item
+        label="归属县旗"
+        prop="compNm"
+        :rules="[
+          { required: true, message: '请选择归属县旗', trigger: 'change' },
+        ]"
+      >
+        <el-select
+          style="width: 200px"
+          v-model="form.compNm"
+          placeholder="请选择归属县旗"
+        >
+          <el-option
+            v-for="item in compList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.label"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="upload" label="选择文件">
+        <el-upload
+          class="upload-demo"
+          action="#"
+          ref="upload"
+          :on-change="handleFileChange"
+          :limit="1"
+          :on-exceed="handleExceed"
+          :before-upload="beforeUpload"
+          :file-list="fileList"
+          :auto-upload="false"
+          accept=".xls,.xlsx"
+        >
+          <el-button style="width: 200px;" slot="trigger" size="small" type=""
+            >点击选择</el-button
+          >
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="onSubmit" :loading="loading"
+          >确 定</el-button
+        >
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "FileUpload",
+  data() {
+    return {
+      loading: false,
+      fileList: [], 
+      form: {
+        compNm: "",
+        fileInfo: undefined,
+      },
+      open: false,
+      compList: [],
+    };
+  },
+  props: ["parent"],
+  methods: {
+    // 获取公司列表
+    async getCompList() {
+      this.compList = [];
+      const { data } = await this.$http({
+        url: `/company/lists`,
+        method: "get",
+      });
+      if (data && data.code === 0) {
+        this.compList = data.data.map((item) => ({
+          label: item.compName,
+          value: String(item.id),
+        }));
+      }
+    },
+    // 打开弹窗
+    openDialog() {
+      this.open = true;
+      this.getCompList();
+    },
+    // 处理超出图片个数操作
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    // 移除之前的操作
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    // 上传前的校验
+    beforeUpload(file) {
+      const isExcel =
+        file.type === "application/vnd.ms-excel" ||
+        file.type ===
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+      const isXLS = file.name.endsWith(".xls");
+      const isXLSX = file.name.endsWith(".xlsx");
+
+      if (!isExcel && !isXLS && !isXLSX) {
+        this.$message.error("上传文件必须是 Excel 格式！");
+        return false;
+      }
+      return true;
+    },
+    // 处理文件选择操作
+    handleFileChange(file, fileList) {
+      this.form.fileInfo = file;
+    },
+    // 处理文件上传操作
+    handleFileUpload() {
+      const formData = new FormData();
+      formData.append("file", this.form.fileInfo.raw);
+      formData.append("compNm", this.form.compNm);
+      this.loading = true;
+      // 调用后端服务器的接口
+      this.$http({
+        url: `subLoad/importExcel`,
+        method: "post",
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+        data: formData,
+      })
+        .then((resp) => {
+          if (resp.data.code === 0) {
+            this.$message.success("文件上传成功");
+            this.$refs.upload.clearFiles();
+            // 上传成功后，刷新数据列表
+            this.parent.search();
+            this.cancel();
+          } else {
+            this.$message.error(resp.data.msg);
+            this.$refs.upload.clearFiles();
+          }
+        })
+        .catch((e) => {
+          this.$message.error(e.message);
+          this.$refs.upload.clearFiles();
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    // 提交表单
+    onSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (!valid) return;
+        if (this.form.fileInfo) {
+          this.handleFileUpload();
+        } else {
+          this.$message.error("请选择文件");
+        }
+      });
+    },
+    // 取消操作
+    cancel() {
+      this.loading = false;
+      this.fileList = [];
+      this.form.compNm = "";
+      this.form.fileInfo = undefined;
+      this.open = false;
+    },
+  },
+};
+</script>