ChuangHeng/src/views/modules/home.vue

<template>
  <div class="page">
    <el-row gutter="10">
      <el-col :span="6">
        <div class="home_box">
          <div class="tg_top adfacjb">
            <div class="tgt_l">执行项目</div>
            <div class="tgt_r">
              <img src="@/assets/images/agent/home_xm.png">
            </div>
          </div>
          <div class="tg_num adfac">{{ 42 }}<span>个</span></div>
          <div class="tg_jd">
            <div class="tj tj1" :style="{'width':70+'%'}"></div>
          </div>
          <div class="tg_tn adfac">
            <div class="tt_pre adfac">进行中<span>{{6}}</span></div>
            <div class="tt_pre adfac">已完成<span>{{36}}</span></div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="home_box">
          <div class="tg_top adfacjb">
            <div class="tgt_l">调查问卷</div>
            <div class="tgt_r">
              <img src="@/assets/images/agent/home_wj.png">
            </div>
          </div>
          <div class="tg_num adfac">{{ 120 }}<span>份</span></div>
          <div class="tg_jd">
            <div class="tj tj2" :style="{'width':40+'%'}"></div>
          </div>
          <div class="tg_tn adfac">
            <div class="tt_pre adfac">已完成<span>{{36}}</span></div>
            <div class="tt_pre adfac">进行中<span>{{6}}</span></div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="home_box">
          <div class="tg_top adfacjb">
            <div class="tgt_l">团队</div>
            <div class="tgt_r">
              <img src="@/assets/images/agent/home_td.png">
            </div>
          </div>
          <div class="tg_num adfac">{{ 43 }}<span>个</span></div>
          <div class="tg_jd">
            <div class="tj tj3" :style="{'width':100+'%'}"></div>
          </div>
          <div class="tg_tn adfac">
            <div class="tt_pre adfac">团队成员<span>{{236}}</span></div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="home_box">
          <div class="tg_top adfacjb">
            <div class="tgt_l">知识总量</div>
            <div class="tgt_r">
              <img src="@/assets/images/agent/home_zs.png">
            </div>
          </div>
          <div class="tg_num adfac">{{ 356720 }}<span>条</span></div>
          <div class="tg_jd">
            <div class="tj tj4" :style="{'width':80+'%'}"></div>
          </div>
          <div class="tg_tn adfac">
            <div class="tt_pre adfac">解析中<span>{{6}}</span></div>
            <div class="tt_pre adfac">已完成<span>{{356714}}</span></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row gutter="10" style="margin-top: 10px;">
      <el-col :span="12">
        <div class="home_box">
          <div class="tj_top adfacjb">
            <div class="tjt_l">
              <p>答卷数量统计</p>
              <el-date-picker style="border: none;"
                v-model="startEndDate"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="tjt_r adf">
              <div class="tjtr_pre" :class="{'active':tidx===1}" @click="handleChangeTime(1)">近15天</div>
              <div class="tjtr_pre" :class="{'active':tidx===2}" @click="handleChangeTime(2)">近一年</div>
            </div>
          </div>
          <div class="tj_chart">
            <div ref="djsltjRef" style="width: 100%; height: 260px;"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="home_box">
          <div class="zb_title">问卷类别占比</div>
          <div ref="wjlbzbRef" style="width: 100%; height: 300px;"></div>
        </div>
      </el-col>
    </el-row>
    <el-row gutter="10" style="margin-top: 10px;">
      <el-col :span="12">
        <div class="home_box">
          <div class="hb_title adfacjb">
            <div class="hbt_l">最近的调查问卷</div>
            <div class="hbt_r">查看更多 ></div>
          </div>
          <div class="hb_list">
            <div class="hl_item adfacjb" v-for="(item,index) in dcwjList" :key="index">
              <div class="hil_l">
                <p>{{ item.name }}</p>
                <p class="tip">{{ item.team }} · {{ item.persons }}名成员</p>
              </div>
              <div class="hil_r">
                <div class="hr_btn" v-if="item.status===1">已完成</div>
                <div class="hr_btn jxz" v-if="item.status===0">进行中</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="home_box">
          <div class="hb_title adfacjb">
            <div class="hbt_l">近期报告</div>
            <div class="hbt_r">更多报告 ></div>
          </div>
          <div class="hb_list">
            <div class="hl_item adfacjb" v-for="(item,index) in jqbgList" :key="index">
              <div class="hil_l">
                <p>{{ item.name }}</p>
                <p class="tip">{{ item.type }} · 生成于{{ item.time }}</p>
              </div>
              <div class="hil_r">
                <div class="hr_btn ck">查看</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="">
  import * as echarts from "echarts";
  import { ref, getCurrentInstance, onMounted } from 'vue'
  const { proxy } = getCurrentInstance();

  const tidx = ref(1);
  const startEndDate = ref('');
  const djsltjRef = ref(null);
  const wjlbzbRef = ref(null);
  
  const dcwjList = ref([
    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1},
    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:0},
    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1},
    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1},
    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1}
  ]);
  const jqbgList = ref([
    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'},
    {name:'TechCorp 团队分析',type:'个人报告',time:'2025-04-20 13:00'},
    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'},
    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'},
    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'}
  ])

  const handleChangeTime = (idx) => {
    tidx.value = idx;
  }

  const initDjsltjChart = () => {
    let myChart = echarts.init(djsltjRef.value);
    let option = {
      xAxis: {
        type: 'category',
        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
      },
      tooltip: {
        trigger: 'axis'
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        top: '10%',
        containLabel: true
      },
      series: [
        {
          data: [0, 40, 30, 70, 100, 60, 50, 40, 70, 60, 50, 0],
          type: 'line',
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#D5E5FC'
              },
              {
                offset: 1,
                color: '#F2E9F0'
              }
            ])
          },
          lineStyle: {
            width: 3,
            color:{
              type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 1, color: '#8360FC'  
                }, {
                  offset: 0.5, color: '#8E49CB'
                }, {
                  offset: 0, color: '#25D9FF'
                }]
            }
          },
        }
      ]
    };
    myChart.setOption(option)
  }

  const initWjlbzbChart = () => {
    let myChart = echarts.init(wjlbzbRef.value);
    let option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '-1%',
        left: 'center'
      },
      color:['#761E6A','#D2B7CE','#9D5F94'],
      series: [
        {
          name: '问卷类别占比',
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['50%', '45%'],
          itemStyle: {
            borderRadius: 0
          },
          data: [
            { value: 1048, name: '高级问卷' },
            { value: 735, name: '中级问卷' },
            { value: 580, name: '初级问卷' },
          ]
        }
      ]
    };
    myChart.setOption(option)
  }

  onMounted(()=>{
    initDjsltjChart();
    initWjlbzbChart();
  })
</script>

<style scoped lang="scss">
  .page{
    padding: 14px 16px;
    background-color: #FAFAFA;
    overflow-y: auto;

    .home_box{
      padding: 26px 20px;
      background: #FFFFFF;
      border-radius: 6px;
      border: 1px solid #F3F4F6;
      .tg_top{
        .tgt_l{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #646464;
          line-height: 16px;
        }
        .tgt_r{
          img{
            width: 40px;
            height: 40px;
          }
        }
      }
      .tg_num{
        margin-top: 1px;
        font-family: DINAlternate, DINAlternate;
        font-weight: bold;
        font-size: 32px;
        color: #252525;
        line-height: 32px;
        span{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          line-height: 16px;
          margin-left: 5px;
        }
      }
      .tg_jd{
        margin-top: 14px;
        width: 100%;
        height: 8px;
        background: #F3F4F6;
        position: relative;
        border-radius: 4px;
        .tj{
          height: 8px;
          border-radius: 4px;
          position: absolute;
          left: 0;
          top: 0;
          &.tj1{
            background: linear-gradient( 270deg, #3C82F6 0%, #3C82F6 100%);
          }
          &.tj2{
            background: linear-gradient( 270deg, #9D5F94 0%, #904A87 100%);
          }
          &.tj3{
            background: linear-gradient( 90deg, #189B9B 0%, #7DC6C6 100%);
          }
          &.tj4{
            background: linear-gradient( 90deg, #FFD750 0%, #FDE182 100%);
          }
        }
      }
      .tg_tn{
        margin-top: 18px;
        .tt_pre{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #6B7280;
          line-height: 14px;
          span{
            color: #252525;
            margin-left: 5px;
          }
          &:last-child{
            margin-left: 48px;
          }
        }
      }

      .tj_top{
        .tjt_l{
          p{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #393939;
            line-height: 22px;
          }
        }
        .tjt_r{
          .tjtr_pre{
            width: 54px;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #E5E7EB;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #4B5563;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            margin-left: 16px;
            &.active{
              background: #904A87;
              color: #FFFFFF;
            }
          }
        }
      }
      .zb_title{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 16px;
        color: #252525;
        line-height: 22px;
      }

      .hb_title{
        .hbt_l{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 16px;
          color: #252525;
          line-height: 22px;
        }
        .hbt_r{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #833478;
          line-height: 20px;
          text-align: right;
          cursor: pointer;
        }
      }
      .hb_list{
        margin-top: 12px;
        .hl_item{
          width: 100%;
          padding: 10px 20px;
          box-sizing: border-box;
          margin-top: 12px;
          background: #F9FAFB;
          border-radius: 8px;
          .hil_l{
            p{
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 14px;
              color: #252525;
              line-height: 20px;
              &.tip{
                font-weight: 400;
                color: #6B7280;
                margin-top: 2px;
              }
            }
          }
          .hil_r{
            .hr_btn{
              width: 68px;
              height: 28px;
              background: #E1F0F0;
              border-radius: 14px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #009191;
              line-height: 28px;
              text-align: center;
              &.jxz{
                background: #FCECB6;
                color: #864F10;
              }
              &.ck{
                background: rgba(118,30,106,0.16);
                color: #761E6A;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }

  ::v-deep .el-range-editor.el-input__inner{
    padding: 3px 0 !important;
  }
  ::v-deep .el-date-editor .el-range__icon{
    display: none !important;
  }
  ::v-deep .el-date-editor .el-range-input{
    width: 30% !important;
  }
</style>