修改样式

licp

2024-04-16 c1e5dfb4c72a0ab2478d3b7295ab7deecd3f8c8c

修改样式

 src/assets/api/controller.js

@@ -85,6 +85,7 @@
    upEnum: "/enum/upEnum", //修改枚举
    delEnum: "/enum/delEnum", //删除枚举
    selectEnumByCategory: "/enum/selectEnumByCategory", //通过分类查询枚举
  getDic: "/enum/getDic", //获取数据字典的分类
}

const capacityScope = {

 src/components/view/a5-capacity-scope.vue

@@ -165,6 +165,7 @@
                        sonLaboratory: {select:[]},
                        unit: {select:[]},
                        sample: {select:[]},
            dic: {select:[]},
                    },
                    selectField: {
                        inspectionItemType: {
@@ -186,7 +187,8 @@
                        deviceGroup:{select:[]},
                        sample: {select:[]},
                        sonLaboratory: {select:[]},
                        unit: {select:[]}
                        unit: {select:[]},
            dic:{select:[]},
                    },
                    requiredAdd: ['sonLaboratory','inspectionItem', 'manHour', 'inspectionItemType','inspectionItemSubclass','inspectionValueType','laboratory','unit','method','price','manDay','deviceGroup','sample'],
                    requiredUp: ['sonLaboratory','inspectionItem', 'manHour', 'inspectionItemType','inspectionItemSubclass','inspectionValueType','laboratory','unit','method','price','manDay','deviceGroup','sample']
@@ -240,6 +242,7 @@
            this.selectTestObjectByName()
            this.getStandardTemplate()
            this.selectEnumByCategoryForSLaboratory()
      this.selectDocUnit()
            this.selectEnumByCategoryForUnit()
            this.getPower('0')
        },
@@ -333,6 +336,22 @@
                    this.itemParameterData.tagField.unit.select = res.data
                })
            },
      selectDocUnit() {
                this.$axios.post(this.$api.enums.getDic).then(res => {
                    this.itemParameterData.selectField.dic.select = res.data.map(m=>{
            return {
              label: m,
              value:m
            }
          })
                    this.itemParameterData.tagField.dic.select = res.data.map(m=>{
            return {
              label: m,
              value:m
            }
          })
                })
            },
            obtainItemParameterList() {
                this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
                    let data = []

 src/components/view/a6-device-overview.vue

@@ -39,13 +39,13 @@
  .card {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, 375px);
    grid-template-columns: repeat(auto-fit, 415px);
    /* justify-content: center; */
    grid-gap: 16px;
    min-height: 300px;
  }
  .card li{
    width: 375px;
    width: 415px;
    height: 165px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #EEEEEE;

 src/components/view/b1-report-preparation.vue

@@ -99,25 +99,55 @@
                <el-button type="primary" @click="confirmClaim">ç¡® å®š</el-button>
            </span>
        </el-dialog>
    <el-dialog title="报告审核" :visible.sync="issuedVisible" width="22cm" :modal-append-to-body="false" :fullscreen="fullscreen">
      <div class="full-screen">
    <el-dialog title="报告审核" :visible.sync="issuedVisible" width="400px" :modal-append-to-body="false" :fullscreen="fullscreen">
      <!-- <div class="full-screen">
        <i class="el-icon-full-screen" style="cursor: pointer;font-size: 18px" @click="fullscreen=true;" v-if="!fullscreen"></i>
        <img src="../../../static/img/no-full.svg" alt="" v-else style="cursor: pointer;" @click="fullscreen=false;" >
      </div>
      <div class="btns">
      </div> -->
      <!-- <div class="btns">
        <el-button type="primary" size="small">通过</el-button>
        <el-button size="small">不通过</el-button>
      </div>
      </div> -->
      <span slot="footer" class="dialog-footer">
                <el-button @click="issuedReasonVisible=true">不通过</el-button>
                <el-button type="primary" @click="subIssued" :loading="loadingIssued">通 è¿‡</el-button>
            </span>
        </el-dialog>
    <el-dialog title="报告批准" :visible.sync="approveVisible" width="22cm" :modal-append-to-body="false" :fullscreen="fullscreen">
      <div class="full-screen">
    <el-dialog title="不通过原因" :visible.sync="issuedReasonVisible" width="400px" :modal-append-to-body="false">
      <div class="search_thing">
        <div class="search_label">不通过原因：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable
            v-model="reason"></el-input></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="issuedReasonVisible=false">取消</el-button>
                <el-button type="primary" @click="handleIssuedReason" :loading="loadingIssuedReason">确定</el-button>
            </span>
        </el-dialog>
    <el-dialog title="报告批准" :visible.sync="approveVisible" width="400px" :modal-append-to-body="false" :fullscreen="fullscreen">
      <!-- <div class="full-screen">
        <i class="el-icon-full-screen" style="cursor: pointer;font-size: 18px" @click="fullscreen=true;" v-if="!fullscreen"></i>
        <img src="../../../static/img/no-full.svg" alt="" v-else style="cursor: pointer;" @click="fullscreen=false;" >
      </div>
      <div class="btns">
      </div> -->
      <!-- <div class="btns">
        <el-button type="primary" size="small">批准</el-button>
        <el-button size="small">不批准</el-button>
      </div> -->
      <span slot="footer" class="dialog-footer">
                <el-button @click="approveReasonVisible=true">不批准</el-button>
                <el-button type="primary" @click="subApprove" :loading="loadingApprove">批 å‡†</el-button>
            </span>
        </el-dialog>
    <el-dialog title="不批准原因" :visible.sync="approveReasonVisible" width="400px" :modal-append-to-body="false">
      <div class="search_thing">
        <div class="search_label">不批准原因：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable
            v-model="reason"></el-input></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="approveReasonVisible=false">取消</el-button>
                <el-button type="primary" @click="handleApproveReason" :loading="loadingApproveReason">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
@@ -146,15 +176,17 @@
          isIndex: true,
          showSelect: false,
          select: false,
          do: [{
            id: 'handleWeave',
            font: '在线编制',
            type: 'text',
            method: 'handleWeave',
            disabFun: (row, index) => {
              return row.isExamine != null
            }
          }, {
          do: [
          //   {
          //   id: 'handleWeave',
          //   font: '在线编制',
          //   type: 'text',
          //   method: 'handleWeave',
          //   disabFun: (row, index) => {
          //     return row.isExamine != null
          //   }
          // },
          {
            id: 'download',
            font: '下载',
            type: 'text',
@@ -179,6 +211,14 @@
            disabFun: (row, index) => {
              return row.isExamine != null
            }
          },{
            id: 'handleSubmit',
            font: '提交',
            type: 'text',
            method: 'handleSubmit',
            disabFun: (row, index) => {
              return row.isExamine != null
            }
          }, {
            id: 'handleIssued',
            font: '审核',
@@ -197,9 +237,9 @@
            }
          }],
          linkEvent: {
            code: {
              method: 'selectAllByOne'
            }
            // code: {
            //   method: 'selectAllByOne'
            // }
          },
          tagField: {
            isRatify: {
@@ -234,9 +274,17 @@
        statusList: [],
        claimVisible: false,
        issuedVisible: false,
        issuedReasonVisible:false,
        approveVisible: false,
        approveReasonVisible:false,
        fullscreen:false,
        value:``
        loadingApproveReason:false,
        loadingApprove:false,
        loadingIssuedReason:false,
        loadingIssued:false,
        value:``,
        reason:'',
        currentInfo:null,
      }
    },
    mounted() {
@@ -303,8 +351,9 @@
        let edit = false
        let up = false
        let res = false
        let issued = false
        let approve = false
        let sub = true
        let issued = true
        let approve = true
        for (var i = 0; i < power.length; i++) {
          if (power[i].menuMethod == 'upReportFile') {
            edit = true
@@ -322,18 +371,18 @@
        if (!issued) {
          this.componentData.do.splice(4, 1)
        }
        if (!res) {
        if (!sub) {
          this.componentData.do.splice(3, 1)
        }
        if (!up) {
        if (!res) {
          this.componentData.do.splice(2, 1)
        }
        if (!edit) {
          this.componentData.do.splice(0, 1)
        if (!up) {
          this.componentData.do.splice(1, 1)
        }
      },
      handleClose() {
        this.upLoad = false;
        // if (!edit) {
        //   this.componentData.do.splice(0, 1)
        // }
      },
      confirmClaim() {
        // console.log(this.$refs.Word.getValue())
@@ -359,11 +408,50 @@
                })
      },
      handleIssued(row){
        this.currentInfo = row;
        this.issuedVisible = true;
      },
      subIssued(){
        this.loadingIssued = true;
      },
      handleApprove(row){
        this.currentInfo = row;
        this.approveVisible = true;
      },
      subApprove(){
        this.loadingApprove = true;
      },
      handleSubmit(row){
        this.$confirm('是否提交当前报告?', "提交", {
                            confirmButtonText: "提交",
                            cancelButtonText: "取消",
                            type: "success"
                        }).then(() => {
                            this.$axios.post(this.delUrl, {
                                id: row.id
                            }).then(res => {
                                if (res.code === 201) {
                                    return
                                }
                                this.$message.success('提交成功')
                                this.selectList()
                            }).catch(e => {
                                this.$message.error('提交失败')
                            })
                        }).catch(() => {})
      },
      handleIssuedReason(){
        if(!this.reason){
          return this.$message.error('请输入原因')
        }
        this.loadingIssuedReason = true;
      },
      handleApproveReason(){
        if(!this.reason){
          return this.$message.error('请输入原因')
        }
        this.loadingApproveReason = true
      }
    }
  }
</script>

 src/components/view/b4-daily-business-statistics.vue

@@ -2,8 +2,8 @@
<div class="daily-main">
  <div class="daily-content" style="height:100%">
    <p style="font-size: 16px;padding:19.5px 0px">每日业务统计</p>
    <el-row :gutter="35">
      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
    <el-row :gutter="20">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务接收</h4>
@@ -11,13 +11,13 @@
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <span>较昨天</span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
          <img src="../../../static/img/daliy-0.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务完成</h4>
@@ -25,13 +25,13 @@
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <span>较昨天</span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
          <img src="../../../static/img/daliy-1.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务剩余</h4>
@@ -39,13 +39,13 @@
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <span>较昨天</span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
          <img src="../../../static/img/daliy-2.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测费用</h4>
@@ -53,13 +53,13 @@
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <span>较昨天</span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
          <img src="../../../static/img/daliy-3.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测工时</h4>
@@ -67,13 +67,13 @@
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-down.svg" alt="">
              <span :class="{active:true}" class="num">&nbsp; 8.5%&nbsp; </span>
              <span>较昨天</span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
          <img src="../../../static/img/daliy-4.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测人员</h4>
@@ -81,14 +81,14 @@
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <span>较昨天</span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
          <img src="../../../static/img/daliy-5.svg" alt="" srcset="">
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="35">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
        <div class="daily-card chart-box">
          <h4>近10日任务接收量</h4>

 src/components/view/b4-inspection-item-statistics.vue

@@ -2,8 +2,8 @@
  <div class="inspection-main">
    <div class="inspection-content" style="height:100%">
      <p style="font-size: 16px;padding:19.5px 0px">检测项目统计</p>
      <el-row :gutter="35">
        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
          <div class="inspection-card inspection-head">
            <div class="inspection-head-left">
              <h4>今日项目接收</h4>
@@ -11,13 +11,13 @@
              <div class="inspection-head-left-info">
                <img src="../../../static/img/daliy-up.svg" alt="">
                <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
                <span>较昨天</span>
                <span style="font-size: 12px;">较昨天</span>
              </div>
            </div>
            <img src="../../../static/img/daliy-0.svg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
          <div class="inspection-card inspection-head">
            <div class="inspection-head-left">
              <h4>今日项目完成</h4>
@@ -25,13 +25,13 @@
              <div class="inspection-head-left-info">
                <img src="../../../static/img/daliy-up.svg" alt="">
                <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
                <span>较昨天</span>
                <span style="font-size: 12px;">较昨天</span>
              </div>
            </div>
            <img src="../../../static/img/daliy-1.svg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
          <div class="inspection-card inspection-head">
            <div class="inspection-head-left">
              <h4>今日项目剩余</h4>
@@ -39,32 +39,32 @@
              <div class="inspection-head-left-info">
                <img src="../../../static/img/daliy-down.svg" alt="">
                <span :class="{active:true}" class="num">&nbsp; 8.5%&nbsp; </span>
                <span>较昨天</span>
                <span style="font-size: 12px;">较昨天</span>
              </div>
            </div>
            <img src="../../../static/img/daliy-2.svg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
          <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
            <h4 style="margin-bottom: 5px;">今日项目合格率</h4>
            <echart-module :id="'inspection-qualified'" :config="chartConfig2" :datas="chartData2" style="align-self: center;"></echart-module>
          </div>
        </el-col>
        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
          <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
            <h4 style="margin-bottom: 5px;">今日项目完成率</h4>
            <echart-module :id="'inspection-complete'" :config="chartConfig3" :datas="chartData3" style="align-self: center;"></echart-module>
          </div>
        </el-col>
        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
          <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
            <h4 style="margin-bottom: 5px;">今日项目延期率</h4>
            <echart-module :id="'inspection-extension'" :config="chartConfig4" :datas="chartData4" style="align-self: center;"></echart-module>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="35">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
          <div class="inspection-card chart-box">
            <h4>近10日项目接收量</h4>

 src/components/view/home.vue

ÎļþÒÑɾ³ý

 src/components/view/index-index.vue

@@ -20,11 +20,11 @@

    .no1 {
        display: flex;
    justify-content: space-between;
    }

    .no1 .left {
        width: 65%;
        margin-right: 10px;
    }

    .left-1 {
@@ -56,89 +56,11 @@
        font-size: 17px;
    }

    .left-2 {
        width: 100%;
        display: flex;
    }

    .card-1 {
        width: calc(25% - 40px);
        height: 100px;
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

    .card-1 .label .p1 {
        color: #333;
        font-size: 0.85vw;
        font-style: normal;
        font-weight: 400;
        margin-bottom: 10px;
    }

    .card-1 .label .p2 {
        color: #3A7BFA;
        font-size: 1.4vw;
        font-style: normal;
        font-weight: 400;
    }

    .card-1 .label {
        width: calc(100% - 4vw);
    }

    .card-1 .icon {
        background-color: #F3F6FA;
        border-radius: 50%;
        width: 4vw;
        height: 4vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-1 .icon i {
        font-size: 1.6vw;
        color: #3A7BFA;
    }

    .right {
        width: 35%;
        width: 32%;
        height: calc(7.2vw + 10px + 120px);
        display: flex;
        flex-wrap: wrap;
    }

    .card-2 {
        width: 33.3%;
        height: calc(50% - 20px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .card-2 .icon {
        width: 3.5vw;
        height: 3.5vw;
        background-color: #F3F6FA;
        border-radius: 24px;
    }

    .card-2 .icon i {
        font-size: 1.7vw;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .card-2 .text {
        width: 100%;
        text-align: center;
    }

    ::-webkit-scrollbar {
@@ -150,36 +72,14 @@
        border-radius: 3px;
    }

    .cart-3,
    .cart-4,
    .cart-5,
    .cart-6 {
        width: calc(50%);
        height: 300px;
        background-color: #fff;
    }

    .cart-3 div,
    .cart-4 div,
    .cart-5 div,
    .cart-6 div {
        width: 100%;
        height: calc(100% - 30px);
    }

    .card p {
        width: 100%;
        line-height: 30px;
    }

    .cart-3,
    .cart-5 {
        margin-right: 10px;
    }
</style>

<template>
    <div class="index">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
        <div class="no no1">
            <div class="left">
                <div class="left-1 card">
@@ -190,142 +90,28 @@
                        </div>
                    </div>
                </div>
                <div class="left-2">
                    <div class="card card-1">
                        <div class="label">
                            <p class="p1">昨日客户消费</p>
                            <p class="p2">{{data.data1.data1}}</p>
                        </div>
                        <div class="icon">
                            <i class="font icon-a-Group1139"></i>
                        </div>
                    </div>
                    <div class="card card-1">
                        <div class="label">
                            <p class="p1">昨日实际消费</p>
                            <p class="p2">{{data.data1.data2}}</p>
                        </div>
                        <div class="icon">
                            <i class="font icon-a-Group1139"></i>
                        </div>
                    </div>
                    <div class="card card-1">
                        <div class="label">
                            <p class="p1">昨日成本</p>
                            <p class="p2">{{data.data1.data3}}</p>
                        </div>
                        <div class="icon">
                            <i class="font icon-qiandai" style="color: #FF9900;font-size: 2.4vw;"></i>
                        </div>
                    </div>
                    <div class="card card-1" style="margin-right: 0;">
                        <div class="label">
                            <p class="p1">昨日实际成本</p>
                            <p class="p2">{{data.data1.data4}}</p>
                        </div>
                        <div class="icon">
                            <i class="font icon-qiandai" style="color: #FF9900;font-size: 2.4vw;"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right card">
                <p>常用功能</p>
                <div class="card-2" @click="openComponent('财务上报')">
                    <div class="icon">
                        <i class="font icon-a-Group1236" style="color: #3A7BFA;"></i>
                    </div>
                    <div class="text">财务上报</div>
                </div>
                <div class="card-2" @click="openComponent('进粉上报')">
                    <div class="icon">
                        <i class="font icon-a-Group1122" style="color: #34BD66;"></i>
                    </div>
                    <div class="text">进粉上报</div>
                </div>
                <div class="card-2" @click="openComponent('人员管理')">
                    <div class="icon">
                        <i class="font icon-a-Group1124" style="color: #FF9900;"></i>
                    </div>
                    <div class="text">人员管理</div>
                </div>
                <div class="card-2" @click="openComponent('角色管理')">
                    <div class="icon">
                        <i class="font icon-a-Group1126" style="color: #3A7BFA;"></i>
                    </div>
                    <div class="text">角色管理</div>
                </div>
                <div class="card-2" @click="openComponent('客户管理')">
                    <div class="icon">
                        <i class="font icon-a-Group1124" style="color: #34BD66;"></i>
                    </div>
                    <div class="text">客户管理</div>
                </div>
                <div class="card-2" @click="openComponent('项目管理')">
                    <div class="icon">
                        <i class="font icon-a-Group1232" style="color: #FF9900;"></i>
                    </div>
                    <div class="text">项目管理</div>
                </div>
            </div>
        </div>
        <div class="no no-2">
            <div class="card cart-3">
                <p>一周客户消费</p>
                <div id="card-1"></div>
            </div>
            <div class="card cart-4">
                <p>一周客户实际消费</p>
                <div id="card-2"></div>
            </div>
        </div>
        <div class="no no-2">
            <div class="card cart-5">
                <p>项目客户成本</p>
                <div id="card-3"></div>
            </div>
            <div class="card cart-6">
                <p>项目实际成本</p>
                <div id="card-4"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                user: {},
                now: null,
                data: {
                    data1: {},
                    data2: [],
                    data3: [],
                    data4: [],
                    data5: []
                },
                myChart1: null,
                myChart2: null,
                myChart3: null,
                myChart4: null
            }
        },
        mounted() {
            this.user = JSON.parse(localStorage.getItem('user'))
            this.nowTime()
            this.myChart1 = echarts.init($('#card-1')[0]);
            this.myChart2 = echarts.init($('#card-2')[0]);
            this.myChart3 = echarts.init($('#card-3')[0]);
            this.myChart4 = echarts.init($('#card-4')[0]);
            this.getDataList()
            setInterval(() => {
                this.nowTime()
            }, 1000)
            /* setInterval(() => {
                this.getDataList()
            }, 60 * 1000) */
        },
        methods: {
            nowTime() {
@@ -354,345 +140,11 @@
                }
                this.now = y + "-" + m + "-" + d + "  " + h + ":" + min + ":" + s;
            },
            openComponent(str) {
                var str1 = {}
                var str2 = -1
                switch (str) {
                    case '财务上报':
                        str1 = {
                            k: 6,
                            v: "财务上报",
                            i: "font icon-a-Group1236",
                            u: "finance-submit"
                        }
                        break
                    case '进粉上报':
                        str1 = {
                            k: 5,
                            v: "进粉上报",
                            i: "font icon-a-Group1122",
                            u: "fans-submit"
                        }
                        break
                    case '人员管理':
                        str1 = {
                            k: 8,
                            v: "人员管理",
                            i: "font icon-a-Group1124",
                            u: "person-manage"
                        }
                        break
                    case '角色管理':
                        str1 = {
                            k: 7,
                            v: "角色管理",
                            i: "font icon-a-Group1126",
                            u: "role-manage"
                        }
                        break
                    case '客户管理':
                        str1 = {
                            k: 4,
                            v: "客户管理",
                            i: "font icon-24gl-clipboardList",
                            u: "custom-enum"
                        }
                        str2 = 4
                        break
                    case '项目管理':
                        str1 = {
                            k: 11,
                            v: "项目管理",
                            i: "font icon-24gl-clipboardList",
                            u: "product-enum"
                        }
                        str2 = 4
                        break
                }
                this.$parent.addTab(str1, str2)
            },
            initEcharts1() {
                var myChart = this.myChart1
                var option;
                let dataX = []
                let data = [];
                this.data.data2.forEach(a => {
                    dataX.push(a.date)
                    data.push(a.account_consumptions)
                })
                let yMax = 1000;
                let dataShadow = [];
                for (let i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: "20px",
                        left: "50px",
                        bottom: "30px",
                        right: "20px"
                    },
                    title: {},
                    xAxis: {
                        type: 'category',
                        data: dataX,
                        axisLabel: {
                            color: '#333'
                        },
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#333'
                        },
                        splitLine: {
                            lineStyle: {
                                type: [10, 10],
                                dashOffset: 20
                            },
                            show: true
                        }
                    },
                    series: [{
                        type: 'bar',
                        barWidth: '20%',
                        roam: false,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#ffd062'
                                },
                                {
                                    offset: 0.5,
                                    color: '#ffa844'
                                },
                                {
                                    offset: 1,
                                    color: '#f59433'
                                }
                            ]),
                            barBorderRadius: [8, 8, 0, 0]
                        },
                        data: data
                    }]
                };
                option && myChart.setOption(option);
            },
            initEcharts2() {
                var myChart = this.myChart2
                var option;
                let dataX = []
                let data = [];
                this.data.data3.forEach(a => {
                    dataX.push(a.date)
                    data.push(a.consumption)
                })
                let yMax = 1000;
                let dataShadow = [];
                for (let i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: "20px",
                        left: "50px",
                        bottom: "30px",
                        right: "20px"
                    },
                    title: {},
                    xAxis: {
                        type: 'category',
                        data: dataX,
                        axisLabel: {
                            color: '#333'
                        },
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#333'
                        },
                        splitLine: {
                            lineStyle: {
                                type: [10, 10],
                                dashOffset: 20
                            },
                            show: true
                        }
                    },
                    series: [{
                        type: 'bar',
                        barWidth: '20%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#74b3fe'
                                },
                                {
                                    offset: 0.5,
                                    color: '#4982f3'
                                },
                                {
                                    offset: 1,
                                    color: '#1c56df'
                                }
                            ]),
                            barBorderRadius: [8, 8, 0, 0]
                        },
                        data: data
                    }]
                };
                option && myChart.setOption(option);
            },
            initEcharts3() {
                var myChart = this.myChart3
                var dataX = []
                var dataY = []
                this.data.data4.forEach(a => {
                    dataX.push(a.product)
                    dataY.push(a.customerCosts)
                })
                var option;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: "20px",
                        left: "50px",
                        bottom: "30px",
                        right: "20px"
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dataX,
                        axisLabel: {
                            interval: 0,
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: [10, 10],
                                dashOffset: 20
                            },
                            show: true
                        }
                    },
                    series: [{
                        data: dataY,
                        type: 'line',
                        areaStyle: {},
                        smooth: true,
                        symbolSize: 7,
                        lineStyle: {
                            color: '#3c7aff'
                        },
                        itemStyle: {
                            color: '#3c7aff'
                        },
                        areaStyle: {
                            color: '#E5EEFF'
                        }
                    }]
                };
                option && myChart.setOption(option);
            },
            initEcharts4() {
                var myChart = this.myChart4
                var dataX = []
                var dataY = []
                this.data.data5.forEach(a => {
                    dataX.push(a.product)
                    dataY.push(a.actualCost)
                })
                var option;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: "20px",
                        left: "50px",
                        bottom: "30px",
                        right: "20px"
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dataX,
                        axisLabel: {
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: [10, 10],
                                dashOffset: 20
                            },
                            show: true
                        }
                    },
                    series: [{
                        data: dataY,
                        type: 'line',
                        areaStyle: {},
                        smooth: true,
                        symbolSize: 7,
                        lineStyle: {
                            color: '#f59433'
                        },
                        itemStyle: {
                            color: '#f59433'
                        },
                        areaStyle: {
                            color: '#FFF6DE'
                        }
                    }]
                };
                option && myChart.setOption(option);
            },
            getDataList() {
                this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
                    this.data = res.data
                    this.initEcharts1()
                    this.initEcharts2()
                    this.initEcharts3()
                    this.initEcharts4()
                })
            }
        }
    }
</script>
</script>

 src/view/index.vue

@@ -436,7 +436,7 @@
                    k: 0,
                    v: "个人首页",
                    i: "font icon-a-Group1124",
                    u: "nullFace"
                    u: "index-index"
                }]
            }
            this.tabActive = JSON.parse(localStorage.getItem('tabActive'))
@@ -499,7 +499,7 @@
                    k: 0,
                    v: "个人首页",
                    i: "font icon-a-Group1124",
                    u: "nullFace"
                    u: "index-index"
                }]
                this.saveClick()
            },