wxgzh/resources/views/admin/partials/dashboard.blade.php

<script src="/assets/js/vue.js"></script>
<script src="/assets/js/highcharts.js"></script>
<script src="/assets/js/element_ui.js"></script>
<!-- <link rel="stylesheet" href="/assets/css/common.css"> -->
<link rel="stylesheet" href="/assets/css/element_ui.css">
    <div id="container" style="height:100%">
        <template>
          <div class="main w vh" >
            <div class="left">
              <div class="content_1">
               
                <div class="section_3">
                  <div class="section_3_con">
                    <div class="section_3_1"></div>
                    <div class="section_3_2">
                      <em>关注人数：[[pageData.users]]人</em>
                      <span>注册时间：2023年09月28日</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content_2">
                <div class="section h">
                  <img src="assets/images/dashboard/left_1b.png" style="max-width: 100%;">
                </div>
              </div>
            </div>
            <!--右侧开始-->
            <div class="right">
              
              <div class="section_2">
                <div class="section_2_1">
                  <div class="section_2_1_l">
                    <div class="content">
                      <div class="section_2_head">
                        <div class="title">心理评估人次</div>
                        <el-select class="select" size='mini' clearable v-model="cpColumnId" filterable placeholder="近7日" @change="cpChange($event)">
                          <el-option v-for="item in columnList" :key="item.id" :label="item.name" :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                      <div class="data" style="height: 95%;">
                        <div id="chart5" :options="chartOptions5" style="width: 100%; height: 100%; border-radius: 15px;">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="section_2_1_r">
                    <div class="li">
                      <div class="li_content">
                        <img src="/assets/images/dashboard/right_icon1.png" alt="" srcset="" class="img">
                        <div class="name">评估总人次</div>
                        <div class="number">[[pageData.cp]]<span>人</span></div>
                      </div>
                    </div>
                    <div class="li">
                      <div class="li_content">
                        <img src="/assets/images/dashboard/right_icon2.png" alt="" srcset="" class="img">
                        <div class="name">科普总人次</div>
                        <div class="number">[[pageData.kp]]<span>人</span></div>
                      </div>
                    </div>
                    <div class="li">
                      <div class="li_content">
                        <img src="/assets/images/dashboard/right_icon3.png" alt="" srcset="" class="img">
                        <div class="name">疗愈总人次</div>
                        <div class="number">[[pageData.xl]]<span>人</span></div>
                      </div>
                    </div>
                    <div class="li">
                      <div class="li_content">
                        <img src="/assets/images/dashboard/right_icon4.png" alt="" srcset="" class="img">
                        <div class="name">挂号总人次</div>
                        <div class="number">[[pageData.gh]]<span>人</span></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="section_2_2">
                  <div class="section_2_2_l">
                    <div class="content">
                      <div class="section_2_head">
                        <div class="title">心理科普人次</div>
                        <el-select class="select" size='mini' clearable v-model="cpColumnId" filterable placeholder="近7日" @change="cpChange($event)">
                          <el-option v-for="item in columnList" :key="item.id" :label="item.name" :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                      <div class="data"  style="height: 95%;">
                        <div id="chart3" :options="chartOptions3" style="width: 100%; height: 100%; border-radius: 15px;">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="section_2_2_r">
                    <div class="content">
                      <div class="section_2_head">
                        <div class="title">心理疗愈人次</div>
                        <el-select class="select" size='mini' clearable v-model="cpColumnId" filterable placeholder="近7日" @change="cpChange($event)">
                          <el-option v-for="item in columnList" :key="item.id" :label="item.name" :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                      <div class="data"  style="height: 95%;">
                        <div id="chart1" :options="chartOptions1" style="width: 100%; height: 100%; border-radius: 15px;">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
    </div>

    <script>
        // 创建 Vue 实例
        const app = new Vue({
            delimiters:['[[',']]'],
            el: '#container',
            data() {
                return {
                    apiUrl: '{{config("app.url")}}', // 替换为实际 API URL
                    successCode: '200', // 替换为实际成功代码
                    chartOptions1: { accessibility: { enabled: false }},
                    chartOptions3: { accessibility: { enabled: false }},
                    chartOptions5: { accessibility: { enabled: false }},
                    cpColumnId: 1,
                    kpColumnId: 1,
                    xlColumnId: 1,
                    columnList: [{
                      "id": 1,
                      "name": "近7日"
                    }, {
                      "id": 2,
                      "name": "2023年"
                    }],

                    pageData: {},
                };
            },
            mounted() {
                this.getPageData();
            },
            methods: {
              cpChange:function(value){
                let _this = this;
                _this.cpColumnId = value;
                _this.getPageData();
              },
              kpChange:function(value){
                let _this = this;
                _this.kpColumnId = value;
                _this.getPageData();
              },
              xlChange:function(value){
                let _this = this;
                _this.xlColumnId = value;
                _this.getPageData();
              },
              //获取页面数据
              getPageData: function() {
                let _this = this;
                // this.$http.get(this.apiUrl + 'statistics_api/index', {
                //   params: {
                //     cp_type:_this.cpColumnId,
                //     kp_type:_this.kpColumnId,
                //     xl_type:_this.xlColumnId,
                //   },
                // }).then(
                //   function(res) {
                //     _this.pageData = res.body;
                //     _this.columnList = _this.pageData.years;

                //     this.tj1(_this.pageData.xl_tj.categories, _this.pageData.xl_tj.series);
                //     this.tj3(_this.pageData.kp_tj.categories, _this.pageData.kp_tj.series);
                //     this.tj5(_this.pageData.cp_tj.categories, _this.pageData.cp_tj.series);

                //   },
                //   function(res) {
                //     console.log(res);
                //     // 响应错误回调
                //   }
                // );

                fetch(`${this.apiUrl}statistics_api/index?cp_type=${this.cpColumnId}&kp_type=${this.kpColumnId}&xl_type=${this.xlColumnId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        this.pageData = data;
                        this.columnList = this.pageData.years;
                        // this.updateCharts();
                        // _this.pageData = data.body;
                        // _this.columnList = _this.pageData.years;

                        this.tj1(_this.pageData.xl_tj.categories, _this.pageData.xl_tj.series);
                        this.tj3(_this.pageData.kp_tj.categories, _this.pageData.kp_tj.series);
                        this.tj5(_this.pageData.cp_tj.categories, _this.pageData.cp_tj.series);
                        console.log(data);
                    })
                    .catch(error => {
                        console.error('Fetch error:', error);
                        
                    });



              },

              // 训练人次统计
              tj1: function(categories, series) {
                this.chartOptions1 = {
                  exporting: {
                    enabled: false //用来设置是否显示‘打印’,'导出'等
                  },
                  title: {
                    text: '',
                    align: 'left',
                    style: {
                      color: '#2AB1FE',
                      fontSize: '15px',
                      fontWeight: '900'
                    }
                  },
                  credits: {
                    enabled: false,
                  },
                  yAxis: {
                    title: {
                      text: ''
                    }
                  },
                  xAxis: {
                    categories: categories
                  },

                  legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    enabled: false
                  },
                  plotOptions: {
                    // series: {
                    // 	borderWidth: 0,
                    // 	dataLabels: {
                    // 		enabled: true,
                    // 		format: '{point.y:.1f}%'
                    // 	}
                    // }
                  },
                  series: [{
                    type: 'column',
                    name: '人次',
                    colorByPoint: true,
                    data: series,
                    colors: ['#2AB1FE ', '#2AB1FE', '#2AB1FE', '#2AB1FE', '#2AB1FE', ' #2AB1FE', ' #2AB1FE']
                  }],
                  responsive: {
                    rules: [{
                      condition: {
                        // maxWidth: 500
                      },
                      chartOptions: {
                        legend: {
                          layout: 'horizontal',
                          align: 'center',
                          verticalAlign: 'bottom'
                        }
                      }
                    }]
                  }
                }
                $('#chart1').highcharts(this.chartOptions1)
              },
              // 科普人次统计
              tj3: function(categories, series) {
                this.chartOptions3 = {
                  exporting: {
                    enabled: false //用来设置是否显示‘打印’,'导出'等
                  },
                  title: {
                    text: '',
                    align: 'left',
                    style: {
                      color: '#2AB1FE',
                      fontSize: '15px',
                      fontWeight: '900'
                    }
                  },
                  credits: {
                    enabled: false,
                  },
                  yAxis: {
                    title: {
                      text: ''
                    }
                  },
                  xAxis: {
                    categories: categories
                  },

                  legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    enabled: false
                  },
                  plotOptions: {
                    // series: {
                    // 	borderWidth: 0,
                    // 	dataLabels: {
                    // 		enabled: true,
                    // 		format: '{point.y:.1f}%'
                    // 	}
                    // }
                  },
                  series: [{
                    type: 'column',
                    name: '人次',
                    colorByPoint: true,
                    data: series,
                    colors: ['#2AB1FE ', '#2AB1FE', '#2AB1FE', '#2AB1FE', '#2AB1FE', ' #2AB1FE', ' #2AB1FE']
                  }],
                  responsive: {
                    rules: [{
                      condition: {
                        // maxWidth: 500
                      },
                      chartOptions: {
                        legend: {
                          layout: 'horizontal',
                          align: 'center',
                          verticalAlign: 'bottom'
                        }
                      }
                    }]
                  }
                }
                $('#chart3').highcharts(this.chartOptions3)

              },
              // 测评人次统计
              tj5: function(categories, series) {
                this.chartOptions5 = {
                  exporting: {
                    enabled: false //用来设置是否显示‘打印’,'导出'等
                  },
                  title: {
                    text: '',
                    align: 'left',
                    style: {
                      color: '#2AB1FE',
                      fontSize: '15px',
                      fontWeight: '900'
                    }
                  },
                  credits: {
                    enabled: false,
                  },
                  yAxis: {
                    title: {
                      text: ''
                    }
                  },
                  xAxis: {
                    categories: categories
                  },
                  legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    enabled: false
                  },
                  plotOptions: {
                    series: {
                      label: {
                        connectorAllowed: true
                      },
                    }
                  },
                  series: [{
                    name: '人次',
                    data: series,
                    color: '#2AB1FE',
                    dataLabels: {
                      enabled: true,
                    },
                    areaStyle: {}
                  }],
                  responsive: {
                    rules: [{
                      condition: {
                        // maxWidth: 500
                      },
                      chartOptions: {
                        legend: {
                          layout: 'horizontal',
                          align: 'center',
                          verticalAlign: 'bottom'
                        }
                      }
                    }]
                  }
                }
                $('#chart5').highcharts(this.chartOptions5)

              },
             
            }
        });
    </script>

<style>
  .el-input__inner,.el-select-dropdown__item.selected{
    color:#2AB1FE
  }
  .el-select .el-input.is-focus .el-input__inner {
      border-color: #2AB1FE;
  }
</style>

<style scoped="scoped" lang="scss">
  .main {
    display: flex;
    flex-direction: row;
    background-color: #f0f4f7;
    height:100%;

    .left {
      width: 24%;
      background: #E3E9ED;
      display: flex;
      flex-direction: column;

      .content_1 {
        padding: 26px 26px 0 26px;

        .section_1 {
          font-size: 18px;
          line-height: 18px;
          font-weight: bold;
          color: #181917;
          margin-bottom: 8px;
        }

        .section_2 {
          font-size: 12px;
          line-height: 12px;
          font-weight: 400;
          color: #565954;
          margin-bottom: 23px;
        }

        .section_3 {
          width: 100%;
          height: 88%;
          background: #FFFFFF;
          border-radius: 14px;
          margin-bottom: 18px;

          .section_3_con {
            padding: 0 18px;
            display: flex;
            flex-direction: row;

            .section_3_1 {
              width: 70px;
              height: 70px;
              background: url("/assets/images/dashboard/left_icon1.png") no-repeat;
              background-size: 100%;
              margin-right: 17px;
            }

            .section_3_2 {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              em {
                font-size: 16px;
                line-height: 16px;
                font-weight: bold;
                color: #565954;
                margin-bottom: 9px;
              }

              span {
                font-size: 12px;
                line-height: 12px;
                font-weight: 400;
                color: #939F8F;
              }
            }
          }
        }
      }

      .content_2 {
        padding: 0 20px 20px 20px;
        flex-grow: 1;

        .section {
          /* height: 100%; */
          display: flex;
          justify-content: center;
          background: url("/assets/images/dashboard/left_1b.png") no-repeat center;
          background-size: auto 100%;
        }
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      width: 76%;

      .section_1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 26px;
        height: 70px;
        background: #2AB1FE;
        color: #FFFFFF;
        font-size: 12px;

        .logo {
          display: flex;
          width: 300px;
          height: 60px;
          background-image: url("./dashboard/images/logo2.png");
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: 0 center;
        }

        .fn {
          display: flex;
          flex-direction: row;
          align-items: center;

          .head {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-right: 25px;

            .img {
              background: url("./dashboard/images/head.png") no-repeat;
              background-size: 26px;
              width: 26px;
              height: 26px;
              margin-right: 5px;
            }
          }

          .login_out {
            display: flex;
            flex-direction: row;
            align-items: center;

            .img {
              background: url("./dashboard/images/login_out.png") no-repeat;
              background-size: 14px;
              width: 14px;
              height: 14px;
              margin-right: 5px;
            }
          }
        }
      }

      .section_2 {
        padding: 26px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .section_2_head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 25px;
          margin-bottom: 10px;

          .title {
            font-size: 16px;
            font-weight: bold;
            color: #181917;
          }

          .select {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 88px;
            height: 25px;
            font-weight: 400;
          }
        }

        .section_2_1 {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 26px;
          height: 403px;

          .section_2_1_l {
            display: flex;
            width: 67%;
            height: 403px;
            background: #FFFFFF;
            border-radius: 14px;
            margin-right: 26px;

            .content {
              width:100%;
              display: flex;
              flex-direction: column;
              flex: 1;
              padding: 26px;

              .data {
                flex-grow: 1;
              }
            }
          }

          .section_2_1_r {
            display: flex;
            width: 33%;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

            .li {
              display: flex;
              width: 48%;
              height: 193px;
              border-radius: 14px;
              background: #FFFFFF;

              .li_content {
                padding: 26px;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .img {
                  width: 53px;
                  height: 53px;
                  margin-bottom: 10px;
                }

                .name {
                  font-size: 14px;
                  font-weight: 400;
                  color: #565954;
                  margin-bottom: 20px;
                }

                .number {
                  font-size: 32px;
                  font-family: Arial;
                  font-weight: bold;
                  color: #2AB1FE;

                  span {
                    font-size: 12px;
                    font-family: Arial;
                    color: #2AB1FE;
                  }
                }
              }
            }
          }
        }

        .section_2_2 {
          display: flex;
          flex-direction: row;
          flex-grow: 1;
          justify-content: space-between;

          .section_2_2_l {
            display: flex;
            width: 49%;
            background: #FFFFFF;

            .content {
              width:100%;
              display: flex;
              flex-direction: column;
              flex: 1;
              padding: 26px;

              .data {
                flex-grow: 1;
              }
            }
          }

          .section_2_2_r {
            display: flex;
            width: 49%;
            background: #FFFFFF;

            .content {
              width:100%;

              display: flex;
              flex-direction: column;
              flex: 1;
              padding: 26px;

              .data {
                flex-grow: 1;
              }
            }
          }
        }
      }
    }
  }
</style>