TEAMModelOS/TEAMModelBI/ClientApp/src/view/userInquire/details.vue

<template>
    <div class="entirety">
        <div class="groupdata" v-show="detailsData.length >1">
            <span class="nowgroup-num">{{transferNum+1}}</span>/<span class="totalgroup-num">{{detailsData.length}}</span>
            <div class="lastbtn" v-if="detailsData.length >1 && transferNum !==0" @click="lastUser()" title="上一个">
                <div class="btn-ls">
                <svg class="last-btns" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                </svg>
                </div>
            </div>
            <div class="lastbtn" v-else title="上一个">
                <div class="btn-ls">
                <svg class="last-btns" aria-hidden="true">
                    <use xlink:href="#icon-icon-test-copy"></use>
                </svg>
                </div>
            </div>
            <div class="nextbtn" v-if="detailsData.length >1 && transferNum+1 !==detailsData.length" @click="nextUser()" title="下一个">
                <div class="btn-ls">
                <svg class="last-btns" aria-hidden="true">
                    <use xlink:href="#icon-icon-test1"></use>
                </svg>
                </div>
            </div>
            <div class="nextbtn" v-else title="下一个">
                <div class="btn-ls">
                <svg class="last-btns" aria-hidden="true">
                    <use xlink:href="#icon-icon-test1-copy"></use>
                </svg>
                </div>
            </div>
        </div>
    <div class="userdetails" v-loading="loading" element-loading-text="数据加载中...">
        <div class="topbox">
           <div class="img-name">
            <div class="topbox-images">
                <el-image :src="userPortrait" v-if="userPortrait"/>
                <el-image :src="randomImage" fit="contain" v-else/>
            </div>
            <div class="topbox-name">
                <div class="topbox-name-text">{{usernames ? usernames :'暂无姓名'}} </div>
                <div class="topbox-name-advance" @click="userdetailState=true">查看账户进阶数据<el-icon><MoreFilled /></el-icon></div>
            </div>
           </div>
           <div class="information">
             <div v-for="item in userdata" :key="item.id" class="information-item" :title="item.hint">
                <svg class="information-icon" aria-hidden="true">
                  <use :xlink:href="item.icon"></use>
                </svg>
                <span class="information-text">{{item.value}}</span>
                <!-- <div :title="[item.correlation ? '已关联':'弱关联，可进行手动修改']" v-show="item.key ==='school' && item.value !=='无'">
                    <svg class="hint-icon" aria-hidden="true"  >
                        <use :xlink:href="[item.correlation ? '#icon-zhengque3':'#icon-tishi2']"></use>
                    </svg>
                </div> -->
                <!-- <el-button type="" size="small" v-show="item.key ==='school'&& !item.correlation" class="changebtn">更改</el-button> -->
                <!-- <el-button type="" size="small" v-show="item.key ==='local'">更改</el-button> -->
            </div>
           </div>
        </div>
        <el-divider />
        <div class="product-list">
            <div class="product-title">
                <el-button type="primary" size="small" @click="loginDialog=true">
                    查看完整登入情况
                    <el-icon class="el-icon--right"><Right /></el-icon>
                </el-button>
            </div>
            <div class="listbox">
                <div :class="[item.state ? item.key:'notenabled','listbox-item']" v-for="item in productdata.slice(0, 4)" :key="item.id">
                    <p class="item-title">{{item.title}}</p>
                    <div class="item-content" v-show="item.state">
                        <div class="content-left">
                            <span>上次登陆时间：{{item.valueText}}</span>
                        </div>
                    </div>
                    <div class="notenabled-title" v-show="!item.state">近期未使用</div>
                </div>
            </div>
        </div>
        <el-divider />
        <!--账户进阶数据-->
        <div class="user-details" v-if="userdetailState">
            <Userdetail @updateView='handleChildEvent' :detailsData="pointsData"></Userdetail>
        </div>
         <!--账户进阶数据 end-->
        <!--产品页面-->
        <div class="product-details" v-else-if="!userdetailState">
            <div class="hiteachboxdiv">
                <div  class="common-header-title">
                    <div>IOT</div>
                    <!-- <div class="expire">到期日:XXXXX</div> -->
                    <div>
                        <!-- <el-button v-for="item in buttonSelect" :key="item.value" :type="item.click ? 'primary':!item.disabled ? '':'info'" size="small" class="clickbox" :disabled="item.disabled" @click="selectTime(item.value)">{{item.name}}</el-button> -->
                        <el-date-picker
                            v-model="searchRange"
                            type="monthrange"
                            range-separator="-"
                            start-placeholder="Start month"
                            end-placeholder="End month"
                            style="margin-right: 5px;"
                            :disabled-date="disabledDate"
                        />
                        <el-button :icon="Search" circle  @click="searchIOT"/>
                    </div>
                </div>
                <el-divider />
                <replaceHiTeach :detailsData="detailsIot" v-if="iotState"></replaceHiTeach>
                <div v-else class="not-coupons">暂无数据</div>
            </div>
            <!-- <div class="hitadiv">
                <div  class="common-header-title">
                    <div>HiTA</div>
                </div>
                <el-divider />
                <HiTA></HiTA>
            </div> -->
            <div class="user-size">
                <div  class="common-header-title">
                    <div>空间与权益</div>
                    <!-- <div class="expire">到期日：XXXXX</div> -->
                </div>
                <el-divider /> 
                <div class="sizestate" v-if="sizeandequity ==='size'">
                    <div class="size-label">
                        <div class="size-item" v-for="item in gaugelabels" :key="item.id">
                            <div class="size-value" :style="{'color':item.color}">{{item.value}}</div>
                            <div class="size-title">{{item.title}}</div>
                        </div>
                         </div>
                        <el-divider />
                        <div class="login-echart">
                            <commonGaugeVue :gaugeData="gaugedata"></commonGaugeVue>
                    </div>
                </div>
                <!--权益-->
                <div class="equitystate" v-else>
                    <div class="rightsbox">
                        <div class="rightsbox-content">
                            <!-- <el-carousel trigger="click" height="60vh" :autoplay="false">
                                <el-carousel-item v-for="item in powerList" :key="item"  v-show="powerList.length >0">
                                    <div class="rightsbox-item">
                                        <div class="rightsbox-item-title">
                                            <p>[ID授权] {{item.name}}</p>
                                        </div>
                                        <div class="rightsbox-item-time">
                                            <p>
                                                <span>时间:</span>
                                                <span class="rightsbox-item-time-num">{{item.startDateText}}~{{item.endDateText}}</span>
                                                <span>共<span class="rightsbox-item-timenums">{{item.intervalTime}}</span>天</span>
                                            </p>
                                        </div>
                                        <div class="rightsbox-item-expansion" v-show="item.prodCode ==='Z6ELB6EZ'">
                                            <p class="expansion-title">产品扩充项</p>
                                            <div v-for="iteml in item.apruleArr" :key="iteml.key">
                                                -<span :class="[iteml.state ? 'start-title':'error-title' ]">
                                                    {{iteml.title}}
                                                    <span v-show="iteml.key ==='cligroup' || iteml.key ==='client_volume' || iteml.key ==='soknumber'">({{iteml.value}})</span>
                                                 </span>
                                            </div>
                                        </div>
                                         <el-divider /> 
                                        <div class="subjoin" v-show="item.prodCode ==='Z6ELB6EZ'">
                                                <div class="subjoin-item" >
                                                    <p class="subjoin-title">{{subjoinData.hiteachTitle}}</p>
                                                    <div class="subjoin-content" v-for="item in subjoinData.hiteach" :key="item.key">
                                                        <div>
                                                            <span>{{item.title}}</span>
                                                            <span class="ccnums" v-show="item.key==='webirs'">{{item.value}}</span>
                                                            <span class="endtimes" v-if="item.exps >= notTime">(到期日：{{item.end}})</span>
                                                            <span class="endtimes-error" v-else>(到期日：{{item.end}})</span>
                                                        </div>
                                                </div>
                                            </div>
                                                <div class="subjoin-item" >
                                                    <p class="subjoin-title">{{subjoinData.hiteachCCTitle}}</p>
                                                    <div class="subjoin-content" v-for="itemc in subjoinData.hiteachCC" :key="itemc.key">
                                                        <div>
                                                            <span>{{itemc.title}}</span>
                                                            <span class="ccnums">{{itemc.num}}</span>
                                                            <span class="endtimes">(到期日：{{itemc.end}})</span>
                                                        </div>
                                                    </div>
                                        </div>
                                        <div class="rightsbox-item-expansion" v-show="item.prodCode ==='IPALB6EY'">
                                            <p class="expansion-title">产品详细</p>
                                            <div><span>空间大小:</span> <span class="expansion-sizenum">{{item.number}}   GB</span></div>
                                        </div>
                                    </div>
                                </el-carousel-item>
                                <el-carousel-item v-show="powerList.length ===0">
                                    <div class="power-notdata">暂无权益内容</div>
                                    <div class="subjoin">
                                                <div class="subjoin-item" >
                                                    <p class="subjoin-title">{{subjoinData.hiteachTitle}}</p>
                                                    <div class="subjoin-content" v-for="item in subjoinData.hiteach" :key="item.key">
                                                        <div v-show="item.exps < notTime || item.end ===0">
                                                            <span class="expire">{{item.title}}</span>
                                                            <span class="ccnums expire" v-show="item.key==='webirs'">{{item.value}}</span>
                                                            <span class="endtimes-error">(到期日：{{item.end}})</span>
                                                        </div>
                                                        <div v-show="item.exps >= notTime">
                                                            <span>{{item.title}}</span>
                                                            <span class="ccnums" v-show="item.key==='webirs'">{{item.value}}</span>
                                                            <span class="endtimes" >(到期日：{{item.end}})</span>
                                                        </div>
                                                </div>
                                            </div>
                                                <div class="subjoin-item" >
                                                    <p class="subjoin-title">{{subjoinData.hiteachCCTitle}}</p>
                                                    <div class="subjoin-content" v-for="itemc in subjoinData.hiteachCC" :key="itemc.key">
                                                        <div v-show="itemc.end < notTime || itemc.end ===0">
                                                            <span class="expire">{{itemc.title}}</span>
                                                            <span class="ccnums expire">{{itemc.num}}</span>
                                                            <span class="endtimes expire">(到期日：{{itemc.end}})</span>
                                                        </div>
                                                        <div v-show="itemc.end > notTime">
                                                            <span>{{itemc.title}}</span>
                                                            <span class="ccnums">{{itemc.num}}</span>
                                                            <span class="endtimes">(到期日：{{itemc.end}})</span>
                                                        </div>
                                                    </div>
                                            </div>
                                    </div>
                                </el-carousel-item>
                            </el-carousel> -->
                            <div class="prodlist">
                                <div v-show="powerList.length >0">
                                    <div class="prodlist-item" v-for="item in powerList" :key="item">
                                    <div class="rightsbox-item">
                                        <div class="rightsbox-item-title">
                                            <!-- <p>[ID授权] {{item.name}}</p> -->
                                        </div>
                                        <div class="rightsbox-item-time">
                                            <p>
                                                <span>时间:</span>
                                                <span class="rightsbox-item-time-num">{{item.startDateText}}~{{item.endDateText}}</span>
                                                <span>共<span class="rightsbox-item-timenums">{{item.intervalTime}}</span>天</span>
                                            </p>
                                            <p  v-if=" item.aprule &&item.aprule.hasOwnProperty('schoolinfo') ">
                                                <span>学校:</span>
                                                <span class="rightsbox-item-timenums">{{item.aprule.schoolinfo.name}}</span>
                                            </p>
                                        </div>
                                        <div class="rightsbox-item-expansion" v-show="item.prodCode ==='Z6ELB6EZ'">
                                            <p class="expansion-title">产品扩充项</p>
                                            <!--产品扩充-->
                                            <div v-for="iteml in item.apruleArr" :key="iteml.key">
                                                -<span :class="[iteml.state ? 'start-title':'error-title' ]">
                                                    {{iteml.title}}
                                                    <span v-show="iteml.key ==='cligroup' || iteml.key ==='client_volume' || iteml.key ==='soknumber'">({{iteml.value}})</span>
                                                 </span>
                                            </div>
                                            <!--产品扩充 end-->
                                        </div>
                                        <div class="rightsbox-item-expansion" v-show="item.prodCode ==='IPALB6EY'">
                                            <p class="expansion-title">产品详细</p>
                                            <div><span>空间大小:</span> <span class="expansion-sizenum">{{item.number}}   GB</span></div>
                                        </div>
                                    </div>
                                    <el-divider /> 
                                </div>
                                </div>
                                <div class="power-notdata" v-show =" powerList.length ==0">暂无权益内容</div>
                                   <!--HiTeach 附加功能-->
                                <div class="subjoin">
                                    <div class="subjoin-item" >
                                        <p class="subjoin-title">{{subjoinData.hiteachTitle}}</p>
                                            <div v-if="subjoinData.hiteach.length >0">
                                                <div class="subjoin-content" v-for="item in subjoinData.hiteach" :key="item.key">
                                                <div v-if="item.exps > 0 && item.gets > 0">
                                                    <span>{{item.title}}</span>
                                                    <span class="ccnums" v-show="item.key==='webirs'">{{item.value}}</span>
                                                    <span class="endtimes" v-if="item.exps >= notTime">(到期日：{{item.end}})</span>
                                                    <span class="endtimes-error" v-else>(到期日：{{item.end}})</span>
                                                </div>
                                            </div>
                                            </div>
                                            <div class="not-datas" v-else>暂无数据</div>
                                            <el-divider /> 
                                            </div>
                                    <div class="subjoin-item" >
                                        <p class="subjoin-title">{{subjoinData.hiteachCCTitle}}</p>
                                        <div v-if="subjoinData.hiteachCC.length >0">
                                            <div class="subjoin-content" v-for="itemc in subjoinData.hiteachCC" :key="itemc.key">
                                                <div>
                                                    <span>{{itemc.title}}</span>
                                                    <span class="ccnums">{{itemc.num}}</span>
                                                    <span class="endtimes">(到期日：{{itemc.end}})</span>
                                                 </div>
                                            </div>
                                        </div>
                                        <div class="not-datas" v-else>暂无数据</div>
                                    </div>
                                </div>
                                        <!--HiTeach 附加功能 end-->
                            </div>
                        </div>
                    </div>
                </div>
                 <!--权益 end-->
                <div class="tab-state">
                    <div :class="[sizeandequity !=='size' ? 'opts':'','tab-state-btn']" @click="sizeandequity='equity'">我的权益</div>
                    <div :class="[sizeandequity ==='size' ? 'opts':'','tab-state-btn']" @click="sizeandequity='size'">我的空间</div>
                </div>
            </div>
            <div class="iesdiv">
                <div  class="common-header-title">
                    <div>IES</div>
                    <!-- <div class="expire">到期日：2023-11-22</div> -->
                </div>
                <el-divider />
                <IES :iesdata="ies5datas"></IES>
            </div>
            <div class="socratesdiv">
                <div  class="common-header-title">
                    <div>苏格拉底</div>
                    <!-- <div class="expire">到期日：2023-11-22</div> -->
                </div>
                <el-divider />
                <Socrates :sokratesdatas="sokratesData"></Socrates>
            </div>
            <!-- <div class="scorebox">
                <div  class="common-header-title">
                    <div>积分统计</div>
                </div>
                <el-divider />
                <Score :pointsdatas="pointsData"></Score>
            </div> -->
            <div class="ticketdiv">
                <div  class="common-header-title">
                    <div>积分与票卷</div>
                </div>
                <el-divider />
                <Ticket :pointsandcoupons="pointsData"></Ticket>
            </div>
        </div>
        <!--产品页面end-->
        <!--back-->
        <div class="back-btns">
            <el-button type="primary" :icon="ArrowLeft" size="small" @click="backClick">返回搜索</el-button>
        </div>
        <!--back end-->
        <!--所有登入时间dialog-->
        <div class="login-total">
            <el-dialog v-model="loginDialog" title="所有登入情况" width="70%" :before-close="handleClose">
                <div class="logintotal-box">
                    <div class="logintotal-box-list">
                        <div :class="[item.state ? item.key:'notenabled-total','listbox-item-total']" v-for="item in productdata" :key="item.id">
                            <p class="item-title">{{item.title}}</p>
                            <div class="item-content" v-show="item.state">
                                <div class="content-left">
                                    <p>上次登陆时间</p>
                                    <span>{{item.valueText}}</span>
                                </div>
                            </div>
                            <div class="notenabled-title-total" v-show="!item.state">近期未使用</div>
                        </div>
                    </div>
                    <el-divider />
                    <div class="logintotal-box-table">
                        <p class="logintotal-box-table-title">登入详细：</p>
                        <el-table :data="logintotalTable" style="width: 100%" height="35vh" border >
                            <el-table-column prop="nameText" label="平台" align="center"/>
                            <el-table-column prop="timeText" label="时间" align="center"/>
                        </el-table>
                    </div>
                </div>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="loginDialog = false">关闭</el-button>
                </span>
                </template>
            </el-dialog>
        </div>
         <!--所有登入时间dialog end-->
    </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, watch, h, nextTick,onMounted,defineProps,defineEmits,computed,inject} from 'vue'
import { Iphone,More,MoreFilled,ArrowLeft,Right } from '@element-plus/icons'
import { useStore } from 'vuex'
import commonHeatmapVue from '../../components/echarts/commonHeatmap.vue'
import commonGaugeVue from '../../components/echarts/commonGauge.vue'
import Hiteach from './hiteach.vue'
import HiTA from './hita.vue'
import IES from './ies.vue'
import Socrates from './socrates.vue' 
import Score from './score.vue'
import Ticket from './ticket.vue'
import Userdetail from './userdetail.vue'
import replaceHiTeach from './iot.vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

let props = defineProps({
    searchdata: Object,
    defDate: Array
})

const searchRange = ref(props.defDate)

// 日曆元件限制設定
const disabledDate = time => {
    if(time.getTime() > (Date.now())){ // 不能超過今天
        return true
    }
}

let router=useRouter()
const store = useStore()
let {ctx:that,proxy } = getCurrentInstance()
let activeName = ref('basics')
let userdetailState=ref(false)
let tabPosition = ref('left')
let sizeandequity=ref('equity')
let usernames=ref('')
let userdata = ref([
    { id: 1, icon: '#icon-ic_idcard', value: '0', title: '',key:'integral',check:false ,hint:'用户ID'},
    { id: 2, icon: '#icon-shouji', value: '0', title: '',key:'phone',check:true,hint:'手机号码'},
    { id: 3, icon: '#icon-dibudaohanglan-', value: '', title: '',key:'school',correlation:false,check:true,hint:'学校'},
    { id: 4, icon: '#icon-youxiang', value: '', title: '', key: 'email', check: true, hint: '邮箱' },
    { id: 5, icon: '#icon-weizhi', value: '', title: '',key:'local',check:false ,hint:'地区位置'},
    { id: 6, icon: '#icon-shijian2', value: '0', title: '', key: 'time', check: false ,hint:'上次登录时间' },
])
let productdata = ref([
    { id: 1, title: 'HiTeach', value:0,valueText:'',key:'HiTeach',state: false },
    { id: 2, title: 'HiTA',value:0,valueText:'',key:'HiTA',state: false },
    { id: 3, title: 'IES', value:0,valueText:'',key:'IES5', state: false },
    { id: 4, title: '苏格拉底', value:0,valueText:'',key:'Sokrates', state: false },
    { id: 5, title: '观议課 APP', value:0,valueText:'',key:'SokAPP', state: false },
    { id: 6, title: '通用账号', value:0,valueText:'',key:'Account', state: false },
    { id: 7, title: 'HiTeachCC', value:0,valueText:'',key:'HiTeachCC', state: false },
    { id: 8, title: 'WebIRS5', value:0,valueText:'',key:'IRS', state: false },
])
let tableData = ref([
    { time: '2023-07-05 15:33', ip: '222.209.14.199', location: '四川省成都市',platform:'HiTeach' },
    { time: '2023-07-01 15:33', ip: '222.209.14.199', location: '四川省成都市' ,platform:'HiTeach'},
    { time: '2023-06-25 09:33', ip: '222.209.14.199', location: '四川省成都市' ,platform:'IES'},
    { time: '2023-06-19 11:00', ip: '222.209.14.199', location: '四川省成都市' ,platform:'HiTA'},
    { time: '2023-06-05 9:32', ip: '222.209.14.199', location: '四川省成都市' ,platform:'HiTeach'},
    { time: '2023-05-13 11:03', ip: '222.209.14.199', location: '四川省成都市' ,platform:'苏格拉底'},
])
let data = ref([
    [0, 0, 1],
    [1, 0, 80],
    [2, 0, 1],
    [3, 0, 40],
    [4, 0, 40],
    [5, 0, 40],
    [6, 0, 40],
    [7, 0, 80],
    [8, 0, 40],
    [9, 0, 60],
    [10, 0, 60],
    [11, 0, 60],
    [12, 0, 60],
    [0, 1, 80],
    [1, 1, 10],
    [2, 1, 80],
    [3, 1, 132],
    [4, 1, 60],
    [5, 1, 2],
    [6, 1, 60],
    [7, 1, 80],
    [8, 1, 60],
    [9, 1, 45],
    [0, 2, 32],
    [1, 2, 91],
    [2, 2, 120],
    [3, 2, 30],
    [4, 2, 70],
    [5, 2, 80],
    [6, 2, 80],
    [7, 2, 2],
    [8, 2, 3],
    [9, 2, 1],
    [0, 3, 47],
    [1, 3, 32],
    [2, 3, 20],
    [3, 3, 130],
    [4, 3, 60],
    [5, 3, 70],
    [6, 3, 80],
    [7, 3, 90],
    [8, 3, 110],
    [9, 3, 40],
    [0, 4, 91],
    [1, 4, 38],
    [2, 4, 2],
    [3, 4, 5],
    [4, 4, 66],
    [5, 4, 21],
    [6, 4, 60],
    [7, 4, 10],
    [8, 4, 90],
    [9, 4, 28],
]);
let heatMapdata = ref({
    tooltip: {
        position: 'top',
        formatter: function(params) {
            return yNames[params.data[1]] + params.name +  "登录总量:" + params.value[2];
        },
    },
    // animation: false,
    grid: {
        top: '5%',
        left: '5%',
        right:'5%',
        height: '80%',
        width:'85%',
    },
    backgroundColor: "#fff",
    xAxis: {
        type: 'category',
        data: ["00:00", "02:00", "04:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00","18:00","20:00","22:00"],
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: "#A3C7E7",
            fontSize: 10
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "#fff", //同背景色
                width: 10,
            },
        },
    },
    yAxis: {
        type: 'category',
        data: ["周一", "周二", "周三", "周四", "周五"],
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: "#A3C7E7",
            fontSize: 10
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "#fff", //同背景色
                width: 10,
            },
        },
    },
    visualMap: {
        show:false,
        min: 1,
        max: 132,
        calculable: false,
        orient: 'horizontal',
        left: 'center',
        bottom: '5%',
        inRange: {
            color: ['#effbf7', '#bbeedf', '#8be1c8', '#58d4b0'],
        },
        textStyle: {
            color: "#A3C7E7"
        }
    },
    series: [{
            type: 'heatmap',
            data: data.value,
            zlevel:-1
        }]
})
let maplabels = ref([
    { id: 1, value: '0-50', color: '#effbf7' },
    { id: 2, value: '50-100', color: '#bbeedf' },
    { id: 3, value: '100-300', color: '#8be1c8' },
    {id:4,value:'300-100',color:'#58d4b0'},
])
let gaugedata = ref({
    title:[{
        text: '0',
        x: 'center',
        bottom:'33%',
        textStyle: {
            fontSize: '16',
            color: '#313a5e',
            foontWeight: '600',
        },
    }],
    series: [
        {
        type: 'gauge',
        radius: '85%',
        center: ['50%', '70%'],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 5,
        itemStyle: {
            color: '#58D9F9',
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
        },
        progress: {
            show: true,
            roundCap: true,
            width: 14
        },
        pointer: {
            //icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
            length: '75%',
            width: 10,
            offsetCenter: [0, '5%'],
            show:false,
        },
        axisLine: {
            roundCap: true,
            lineStyle: {
                width: 12
            }
        },
        axisTick: {
            splitNumber: 2,
            lineStyle: {
                width: 2,
                color: '#999'
            }
        },
        splitLine: {
            length: 12,
            lineStyle: {
                width: 2,
                color: '#999'
            }
        },
        axisLabel: {
            distance: 30,
            color: '#999',
            fontSize: 8,
            show:true,
            formatter: function(params) {
            return params+'%'
            },
        },
        title: {
            show: true,
            offsetCenter: [0, '0%'], // x, y，单位px
            textStyle: {
              color: '#313a5e',
              fontSize: 14
            }
        },
        detail: {
           show: false,
            offsetCenter: [0, '-15%'],
            color: '#313a5e',
            formatter: function(params) {
            return params+'G'
            },
            textStyle: {
                fontSize: 14
            }
        },
        data: [{
            name: "已使用总量",
            value: 0
        }]
    }]
})
let gaugelabels = ref([
    // { id: 1, value: 0, title: '文档', color: '#58D9F9' },
    // {id:2,value:0,title:'学校分配空间',color:'#58D9F9'},
    // { id: 3, value: 0, title: '视频', color:'#58D9F9' },
    // { id: 4, value: 0, title: '试卷', color:'#58D9F9' },
    // { id: 5, value: 0, title: 'Hiteach上传', color: '#58D9F9' },
    // {id:6,value:0,title:'其他',color:'#58D9F9'},
     {id:1,value:0,title:'已使用',key:'use',color: '#58D9F9'},
     {id:2,value:0,title:'已剩余',key:'residue',color: '#58D9F9'},
     {id:3,value:0,title:'学校分配空间',key:'allocation',color: '#58D9F9'},
     {id:4,value:0,title:'总大小',key:'total',color: '#58D9F9'},
])
let rightsdata=ref([
    { name: 'XXXXXX', time: '2024/08/29', code: 'ais' },
    { name: 'XXXXXX', time: '2024/10/29', code: 'diction' },
    { name: 'XXXXXX', time: '2024/08/29', code: 'ais' },
    { name: 'XXXXXX', time: '2024/08/29', code: 'ais' },
    {name:'XXXXXX',time:'2024/08/29',code:'ais'},
])
let detailsData = ref()
if(props.searchdata?.length > 0){
    detailsData.value = props.searchdata
    detailsData.value.forEach( e =>{
        e.searchRange = searchRange.value
    })

} else {
    detailsData.value = ''
}
let transferNum=ref(0)   //*滚动的数值*
let ies5datas=ref(detailsData.value[transferNum.value].ies5)
let sokratesData=ref(detailsData.value[transferNum.value].sokrates)
let pointsData=ref(detailsData.value[transferNum.value])
console.log(props.searchdata, '传输的值')
console.log(detailsData.value, '最终数据')
let powerExtension=ref([
    {title:'USB錄影支援',key:'hdcam',state:false},
    {title:'蘇格拉底議課APP',key:'sokapp',state:false},
    {title:'蘇格拉底影片',key:'sokvdo',state:false},
    {title:'蘇格拉底桌面',key:'sokdesk',state:false},
    {title:'蘇格拉底報告',key:'sokrpt',state:false},
    {title:'蘇格拉底小數據',key:'soksdata',state:false},
    {title:'AI智能終端',key:'ezs',state:false},
    {title:'AI文句分析',key:'wordanls',state:false},
    {title:'電子學生證',key:'dgistuid',state:false},
    {title:'雲端診斷分析系統',key:'cloudas',state:false},
    {title:'分組數',key:'cligroup',value:0,state:false},
    {title:'IRS連線授權數',key:'client_volume',value:0,state:false},
    {title:'議課人數',key:'soknumber',value:0,state:false},
    {title:'智慧評分系統',key:'scorsys',state:false},
    {title:'IRS硬體遙控器',key:'irs',state:true},
    {title:'蘇格拉底語音轉寫',key:'sokvtt',state:false},
    {title:'協作',key:'cowork',state:false},
    {title:'AI GPT服務',key:'aigpt',state:false},
])
let subjoinData=ref({
    hiteachTitle:'HiTeach 附加功能',
    hiteach:[
        {title:'AI文句分析',key:'aitext',start:0,end:0,value:0,gets:0,exps:0},
        {title:'AI苏格拉底小数据',key:'soklite',start:0,end:0,value:0,gets:0,exps:0},
        {title:'智慧评分',key:'smartrating',start:0,end:0,value:0,gets:0,exps:0},
        {title:'clouDAS诊断分析',key:'cloudas',start:0,end:0,value:0,gets:0,exps:0},
        {title:'Web IRS连线数',key:'webirs',start:0,end:0,value:0,gets:0,exps:0},
        {title:'蘇格拉底語音轉寫',key:'sokvtt',start:0,end:0,value:0,gets:0,exps:0},
        {title:'協作',key:'cowork',start:0,end:0,value:0,gets:0,exps:0},
        {title:'AI GPT服務',key:'aigpt',start:0,end:0,value:0,gets:0,exps:0},
    ],
    hiteachCCTitle:'HiTeach CC 权限',
    hiteachCC:[
        {title:'作品收集数',key:'works',start:0,end:0,num:0,gets:0,exps:0},
        {title:'连线人数',key:'clients',start:0,end:0,num:0,gets:0,exps:0},
    ]
})
let notTime=ref(Math.floor(Date.now() / 1000))
let powerList=ref([])
let detailsIot=ref()
let buttonSelect = ref([
    { name: '天', value:'day', click: false,disabled:false},
    { name: '月', value:'month', click: false,disabled:false},
    {name:'年',value:'year',click:false,disabled:false}
])
let loginDialog=ref(false)
let logintotalTable=ref([])
let iotState=ref(true)
let advancevalue=ref({
    last:'',
    next:''
})
let loading=ref(false)
let headeronly=ref(require('@/assets/img/default1.png'))
let headerData=ref([
    require('@/assets/img/default1.png'),
    require('@/assets/img/default2.png'),
    require('@/assets/img/default3.png'),
    require('@/assets/img/default4.png'),
    ])
let userPortrait=ref()     //用户头像
let backtoShow=inject("transmitShow")
const randomImage = computed(()=>{
    const randomIndex = Math.floor(Math.random() * headerData.value.length);
    console.log(randomIndex,'随机头像')
    return headerData.value[randomIndex];
})
const handleChildEvent = (payload) => {
    userdetailState.value=false
}
const emits = defineEmits(['parentClick']) 
const backClick = () => {
    console.log('back init')
    store.commit('getHiteachv','')
    if(backtoShow){
        router.push({name:'analysis'})
    }else{
        emits('parentClick','default')
    }
}

const searchIOT = ()=>{
    try {
        let searchIot = {
            tmids: [detailsData.value[transferNum.value].id],
            dateUnit: 'month'
        }

        let from = new Date(searchRange.value[0])
        let to = new Date(searchRange.value[1])

        let fromYear = from.getFullYear()
        let fromMonth = from.getMonth()+1

        let toYear = to.getFullYear()
        let toMonth = to.getMonth()+1

        searchIot.dateFrom = `${fromYear}-${fromMonth}`
        searchIot.dateTo = `${toYear}-${toMonth}`

        console.log(searchIot, 'searchIot')
        
        loading.value = true
        proxy.$api.getUserIOT(searchIot).then((res) => {
            console.log(res[0].iot)
            detailsData.value[transferNum.value].iot = res[0].iot
            if(res[0].iot.hiteach.month !==null) {
                detailsIot.value = res[0].iot.hiteach.month
                iotState.value = true
            } else {
                detailsIot.value = null
                iotState.value = false
            }
            
            // 搜尋成功修改預設時間
            detailsData.value[transferNum.value].searchRange = searchRange.value

        }).catch((err) => {
            ElMessage.error('API异常，查询失败')
        }).finally(() => {
            loading.value = false
        });
    } catch(e){
        ElMessage.error('請先選擇查詢月份!!')
    }
}

// initdata()
function initdata() {
    console.log(detailsData.value,'进入方法查看')
    let transmitData = detailsData.value[transferNum.value]
    console.log(transmitData,'数据details')
    //header 基础信息 
    let { name,id,mobile, mail, schoolCode, schoolCodeW, points,country,province,city,picture,dist} = transmitData
    userPortrait.value=picture
    usernames.value=name
    userdata.value[0].value = id ? id:'暂无'
    userdata.value[1].value = mobile ?mobile:'暂无'
    userdata.value[2].value = schoolCodeW ? schoolCodeW : schoolCode ? schoolCode:'无'
    let schoolname= schoolCode ?schoolCode:'无'; let schoolnameW=schoolCodeW ? schoolCodeW:'无'
    userdata.value[2].value = schoolCodeW || schoolCode ?  schoolnameW   + ' | '  +schoolname:'暂无'
    schoolCodeW ? userdata.value[2].correlation=true:false
    userdata.value[3].value = mail ? mail:'暂无'
    //userdata.value[4].value = country && province && city ? country+'-'+province+city:country && province ? country+'-'+province:'暂无'
    let locationName= country && province && city && dist ? country+'-'+province+city+dist:
                      country && province && city ? country +'-'+province+city:
                      country && city && dist  ? country+'-'+city+dist:
                      country && province ? country+'-'+province:'暂无'
    userdata.value[4].value = locationName
    //产品使用及安装情况 登入时间
    let {login}=transmitData
    let logintimes = login.length >0 ? login.sort(function(a,b){return b.time-a.time}):'无'
    console.log(logintimes,'时间！')
    logintimes !=='无' ?  userdata.value[5].value=proxy.$common.timestampToTime(logintimes[0].time,'all'):userdata.value[5].value='暂无'
    productdata.value.forEach((itema)=>{itema.value =0,itema.valueText='',itema.state=false})
    if(login.length >0){
       console.log('进入到多数组')
       logintotalTable.value=[]
       login.forEach(item => {
         let typename=item.product
         productdata.value.forEach(items=>{
            if(typename === items.key){
                items.value === 0 ? (items.valueText=proxy.$common.timestampToTime(item.time,'all'),items.value=item.time,items.state=true): 
                item.time > items.value ? (items.valueText=proxy.$common.timestampToTime(item.time,'all'),items.value=item.time,items.state=true):''
                typename === items.key ? item.nameText=items.title:''
            }
            // items.value === 0 ? (items.valueText=proxy.$common.timestampToTime(item.time,'all'),items.value=item.time,items.state=true): 
            // item.time > items.value ? (items.valueText=proxy.$common.timestampToTime(item.time,'all'),items.value=item.time,items.state=true):''
            // typename === items.key ? item.nameText=items.title:''
        })
         item.timeText=proxy.$common.timestampToTime(item.time,'all')
       })
       console.log(logintotalTable.value,'所有登录结果')
    }else{
        logintotalTable.value=[]
        productdata.value.forEach((item)=>{
            item.state=false
        })
    }
    console.log(logintotalTable.value,'登入数据~')
    //空间与权益
    let {usedSize,teachSize,totalSize,surplusSize}=transmitData.ies5
    let usePercentum=parseInt(((Number(bytesToGB(usedSize))+Number(bytesToGB(teachSize)))/Number(bytesToGB(totalSize)))*100);let useGsize=proxy.$common.convertSize(usedSize)
    
    //权益内容
    let {prod,benefits}=transmitData
    prod.forEach((item)=>{
        //处理名字
        item.name=item.prodCode ==='Z6ELB6EZ' ? 'HiTeach 5':item.prodCode ==='IPALB6EY' ? 'IES 5 個人空間':''
        //处理扩展内容
        let apruleItem=item.aprule
        item.apruleArr=[]
        if(apruleItem !==null && item.prodCode ==='Z6ELB6EZ'){
            apruleItem.hdcam ? powerExtension.value[0].state=true:powerExtension.value[0].state=false //USB錄影支援
            apruleItem.sokapp ? powerExtension.value[1].state=true:powerExtension.value[1].state=false //蘇格拉底議課APP
            apruleItem.sokvdo ? powerExtension.value[2].state=true:powerExtension.value[2].state=false //蘇格拉底影片
            apruleItem.sokdesk ? powerExtension.value[3].state=true:powerExtension.value[3].state=false //蘇格拉底桌面
            apruleItem.sokrpt ? powerExtension.value[4].state=true:powerExtension.value[4].state=false //蘇格拉底報告
            apruleItem.soksdata ? powerExtension.value[5].state=true:powerExtension.value[5].state=false //蘇格拉底小數據
            apruleItem.ezs ? powerExtension.value[6].state=true:powerExtension.value[6].state=false //AI智能終端
            apruleItem.wordanls ? powerExtension.value[7].state=true:powerExtension.value[7].state=false //AI文句分析
            apruleItem.dgistuid ? powerExtension.value[8].state=true:powerExtension.value[8].state=false //電子學生證
            apruleItem.cloudas ? powerExtension.value[9].state=true:powerExtension.value[9].state=false  //雲端診斷分析系統
            apruleItem.cligroup !==0 ? (powerExtension.value[10].state=true,powerExtension.value[10].value=apruleItem.cligroup):powerExtension.value[10].state=false //分組數
            apruleItem.client_volume !==0 ? (powerExtension.value[11].state=true,powerExtension.value[11].value=apruleItem.client_volume):powerExtension.value[11].state=false  //IRS連線授權數
            apruleItem.soknumber !==0 ? (powerExtension.value[12].state=true,powerExtension.value[12].value=apruleItem.soknumber):powerExtension.value[12].state=false //議課人數
            apruleItem.scorsys ? (powerExtension.value[13].state=true,powerExtension.value[13].value=apruleItem.soknumber):powerExtension.value[13].state=false //智慧評分系統
            apruleItem.hasOwnProperty('irs') ? powerExtension.value[14].state=false:powerExtension.value[14].state=true  //IRS硬體遙控器
            apruleItem.sokvtt ? powerExtension.value[15].state = true : powerExtension.value[15].state = false //蘇格拉底語音轉寫
            apruleItem.cowork ? powerExtension.value[16].state = true : powerExtension.value[16].state = false //協作
            apruleItem.aigpt ? powerExtension.value[17].state = true : powerExtension.value[17].state = false //AI GPT服務
            item.apruleArr=powerExtension.value
        }
        //处理时间
        let startDates=new Date(item.startDate);let endDates=new Date(item.endDate)
        let timeDifference = endDates.getTime() - startDates.getTime();
        console.log(timeDifference)
        let days = Math.floor(timeDifference / (24 * 60 * 60 ));
        console.log(days,'天数')
        item.intervalTime=days
        item.startDateText=item.startDate ? proxy.$common.timestampToTime(item.startDate):0
        item.endDateText= item.endDate? proxy.$common.timestampToTime(item.endDate):0
        powerList.value.push(item)  
    })
    console.log(powerList.value,'权益内容')
    //处理权益内 附加功能（HITeach附加 CC权限）
    let hiteachData=benefits.hiteach !==null ?benefits.hiteach:[] ; let ccData=benefits.hiteachcc !==null  ?benefits.hiteachcc:[]
    console.log(hiteachData, ccData)
    subjoinData.value.hiteach.forEach((items) => {
        items.start = 0, items.end = 0, items.value = 0, items.gets = 0, items.exps = 0
    })
    if(hiteachData.length >0){
        hiteachData.forEach((item)=>{
            let funcKey=item.func;let startTime=proxy.$common.timestampToTime(item.get);let endTime=proxy.$common.timestampToTime(item.exp)
            subjoinData.value.hiteach.forEach((items)=>{
                funcKey === items.key ? (items.start=startTime,items.end=endTime,items.value=item.para,items.gets=item.get,items.exps=item.exp):''
            })
        })
        console.log(subjoinData.value)
    }
    if(ccData.length >0 ){
        ccData.forEach((itemA)=>{
            let funcKey=itemA.func;let startTime=proxy.$common.timestampToTime(itemA.get);let endTime=proxy.$common.timestampToTime(itemA.exp)
            subjoinData.value.hiteachCC.forEach((itemc)=>{
                funcKey === itemc.key ? (itemc.start=startTime,itemc.end=endTime,itemc.num=itemA.para,itemc.gets=itemA.get,itemc.exps=itemA.exp):''
            })
        })
    }
    console.log(powerList,'处理数据的结果')
    //处理空间
    let transitionUsed=usedSize ?bytesToGB(usedSize):0
    let transitionSuplus=surplusSize ? bytesToGB(surplusSize):0
    let transitionTotal=totalSize ? bytesToGB(totalSize):0
    let transitionTeach=teachSize ? bytesToGB(teachSize):0
    //echartsBar.value.series[0].data[0].value = (usedSize/totalSize).toFixed(2)*100
    //echartsBar.value.series[0].data[0].value= transitionUsed !==0 ? Math.round((transitionUsed/transitionTotal).toFixed(2)*100):0
    //echartsBar.value.series[0].data[1].value=100-Number(echartsBar.value.series[0].data[0].value)

    gaugelabels.value[0].value=transitionUsed
    gaugelabels.value[1].value=transitionSuplus
    gaugelabels.value[2].value=transitionTeach
    gaugelabels.value[3].value=transitionTotal
    gaugedata.value.series[0].data[0].value=transitionUsed !==0 ? Math.round((transitionUsed/transitionTotal).toFixed(2)*100):0
    gaugedata.value.title[0].text=useGsize+' G'
    console.log(transitionUsed,transitionSuplus,transitionTeach,transitionTotal,'结果')

    //处理上下一个
    // advancevalue.value.next=detailsData.value[transferNum.value+1]
    
}
function bytesToGB(bytes) {
  const gb = bytes / (1024 * 1024 * 1024);
  return gb.toFixed(2); // 将结果保留两位小数
}
function init(){
    loading.value=true
    console.log(detailsData.value,transferNum.value,'查看IOT')
    // 处理关于iot问题(目前預設都取[月])
    if(detailsData.value[transferNum.value].iot.hiteach.month !==null) {
        detailsIot.value = detailsData.value[transferNum.value].iot.hiteach.month
        iotState.value = true
    } else {
        iotState.value = false
    }

    // detailsData.value[transferNum.value].iot.hiteach.day !==null ? 
    // (buttonSelect.value[0].click=true,detailsIot.value=detailsData.value[transferNum.value].iot.hiteach.day,iotState.value=true):
    // detailsData.value[transferNum.value].iot.hiteach.month !==null ? 
    // (buttonSelect.value[1].click=true,detailsIot.value=detailsData.value[transferNum.value].iot.hiteach.month,iotState.value=true):
    // detailsData.value[transferNum.value].iot.hiteach.year !==null ? 
    // (buttonSelect.value[2].click=true,detailsIot.value=detailsData.value[transferNum.value].iot.hiteach.year,iotState.value=true):iotState.value=false

    //BTN显示问题
    // console.log(detailsData.value,'按钮问题')
    // detailsData.value[transferNum.value].iot.hiteach.day ? (buttonSelect.value[0].disabled=false):(buttonSelect.value[0].disabled=true,buttonSelect.value[0].click=false)
    // detailsData.value[transferNum.value].iot.hiteach.month ? (buttonSelect.value[1].disabled=false):(buttonSelect.value[1].disabled=true,buttonSelect.value[1].click=false)
    // detailsData.value[transferNum.value].iot.hiteach.year  ? (buttonSelect.value[2].disabled=false):(buttonSelect.value[2].disabled=true,buttonSelect.value[2].click=false)
    
    //获取hiteach 版本号
     let versionsData=detailsData.value[transferNum.value].iot.hiteach ?.month ?.verList
    console.log(versionsData)
     let hiteachV=versionsData ? versionsData.sort((a,b)=>{return b-a}):'暂无'
     console.log(hiteachV,'版本号')
     store.commit('getHiteachv', hiteachV[0])
    loading.value=false
}
function selectTime(value){
    console.log(value,'值')
    value =='day' ? 
    (buttonSelect.value[0].click=true,buttonSelect.value[1].click=false,buttonSelect.value[2].click=false,detailsIot.value=detailsData.value[transferNum.value].iot.hiteach.day):
    value =='month' ?
    (buttonSelect.value[1].click=true,buttonSelect.value[0].click=false,buttonSelect.value[2].click=false,detailsIot.value=detailsData.value[transferNum.value].iot.hiteach.month):
    value =='year' ? 
    (buttonSelect.value[2].click=true,buttonSelect.value[0].click=false,buttonSelect.value[1].click=false,detailsIot.value=detailsData.value[transferNum.value].iot.hiteach.year):''

    console.log(detailsIot.value,'值')
}
//切换用户 需要执行的内容
function cutUser(){
    loading.value=true
    console.log(detailsData,'数据组')
    ies5datas.value=detailsData.value[transferNum.value].ies5
    sokratesData.value=detailsData.value[transferNum.value].sokrates
    pointsData.value=detailsData.value[transferNum.value]
    searchRange.value = detailsData.value[transferNum.value].searchRange
    powerList.value=[]
    initdata()
    init()
    setTimeout(()=>{loading.value=false},800)
    that.$forceUpdate()
    // let nowNums=transferNum.value
    // if(nowNums+1 === detailsData.value.length){
    //     advancevalue.value.next={}
    //     advancevalue.value.last=detailsData.value[nowNums-1]
    // }else if(nowNums.value !==0 && nowNums.value+1 !== detailsData.value.length){
    //     advancevalue.value.next=detailsData.value[nowNums+1]
    //     advancevalue.value.last=detailsData.value[nowNums-1]
    // }else if(nowNums.value ===0){
    //     advancevalue.value.next=detailsData.value[nowNums+1]
    // }
}
//下一个用户
function nextUser(){
    console.log(transferNum,'值')
    transferNum.value=Number(transferNum.value)+1
    // if(transferNum.value === detailsData.value.length){}
    store.commit('getHiteachv','')
}
//上一个用户
function lastUser(){
    if(transferNum.value !==0){
        transferNum.value=Number(transferNum.value)-1
        console.log(transferNum.value,'页数')
        ies5datas.value=detailsData.value[transferNum.value].ies5
        sokratesData.value=detailsData.value[transferNum.value].sokrates
        pointsData.value=detailsData.value[transferNum.value]
    }
    store.commit('getHiteachv','')
}
onMounted(() => {
    initdata()
})
init()
watch(()=>transferNum.value,(newnum)=>{
    console.log(newnum,'变化的数字')
    // nextTick(() => {
        cutUser()
    // })
})
// watch(() => props.detailsData, (newValue) => {
//     //   propValue.value = newValue;
//     let datas={detailsData:newValue}
//     init(datas)
//     console.log(datas,'有数据进来')
//   });
</script>
<style>
.userdetails{
    line-height: 60px;
    padding: 1%;
    width:100%;
    height:auto;
    background-color:rgba(255,255,255,.9);
    border-radius: 5px;
    /* overflow: hidden;
    overflow-y: auto; */
    position: relative;
}
.topbox{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    line-height: 40px;
}
.img-name{
    width:20%;
    display: flex;
    align-items: center;
    padding-left:2%;
}
.topbox-images{
    width:70px;
    height:70px;
}
.topbox-images img{
    width:70px;
    height:70px;
    border-radius: 50%;
}
.topbox-name{
    font-size:24px;
    font-weight: 700;
    margin-left:5%;
    line-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.information{
    width:75%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.information-icon{
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.3em;
  fill: currentColor;
  overflow: hidden;
  margin-right:10px;
  margin-left: 0px;
}
.information-text{
    font-size:16px;
    font-weight:600;
    color:#7889a0;
}
.information-item{
    width:32%;
    text-align:left;
    padding-left:1%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.product-list{
    width:100%;
    padding: 0%;
    line-height: 20px;
}
.product-title{
    width:100%;
    text-align: right;
    font-size:16px;
    font-weight: bold;
    margin-bottom: 5px;
}
.listbox{
    display: flex;
}
.listbox-item{
    width:18%;
    line-height: 30px;
    padding: 1%;
    border-radius: 5px;
    margin:0% 4%;
}
.listbox-item-total{
    width:11%;
    line-height: 30px;
    padding: 1%;
    border-radius: 5px;
    margin:0.5% 1%;
}
.item-title{
    width:100%;
    text-align: center;
    font-size:18px;
    font-weight: 700;
    color:#fff;
}
.item-content{
    width:100%;
    display: flex;
    justify-content: center;
}
.content-left,.content-right{
    margin-top:5px;
    font-size:14px;
}
.content-left p,.content-right p{
    margin-bottom: 0px;
    color:#fff;
}
.content-left span,.content-right span{
    color:#fff;
    font-size:14px;
}

.HiTeach{
    background: linear-gradient(to top right, #0093E9, #80D0C7);
}
.HiTA{
    background: linear-gradient(to top right, #ff6e72, #ff7390);
}
.IES5{
    background: linear-gradient(to top right, #FBAB7E, #F7CE68); 
}
.Sokrates{
    background: linear-gradient(to top right, #a55bfb, #bc5dfe); 
}
.SokAPP{
    background: linear-gradient(to top right, #08AEEA, #2AF598); 
}
.IRS{
    background: linear-gradient(to top right, #FBDA61, #FF5ACD); 
}
.Account{
    background: linear-gradient(to top right, #FAACA8, #DDD6F3); 
}
.HiTeachCC{
    background: linear-gradient(to top right, #74EBD5, #9FACE6); 
}

.notenabled{
    background-color: #dcdaef;
}
.notenabled-total{
    background-color: #dcdaef;
}
.notenabled-title{
   margin-top:10%;
   color:#fff;
   font-size:18px;
   font-weight: bold;
}
.notenabled-title-total{
   margin-top:40%;
   color:#fff;
   font-size:18px;
   font-weight: bold;
}
.product-details,.user-details{
    padding: 0% 1% 1% 1%;
    display: flex;
    flex-wrap: wrap;
    line-height: 60px;
    justify-content: space-between;
}
.hiteachboxdiv{
    width:75%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    padding: 1% 0.5%;
}
.heartmap-label{
    display: flex;
    line-height: 20px;
    margin-top:5%;
}
.heatmap-item{
    width:23%;
    display: flex;
    align-items: center;
}
.colorbox{
    width:40px;
    height:7px;
    line-height: 20px;
    border-radius: 3px;
    margin-right:3px;
}
.valuebox{
    font-size:14px;
    color:#c1c5d1;
}
.user-size{
    width:23%;
    padding:1%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    position: relative;
}
.tab-state{
    position:absolute;
    width:18px;
    right:-18px;
    top:0px;
    display: flex;
    flex-wrap: wrap;
}
.tab-state-btn{
    width:100%;
    line-height: 14px;
    font-size:14px;
    padding: 2px;
    border: 1px solid #ccc; /* 设置整个边框 */
    border-left: none; /* 取消左边边框 */
    border-radius: 0 5px 5px 0px;
    color:#bbbecd;
    cursor: pointer;
    background-color: #c8c9cc;
    color:#fff;
    margin-top:1px;
}
.tab-state-btn:nth-child(2){
    margin-top: 5px;
}
.opts{
    background-color:#79bbff;
    outline:none;
    border-color:#79bbff;
    color:#fff;
}
.size-label{
    width:100%;
    display: flex;
    padding: 1% 0%;
    /* flex-wrap: wrap; */
    overflow: hidden;
    overflow-x: auto;
}
.size-item{
    display: flex;
    flex-wrap: wrap;
    margin:0% 1%;
    width:25%;
    line-height: 20px;
    align-items: center;
    justify-content: center;
}
.size-value{
    width:100%;
    font-size:16px;
    margin-right:1%;
}
.size-title{
    font-size:14px;
    color:#313b5e;
}
.hint-icon{
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-left: 5px;
}
.changebtn{
    margin-left:2px;
}
.common-header-title{
    font-size:20px;
    font-weight: bold;
    text-align: left;
    line-height: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.expire{
    font-size:14px;
    color: #bbbecd;
}
.hitadiv{
    width:30%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    padding: 1%;
    /* height:50%; */
}
.login-echart{
    width:100%;
    height:54vh;
    display: flex;
    align-items: center;
}
.iesdiv{
    width:37%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    padding: 1%;
    margin-top:1%;
}
.socratesdiv{
    width:37%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    padding: 1%;
    margin-top:1%;
}
.rightsbox{
    width:100%;
    height:auto;
    line-height: 40px;
}
.rightsbox-title{
    text-align:left;
    font-size:14px;
    margin-bottom: 10px;
}
.rightsbox-content{
    display: flex;
    flex-direction: column;
    /* height: 18vh; */
    overflow: hidden;
    overflow-y: auto;
}
.rightsbox-item{
    text-align: left;
    /* border-bottom: 1px solid #ccc; */
    font-size:14px;
    line-height: 25px;
    height:100%;
}
.rightsbox-item p{
    margin-bottom: 5px;
}
.rightsbox-item-title{
    width:100%;
    font-size:16px;
    font-weight: 700;
    padding-left: 2px;
}
.rightsbox-item-time{
    width:100%;
    font-size:14px;
    padding-left: 8px;
}
.rightsbox-item-expansion{
    width:100%;
    font-size:14px;
    padding-left: 8px;
}
.rightsbox-item-expansion div{
    line-height: 18px;
    padding-left: 4px;
    margin-bottom: 3px;
}
.subjoin-item{
    margin-top:5px;
}
.rightsbox-item-time span:nth-child(3){
    margin-left:5px;
}
.expansion-title{
    font-size:14px;
    line-height: 20px;
    font-weight: 700;
}
.expansion-sizenum{
    font-size:16px
}
.rightsbox-item-time-num,.rightsbox-item-timenums,.start-title,.expansion-sizenum{
    color:#409EFF;
}
.error-title{
    color:#909399;
}
.subjoin{
    height:25vh;
    line-height: 20px;
    color:#73767a;
    overflow: hidden;
    overflow-y: auto;
}
.subjoin-title{
    text-align: left;
    font-size:16px;
    margin-bottom: 5px;
}
.subjoin-content{
    text-align: left;
}
.subjoin-content div{
    padding-left: 10px;
    font-size:14px;
    color:#303133;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.ccnums{
    margin: 0px 7px;
    color:#409EFF;
}
.endtimes{
    margin-left:15px;
    color:#409EFF;
}
.endtimes-error{
    color:#F56C6C
}
.scorebox{
    width: 23%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    padding: 1%;
    margin-top: 1%;
}
.ticketdiv{
    width: 23%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    padding: 1%;
    margin-top: 1%;
}
.topbox-name-text{
    line-height: 24px;
    margin-top:10px;
}
.topbox-name-advance{
    font-size:12px;
    line-height: 20px;
    margin-top:20px;
    color:#73767a;
}
.topbox-name-advance:hover{
    color:#409EFF;
    cursor: pointer;
}
::-webkit-scrollbar {
  background-color: #e6f9ff; /* 设置背景颜色 */
}
.back-btns{
    position:absolute;
    right:20px;
    top:0px;
}
.logintotal-box{
    line-height: 40px;
    padding: 1% 0%;
}
.logintotal-box-list{
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
}
.logintotal-box-table{
    padding: 1% 2%;
}
.logintotal-box-table-title{
    font-size:16px;
    text-align: left;
    font-weight: 700;
    margin-bottom: 5px;
    color:#606266;
}
.not-coupons{
    display: flex;
    height:90%;
    align-items: center;
    justify-content: center;
    font-size:22px;
    font-weight: 700;
    color: #73767a;
    /* line-height: 160px; */
}
.power-notdata{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:22px;
    font-weight: 700;
    color: #73767a;
    height: 30vh;
}
.expire{
    color: #b1b3b8;
}
.groupdata{
    line-height: 16px;
    text-align: right;
    font-size:14px;
    color:#909399;
    display: flex;
    justify-content: right;
    align-items: center;
}
.nowgroup-num,.totalgroup-num{
    color:#409EFF;
    margin:0px 3px;
}

.lastbtn {
  width: 30px;
  height: auto;
  line-height: 20px;
  /* position: absolute;
  left: 0%;
  top: 45%; */
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-size: 14px;
  padding: 5px;
}
.nextbtn {
  width: 30px;
  height: auto;
  line-height: 20px;
  /* position: absolute;
  right: 0%;
  top: 43%; */
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-size: 14px;
  padding: 5px;
}
.lastbtn:hover,
.nextbtn:hover {
  background-color: #dfe6e9;
  opacity: 1;
  box-shadow: rgba(6, 24, 44, 0.1) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.1) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  cursor: pointer;
}
.lastbtn:hover .btn-ls-text,
.nextbtn:hover .btn-ls-text {
  opacity: 0.8;
}
.btn-ls-text {
  margin-top: 3px;
  color: #303a5d;
  opacity: 0;
}
.last-btns {
  width: 20px;
  height: 20px;
  vertical-align: -0.2em;
  fill: currentColor;
}
.btn-ls-text p {
  margin-bottom: 5px;
}
.next-school {
  font-size: 12px;
  color: #303a5d;
  font-weight: bold;
}
.next-title {
  font-size: 8px;
  color: #34495e;
}
.entirety{
    position: relative;
}
.prodlist{
    height:60vh;
    overflow: hidden;
    overflow-y: auto;
}
.not-datas{
    font-size:16px;
    font-weight: 700;
    color: #73767a;
    line-height: 40px;
}
.login-total{
    line-height: 40px;
}
</style>
<style>
.inquirebox-details .el-divider{
    margin:12px 0px;
}
.login-total .el-overlay .el-dialog__footer{
    padding: 5px;
}
.login-total .el-overlay .el-dialog__body{
    padding: 10px;
}
.login-total .el-overlay .el-dialog__header{
    padding:5px !important;
}
.recordbox-item .el-tag{
    cursor: pointer;
}
</style>