新增我的首页

package.json

@@ -45,6 +45,7 @@
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^8.27.2",
     "vue-router": "^3.6.4",
+    "vue-seamless-scroll": "^1.1.23",
     "vue2-ace-editor": "0.0.15",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",

src/api/ledgerAssets/index.js

@@ -146,3 +146,15 @@ export async function getCode(code) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+// 导入备品备件
+export async function importCategorySparePart(data) {
+  const res = await request.post(
+    `/main/excelUpload/importCategorySparePart`,
+    data
+  );
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/home/index.vue

@@ -0,0 +1,615 @@
+<template>
+  <div id="home">
+    <div class="top_bar">
+      <div class="title">
+        <div class="line"></div>
+        <div class="text">常用功能</div>
+        <i class="el-icon-circle-plus-outline"></i>
+      </div>
+      <div class="list">
+        <div class="item" v-for="(item, index) in options">
+          <img :src="item.imgUrl" />
+          <div>{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="warning_bar">
+      <i class="el-icon-message-solid"></i>
+      <div>5条 备品低于安全库存，请即时处理!</div>
+      <el-button type="danger" size="mini">立即处理</el-button>
+    </div>
+    <div class="info_bar">
+      <div class="echarts_box">
+        <div class="search_box">
+          <div class="tabs">
+            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
+              <el-radio-button label="top">平均修复时间MTTR</el-radio-button>
+              <el-radio-button label="right"
+                >平均故障间隔时间MTBF</el-radio-button
+              >
+              <el-radio-button label="bottom">故障设备分布</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="select">
+            <el-select
+              size="mini"
+              style="width: 100px; margin-right: 10px"
+              v-model="value"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              size="mini"
+              style="width: 100px"
+              v-model="value"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options2"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div ref="echatrs" class="echatrs"></div>
+      </div>
+      <div class="toDo">
+        <div class="title">
+          <div class="line"></div>
+          <div class="text">待处理(17条)</div>
+          <div>更多</div>
+        </div>
+        <div class="list">
+          <vue-seamless-scroll
+            :data="listData"
+            :class-option="seamlessScrollOption"
+            class="scroll_box"
+          >
+            <ul>
+              <li
+                v-for="(item, index) in toDoList"
+                :key="index"
+                class="srcoll_item"
+                style="padding: 5px; margin: 5px"
+              >
+                <span>{{ item.title }}</span>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
+        </div>
+      </div>
+    </div>
+    <div class="worker_bar">
+      <div class="history">
+        <div class="title">
+          <div class="line"></div>
+          <div class="text">近7日工单信息</div>
+        </div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in repaireOptions">
+            <div class="img_box">
+              <img :src="item.imgUrl" />
+            </div>
+            <div>
+              <div>{{ item.title }}</div>
+              <div class="text">{{ item.num }}/{{ item.total }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="total">
+        <div class="title">
+          <div class="line"></div>
+          <div class="text">工单响应时间统计TOP10</div>
+          <el-select
+            size="mini"
+            style="width: 100px"
+            v-model="value"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in dateOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="list">
+          <vue-seamless-scroll
+            :data="listData"
+            :class-option="seamlessScrollOption"
+            class="scroll_box"
+          >
+            <ul>
+              <li
+                v-for="(item, index) in listData"
+                :key="index"
+                class="srcoll_item"
+                style="padding: 5px; margin: 5px"
+              >
+                <span class="name">{{ item.name }}</span
+                ><el-progress
+                  :text-inside="true"
+                  :stroke-width="20"
+                  :percentage="item.num"
+                ></el-progress
+                ><span>分钟</span>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import * as echarts from 'echarts';
+  import vueSeamlessScroll from 'vue-seamless-scroll';
+  export default {
+    data() {
+      return {
+        echarts,
+        value: 1,
+        toDoList: [
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          },
+          {
+            title:
+              '类型:审批 申请人:系统 标题:巡点检计划标题:巡点检计划点检计划....'
+          }
+        ],
+        listData: [
+          {
+            name: '晏银戈',
+            num: 30
+          },
+          {
+            name: '陈忠华',
+            num: 40
+          },
+          {
+            name: '杨伟庭',
+            num: 20
+          },
+          {
+            name: '谭警',
+            num: 60
+          },
+          {
+            name: '旭昇设',
+            num: 70
+          }
+        ],
+        options1: [
+          {
+            label: '按月',
+            value: 1
+          }
+        ],
+        options2: [
+          {
+            label: '成型模压',
+            value: 1
+          }
+        ],
+        dateOptions: [
+          {
+            label: '近七日',
+            value: 1
+          },
+          {
+            label: '近一个月',
+            value: 2
+          }
+        ],
+        options: [
+          {
+            title: '设备台账',
+            imgUrl: require('../../assets/icon.png')
+          },
+          {
+            title: '原始台账',
+            imgUrl: require('../../assets/icon.png')
+          },
+          {
+            title: '备品备件',
+            imgUrl: require('../../assets/icon.png')
+          },
+          {
+            title: '周转车台账',
+            imgUrl: require('../../assets/icon.png')
+          },
+          {
+            title: '舟皿台账',
+            imgUrl: require('../../assets/icon.png')
+          },
+          {
+            title: '资产台账',
+            imgUrl: require('../../assets/icon.png')
+          },
+          {
+            title: '模具台账',
+            imgUrl: require('../../assets/icon.png')
+          }
+        ],
+        repaireOptions: [
+          {
+            title: '巡点检工单',
+            imgUrl: require('../../assets/vector.png'),
+            total: 0,
+            num: 0
+          },
+          {
+            title: '保养工单',
+            imgUrl: require('../../assets/vector.png'),
+            total: 0,
+            num: 0
+          },
+          {
+            title: '维修工单',
+            imgUrl: require('../../assets/vector.png'),
+            total: 0,
+            num: 0
+          }
+        ]
+      };
+    },
+    components: {
+      vueSeamlessScroll
+    },
+    computed: {
+      seamlessScrollOption() {
+        return {
+          step: 0.2, // 数值越大速度滚动越快
+          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+          hoverStop: true, // 是否开启鼠标悬停stop
+          direction: 1, // 0向下 1向上 2向左 3向右
+          openWatch: true, // 开启数据实时监控刷新dom
+          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+        };
+      }
+    },
+    mounted() {
+      let myChart = echarts.init(this.$refs.echatrs);
+      let option = {
+        title: {
+          text: 'Stacked Line'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Email',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: 'Union Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: 'Video Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: 'Direct',
+            type: 'line',
+            stack: 'Total',
+            data: [320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name: 'Search Engine',
+            type: 'line',
+            stack: 'Total',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  #home {
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
+    margin: 10px;
+    background-color: #f0f3f3;
+    display: flex;
+    flex-direction: column;
+    .title {
+      padding: 0 10px;
+      box-sizing: border-box;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      .line {
+        width: 5px;
+        height: 20px;
+        background-color: #157a2c;
+        margin-right: 10px;
+      }
+      .text {
+        flex: 1;
+        font-size: 14px;
+        margin-right: 10px;
+      }
+      .el-icon-circle-plus-outline {
+        font-size: 16px !important;
+        margin-top: 2px;
+      }
+    }
+    .top_bar {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 8px;
+      height: 100px;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 10px;
+      .list {
+        flex: 1;
+        display: flex;
+        > div {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          margin-left: 20px;
+          > img {
+            width: 40px;
+            height: 40px;
+            margin-right: 10px;
+            background-color: #157a2c;
+            border-radius: 50%;
+            padding: 10px;
+            box-sizing: border-box;
+          }
+          > div {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+    .warning_bar {
+      height: 50px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      background-color: #ffeded;
+      padding: 10px 20px;
+      box-sizing: border-box;
+      margin-bottom: 10px;
+      color: #ff4949;
+      .el-icon-message-solid {
+        margin-top: 2px;
+      }
+      > div {
+        margin-left: 10px;
+        flex: 1;
+        font-size: 14px;
+      }
+    }
+    .info_bar {
+      flex: 1 0 auto;
+      height: 0;
+      width: 100%;
+      display: flex;
+      overflow: hidden;
+      margin-bottom: 10px;
+      .echarts_box {
+        flex: 3;
+        height: 100%;
+        margin-right: 10px;
+        background-color: #fff;
+        border-radius: 8px;
+        padding: 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        .search_box {
+          display: flex;
+          .tabs {
+            flex: 1;
+          }
+        }
+        .echatrs {
+          flex: 1;
+          height: 100%;
+        }
+      }
+      .toDo {
+        flex: 1;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 8px;
+        .list {
+          flex: 1;
+          overflow: hidden;
+          .scroll_box {
+            width: 100%;
+          }
+        }
+      }
+    }
+    .worker_bar {
+      height: 200px;
+      display: flex;
+      .history {
+        flex: 3;
+        height: 100%;
+        margin-right: 10px;
+        background-color: #fff;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        .list {
+          flex: 1;
+          display: flex;
+          padding: 10px 20px;
+          box-sizing: border-box;
+          > div {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            background-color: #398f4d;
+            margin-right: 30px;
+            margin-bottom: 30px;
+            border-radius: 8px;
+            color: #fff;
+            .img_box {
+              flex: 0 0 130px;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-top-right-radius: 50%;
+              border-bottom-right-radius: 50%;
+              border-top-left-radius: 8px;
+              border-bottom-left-radius: 8px;
+              background-color: #38994e;
+              > img {
+                width: 80px;
+                height: 80px;
+              }
+            }
+
+            > div {
+              flex: 1;
+              font-size: 16px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              .text {
+                margin-top: 10px;
+                font-size: 20px;
+              }
+            }
+          }
+        }
+      }
+      .total {
+        flex: 1;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        .list {
+          flex: 1;
+          overflow: hidden;
+          .scroll_box {
+            width: 100%;
+            .srcoll_item {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              .el-progress {
+                flex: 1;
+                margin-right: 10px;
+              }
+              .name {
+                width: 40px;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/ledgerAssets/components/details/InternetDryingBox/components/chart_temp.vue

@@ -72,6 +72,44 @@
             year: 1
           }
         },
+        echartsOptions: (option = {
+          title: {
+            text: 'Stacked Line'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['Union Ads']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {}
+            }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              name: 'Union Ads',
+              type: 'line',
+              stack: 'Total',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            }
+          ]
+        }),
         lineDataList: {},
         myChart: null,
         propertyList: [

src/views/ledgerAssets/sparepart/components/sparepart-list.vue

@@ -27,7 +27,7 @@
         >
           新建
         </el-button>
-        <el-button
+        <!-- <el-button
           size="small"
           type="primary"
           icon="el-icon-download"
@@ -35,7 +35,22 @@
           @click="btnExport"
         >
           导出
-        </el-button>
+        </el-button> -->
+        <div class="upload">
+          <el-upload
+            :show-file-list="false"
+            class="upload-demo"
+            action="#"
+            :before-upload="beforeUpload"
+            :on-success="suuccessUpload"
+          >
+            <slot>
+              <el-button size="small" type="primary" :loading="isLoading"
+                >导入</el-button
+              >
+            </slot>
+          </el-upload>
+        </div>
       </template>
 
       <!-- 编码列 -->
@@ -81,7 +96,7 @@
   import { getByCode } from '@/api/system/dictionary-data';
   import { businessStatus, networkStatus } from '@/utils/dict/warehouse';
   import SparepartSearch from './sparepart-search.vue';
-  import { getAssetList, downloadAsset } from '@/api/ledgerAssets';
+  import { getAssetList, importCategorySparePart } from '@/api/ledgerAssets';
   import dictMixins from '@/mixins/dictMixins';
   import axios from 'axios';
   import {
@@ -102,6 +117,7 @@
     },
     data() {
       return {
+        isLoading: false,
         networkStatus,
         businessStatus,
         assetLevel: [],
@@ -273,6 +289,28 @@
       this.getAssetLevelOptions();
     },
     methods: {
+      suuccessUpload() {
+        this.isLoading = false;
+      },
+      // 上传备品备件
+      beforeUpload(file) {
+        if (file.size / 1024 / 1024 > this.size) {
+          this.$message.error(`大小不能超过 ${this.size}MB`);
+          return false;
+        }
+
+        if (this.limit > 0 && this.fileList.length === this.limit) {
+          this.$message.error(`最多上传 ${this.limit}个文件`);
+          return false;
+        }
+        let formData = new FormData();
+        formData.append('file', file);
+        this.isLoading = true;
+        return importCategorySparePart(formData).then((res) => {
+          console.log(res);
+          return res.data;
+        });
+      },
       // 获取资产级别下拉
       async getAssetLevelOptions() {
         let { data } = await getByCode('asset_level');
@@ -361,4 +399,9 @@
   .ele-btn-icon {
     margin-left: 20px;
   }
+  .upload {
+    display: inline-block;
+    width: 100px;
+    margin-left: 10px;
+  }
 </style>