1793 lines
57 KiB
Vue
1793 lines
57 KiB
Vue
<template>
|
||
<div class="navbar" style="height: 48px;background-color: white;color: white!important;">
|
||
<div class="logo" v-if="isShowKbossCharge">
|
||
<img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
|
||
<span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
|
||
</div>
|
||
<!-- v-show="!role.includes('客户')" -->
|
||
<!-- v-if="!isShowKbossCharge&&!role.includes('客户')||isMobileScreen"-->
|
||
<hamburger v-if="false" style="display: flex;justify-content: center;align-items: center;color: white!important;"
|
||
id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||
<breadcrumb style="color:white!important;display: flex;justify-content: center;align-items: center;height: 100%;"
|
||
id="breadcrumb-container" class="breadcrumb-container" />
|
||
<div class="right-menu"
|
||
style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;">
|
||
<template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
|
||
<span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')"
|
||
class="right-menu-item hover-effect "
|
||
style="font-size: 16px;display: flex;justify-content: center;align-items: center">
|
||
<b style="display: flex;justify-content: center;align-items: center">
|
||
回到首页
|
||
</b>
|
||
</span>
|
||
<!-- <el-button @click="openChou" type="text">全部产品</el-button>-->
|
||
<el-tooltip v-if="role.includes('客户')" class="item" effect="dark" content="查询产品" placement="bottom">
|
||
<span class="right-menu-item hover-effect"
|
||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search" @click="showSearch" />
|
||
</span>
|
||
</el-tooltip>
|
||
<!-- <el-tooltip class="item " effect="dark" content="购物车" placement="bottom" v-if="org_type==2||org_type==3">-->
|
||
<!-- <span class="right-menu-item hover-effect "-->
|
||
<!-- style="font-size: 26px;display: flex;justify-content: center;align-items: center">-->
|
||
<!-- <b style="display: flex;justify-content: center;align-items: center">-->
|
||
<!-- <i style="color: #262626;font-weight: bold;font-size: 16px;"-->
|
||
<!-- class="el-icon-shopping-cart-2 shopCar"-->
|
||
<!-- @click="goShopping()"></i>-->
|
||
<!-- </b>-->
|
||
<!-- </span>-->
|
||
<!-- </el-tooltip>-->
|
||
<el-tooltip class="item" effect="dark" content="信息" placement="bottom">
|
||
<span class="right-menu-item hover-effect"
|
||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||
<el-badge :value="count == 0 ? '' : count" :max="9" class="badge"
|
||
style="height: 35px;display: flex;justify-content: center;align-items: center">
|
||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="infrom" />
|
||
</el-badge>
|
||
</span>
|
||
</el-tooltip>
|
||
<el-tooltip v-if="!role.includes('客户')" class="item" effect="dark" content="可视化大屏" placement="bottom">
|
||
<span class="right-menu-item hover-effect"
|
||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data" @click="goScreen" />
|
||
</span>
|
||
</el-tooltip>
|
||
|
||
<!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">
|
||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||
</el-tooltip> -->
|
||
</template>
|
||
<!-- <el-tooltip class="item" effect="dark" content="操作" placement="bottom"> -->
|
||
<el-dropdown @visible-change="handleShow" class="avatar-container right-menu-item hover-effect nick-name-style"
|
||
style="margin-right: 0" trigger="click">
|
||
<div class="avatar-wrapper">
|
||
<!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
|
||
<i
|
||
style="font-size: 18px; color: #262626;font-weight: 400;display: flex;justify-content: flex-start;align-items: center">
|
||
<div class="imgUser">{{ nick_name.charAt(0) }}</div>
|
||
{{ nick_name }}
|
||
<i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
|
||
<!-- <i class="el-icon-arrow-down el-icon--right"></i>-->
|
||
|
||
</i>
|
||
<!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
|
||
</div>
|
||
<el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
|
||
<div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
|
||
<span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
|
||
<span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
|
||
<span ref="contentToCopy">
|
||
{{
|
||
userId
|
||
}}
|
||
|
||
</span>
|
||
<svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
|
||
width="12" height="12" style="fill: #1019ab;">
|
||
<path
|
||
d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
|
||
p-id="1521"></path>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<el-divider style="margin: 0!important;"></el-divider>
|
||
<div v-if="role.includes('客户')"
|
||
style="padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
|
||
|
||
<span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
|
||
style="display: block;margin-bottom: 5px">余额</span>{{
|
||
mybalance ? mybalance : initMybalance()
|
||
}} ￥</span>
|
||
<el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
|
||
style="padding: 8px; ">
|
||
充值
|
||
</el-button>
|
||
</div>
|
||
<el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
|
||
<span style="display: block">个人中心</span>
|
||
</el-dropdown-item>
|
||
<!-- channelManagementShow=true-->
|
||
<!-- v-if="role.includes('客户')"-->
|
||
<!-- <el-dropdown-item v-if="role.includes('客户')"-->
|
||
<!-- @click.native="channelFirstBtn">-->
|
||
<!-- <span style="display: block">渠道管理</span>-->
|
||
<!-- </el-dropdown-item>-->
|
||
<!-- <el-dropdown-item v-if="role.includes('客户')">-->
|
||
<!-- <span style="display: block" @click="showCode">促销邀请码</span>-->
|
||
<!-- </el-dropdown-item>-->
|
||
<el-dropdown-item @click.native="edituserPassword()">
|
||
<span style="display: block">修改密码</span>
|
||
</el-dropdown-item>
|
||
|
||
<!-- <el-dropdown-item @click.native="personalMessage" v-if="org_type == 2 || org_type == 3">
|
||
<span style="display: block">个人信息</span>
|
||
</el-dropdown-item> -->
|
||
<el-dropdown-item @click.native="logout">
|
||
<span style="display: block">退出登录</span>
|
||
</el-dropdown-item>
|
||
<!-- <el-dropdown-item v-if="isLocalhost" @click.native="logout1">-->
|
||
<!-- <span style="display: block">退登</span>-->
|
||
<!-- </el-dropdown-item>-->
|
||
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<!-- </el-tooltip> -->
|
||
</div>
|
||
|
||
<!-- 移动端通知弹框 -->
|
||
<el-drawer :visible.sync="drawer" v-if="isMobile" :direction="direction" :withHeader="false" size="90%"
|
||
class="drawerMobile">
|
||
<el-container class="container">
|
||
<el-aside width="95px" class="aside">
|
||
<div class="header">消息中心</div>
|
||
<div class="title">
|
||
<div @click="tab(1)" class="info">全部消息</div>
|
||
<div @click="tab(2)" class="info">未读消息</div>
|
||
<div @click="tab(3)" class="info">已读消息</div>
|
||
</div>
|
||
</el-aside>
|
||
<el-container class="content_box">
|
||
<el-header class="header">| {{ this.tabTitle }}</el-header>
|
||
<el-main class="content">
|
||
<!-- 全部信息 -->
|
||
<div v-if="this.tab_index == 1" class="allinfo">
|
||
<div class="button">
|
||
<el-button size="mini" type="primary" @click="readMassage">已读</el-button>
|
||
<el-button size="mini" type="danger" @click="delMessage">删除</el-button>
|
||
</div>
|
||
<el-table :header-cell-style="rowClass" @expand-change="expandChangeHandler" ref="table"
|
||
@row-click="expandChangeHandler1" class="table" :row-class-name="rowStyle"
|
||
:data="alliInformationList ? alliInformationList : []" height="680" tooltip-effect="dark"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="expand" width="30px">
|
||
<template slot-scope="props">
|
||
<div class="msgtext">
|
||
{{ props.row.msgtext }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="sendtime" label="接收时间">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 未读信息 -->
|
||
<div v-if="this.tab_index == 2" class="noreadinfo">
|
||
<div class="button">
|
||
<el-button size="mini" type="primary" @click="readMassage">已读</el-button>
|
||
<el-button size="mini" type="danger" @click="delMessage">删除</el-button>
|
||
</div>
|
||
<el-table :header-cell-style="rowClass" @row-click="expandChangeHandler1" class="table" ref="table"
|
||
@expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList" height="680"
|
||
tooltip-effect="dark" @selection-change="handleSelectionChange">
|
||
<el-table-column type="expand" width="30px">
|
||
<template slot-scope="props">
|
||
<div class="msgtext">
|
||
{{ props.row.msgtext }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="sendtime" label="接收时间">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 已读信息 -->
|
||
<div v-if="this.tab_index == 3" class="readinfo">
|
||
<div class="button">
|
||
<el-button size="mini" type="danger" @click="delMessage">删除</el-button>
|
||
</div>
|
||
<el-table :header-cell-style="rowClass" ref="table" class="table" @row-click="expandChangeHandler2"
|
||
@expand-change="expandChangeHandler" @selection-change="handleSelectionChange"
|
||
:row-class-name="rowStyle" :data="readInformationList" height="680" tooltip-effect="dark">
|
||
<el-table-column type="expand" width="30px">
|
||
</el-table-column>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="sendtime" label="接收时间">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</el-drawer>
|
||
|
||
<!-- 通知弹框 -->
|
||
<el-drawer @close="closeMesssageWindow" :visible.sync="drawer" v-else :direction="direction" :withHeader="false"
|
||
size="70%" class="drawer">
|
||
<el-container style="height: 100vh">
|
||
<el-aside width="200px" class="aside">
|
||
<div class="header" style="font-size:16px;">消息中心</div>
|
||
<div class="title">
|
||
<div @click="tab(1)" style="font-size:16px;">全部消息</div>
|
||
<div @click="tab(2)" style="font-size:16px;">未读消息</div>
|
||
<div @click="tab(3)" style="font-size:16px;">已读消息</div>
|
||
</div>
|
||
</el-aside>
|
||
<el-container class="content_box">
|
||
<el-header class="header">| {{ this.tabTitle }}</el-header>
|
||
<el-main class="content">
|
||
<!-- 全部信息 -->
|
||
<div v-if="this.tab_index == 1">
|
||
<div class="button" style="display:flex;">
|
||
<el-button size="small" type="primary" @click="readMassage">已读</el-button>
|
||
<el-button size="small" type="danger" @click="delMessage">删除</el-button>
|
||
</div>
|
||
<el-table @expand-change="expandChangeHandler" ref="table" @row-click="expandChangeHandler1" class="table"
|
||
:row-class-name="rowStyle" :data="alliInformationList ? alliInformationList : []" height="780"
|
||
tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||
<el-table-column type="expand" width="30px">
|
||
<template slot-scope="props">
|
||
<div class="msgtext">
|
||
{{ props.row.msgtext }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="sendtime" label="接收时间">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 未读信息 -->
|
||
<div v-if="this.tab_index == 2">
|
||
<div class="button" style="display:flex;">
|
||
<el-button size="small" type="primary" @click="readMassage">已读</el-button>
|
||
<el-button size="small" type="danger" @click="delMessage">删除</el-button>
|
||
</div>
|
||
<el-table @row-click="expandChangeHandler1" ref="table" @expand-change="expandChangeHandler"
|
||
:row-class-name="rowStyle" :data="unreadMessageList" height="780" tooltip-effect="dark"
|
||
style="width: 100%" @selection-change="handleSelectionChange">
|
||
<el-table-column type="expand" width="30px">
|
||
<template slot-scope="props">
|
||
<div class="msgtext">
|
||
{{ props.row.msgtext }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="sendtime" label="接收时间">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 已读信息 -->
|
||
<div v-if="this.tab_index == 3">
|
||
<div class="button" style="display:flex;">
|
||
<el-button size="small" type="danger" @click="delMessage">删除</el-button>
|
||
</div>
|
||
<el-table ref="table" @row-click="expandChangeHandler2" @expand-change="expandChangeHandler"
|
||
@selection-change="handleSelectionChange" :row-class-name="rowStyle" :data="readInformationList"
|
||
height="780" tooltip-effect="dark" style="width: 100%">
|
||
<el-table-column type="expand" width="30px">
|
||
</el-table-column>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column label="消息内容" prop="msgtype" :show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column prop="sendtime" label="接收时间">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</el-drawer>
|
||
|
||
|
||
<!-- 修改密码弹窗 -->
|
||
<el-dialog title="修改密码" :visible.sync="passwordDialog" width="45%" :before-close="handleClose1"
|
||
custom-class="password-dialog" class="password-dialog-wrapper">
|
||
<el-form ref="passwordForm" :model="passwordForm" label-width="120px" style="width: 80%" :rules="rules">
|
||
<el-form-item label="旧密码:" prop="password">
|
||
<el-input v-model="passwordForm.password" placeholder="请输入旧密码" show-password></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="新密码:" prop="newpassword">
|
||
<el-input v-model="passwordForm.newpassword" placeholder="请输入新密码" show-password></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="新密码:" prop="configPassword">
|
||
<el-input v-model="passwordForm.configPassword" placeholder="请确认新密码" show-password></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="cancelPassword()" size="small">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="onsubmit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 修改个人信息弹窗 -->
|
||
<el-dialog title="修改个人信息" :visible.sync="editUserInfoDialog" width="45%" :before-close="handleClose2"
|
||
style="width: 80%" class="userInfoDialog">
|
||
<el-form ref="editUserInfoForm" :model="editUserInfoForm" label-width="120px" style="width: 70%"
|
||
:rules="editRules">
|
||
<el-form-item label="昵称:" prop="">
|
||
<el-input v-model="editUserInfoForm.nick_name" placeholder="请输入昵称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="邮件地址:" prop="">
|
||
<el-input v-model="editUserInfoForm.email" placeholder="请输入邮件地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="地址:" prop="">
|
||
<el-input v-model="editUserInfoForm.address" placeholder="请输入地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="手机号:" prop="mobile">
|
||
<el-input v-model="editUserInfoForm.mobile" placeholder="请输入手机号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="二维码名片:" prop="">
|
||
<div class="upload-box">
|
||
<el-upload style="height: 60px; width: 60px;" class="avatar-uploader" action="#" :show-file-list="false"
|
||
:auto-upload="false" :on-change="handleAvatarSuccess">
|
||
<img style="height: 60px; width: 60px" v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||
<i style="height: 60px; width: 60px" v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="cancelEdit()" size="small">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="editOnsubmit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- Form -->
|
||
<el-button type="text" @click="dialogFormVisible = true" v-if="this.$store.state.operationAnalysis.themeStates"
|
||
class="themeBtn">
|
||
<img src="../../icons/svg/主题.png" alt="" style="width: 26px;height: 26px;">
|
||
</el-button>
|
||
|
||
<el-dialog title="图表主题设置" :visible.sync="dialogFormVisible" class="themeStyle">
|
||
<el-form :model="form">
|
||
<el-form-item label="柱状图:" :label-width="formLabelWidth">
|
||
<!-- <el-input v-model="form.name" autocomplete="off"></el-input>-->
|
||
<div class="gridForm">
|
||
图表的颜色:
|
||
<el-color-picker v-model="newGridObj.bar.color"></el-color-picker>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="同比折线图:" :label-width="formLabelWidth">
|
||
<div class="gridForm">
|
||
折线的颜色:
|
||
<el-color-picker v-model="newGridObj.lineTong.color"></el-color-picker>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="环比折线图:" :label-width="formLabelWidth">
|
||
<div class="gridForm">
|
||
折线的颜色:
|
||
<el-color-picker v-model="newGridObj.lineHuan.color"></el-color-picker>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="changeColor">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 促销邀请码-->
|
||
<el-dialog title="促销邀请码" :visible.sync="cuxiaoIsShow" custom-class="cuxiao-style">
|
||
<promotional-invitation-code @acceptSonMessage="acceptSonMessage"></promotional-invitation-code>
|
||
</el-dialog>
|
||
<!-- 渠道管理-->
|
||
|
||
<el-dialog title="渠道管理信息提示" :visible.sync="channelManagementShow" custom-class="channel-dialog-style">
|
||
<span
|
||
class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="channelManagementShow = false">取 消</el-button>
|
||
<el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- searhcDiaolog-->
|
||
|
||
<el-dialog title="全站搜索" :visible.sync="searchDialogVisible" width="800px" :close-on-click-modal="false"
|
||
:before-close="handleClose">
|
||
<el-input placeholder="请输入搜索关键字" v-model="searchValue" class="input-with-select">
|
||
<el-button @click="searchBtn" :loading="searchLoading" slot="append" icon="el-icon-search"></el-button>
|
||
</el-input>
|
||
|
||
<ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length > 0">
|
||
<li v-for="(item, index) in searchResultList" :key="index">
|
||
<span class="title" @click="goProductPage(item)">
|
||
<div style="margin-right: 5px">{{ item.product_name }}</div> <img v-if="item.type == 'jd'"
|
||
src="./images/京东云.svg" alt="">
|
||
<img v-else-if="item.type == 'bd'" src="./images/百度智能云.svg" alt="">
|
||
</span>
|
||
<span class="description">{{ item.description }}</span>
|
||
<!-- <span class="tags">123</span>-->
|
||
</li>
|
||
</ul>
|
||
<div v-loading="searchLoading" class="searchEmpty" v-else>
|
||
<img style="width: 200px;height: 200px;" src="./images/empty.svg" alt="">
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
</span>
|
||
</el-dialog>
|
||
<el-drawer direction="ltr" style="z-index: 1000;width: 1205px" title="" custom-class="myDrawer"
|
||
:visible.sync="drawerPro" :with-header="false">
|
||
<div style="width: 100%;height: 100%;background: white">
|
||
<ul class="allProStyle">
|
||
<li @click="goHomePage"><img src="./img/a.svg" alt=""> 阿里云</li>
|
||
<li @click="goHomePage"><img src="./img/b.svg" alt="">百度智能云</li>
|
||
</ul>
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters, mapState } from "vuex";
|
||
import Breadcrumb from "@/components/Breadcrumb";
|
||
import Hamburger from "@/components/Hamburger";
|
||
import Screenfull from "@/components/Screenfull";
|
||
import SizeSelect from "@/components/SizeSelect";
|
||
import Search from "@/components/HeaderSearch";
|
||
import InForm from "@/components/Inform";
|
||
import barObj from "@/views/operation/variable";
|
||
import {
|
||
getUserInfoAPI,
|
||
editUserInfoAPI,
|
||
logoutAPI,
|
||
editPasswordAPI,
|
||
getTimeAPI,
|
||
getUnreadmsgAPI,
|
||
getMsgAPI,
|
||
getReadmsgAPI,
|
||
upMsgAPI,
|
||
delMsgAPI,
|
||
addPictureAPI,
|
||
getPictureAPI,
|
||
getOpictureAPI,
|
||
addOpictureAPI
|
||
} from "@/api/login";
|
||
import messagedrawer from "@/layout/components/inFram/message";
|
||
import store from "@/store";
|
||
import PromotionalInvitationCode from "@/views/customer/promotionalInvitationCode/index.vue";
|
||
import { reqApplyChannel } from "@/api/customer/channel";
|
||
import { reqSearchProductList } from "@/api/product/product";
|
||
import { bdProducts, jdProducts } from "@/views/product/productionData";
|
||
import { getHomePath } from "@/views/setting/tools";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
drawerPro: false,
|
||
searchLoading: false,
|
||
searchResultList: [],
|
||
searchValue: '',
|
||
searchDialogVisible: false,
|
||
channelManagementShow: false,//渠道管理
|
||
isMobileScreen: false,
|
||
cuxiaoIsShow: false,
|
||
isShowKbossCharge: false,//判断是否在充值页面
|
||
isUpdate: false,//检测用户是否“已读”
|
||
isLocalhost: false,
|
||
// 获取用户代理字P串
|
||
userAgent: window.navigator.userAgent,
|
||
// 判断是否为移动设备
|
||
isMobile: false,
|
||
imageUrl: '',
|
||
alliInformationList: [],//全部消息
|
||
unreadMessageList: [],//未读信息
|
||
readInformationList: [],//已读信息
|
||
readIdList: [],
|
||
count: null,
|
||
userInfoList: [],
|
||
editUserInfoForm: { //修改个人信息表单
|
||
nick_name: "",
|
||
email: "",
|
||
address: "",
|
||
mobile: "",
|
||
},
|
||
passwordForm: {
|
||
//修改密码表单
|
||
password: "",
|
||
newpassword: "",
|
||
configPassword: "",
|
||
},
|
||
rules: {
|
||
password: [
|
||
{ required: true, message: "请输入旧密码", trigger: "blur" },
|
||
],
|
||
newpassword: [
|
||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||
],
|
||
configPassword: [
|
||
{ required: true, message: "请确认新密码", trigger: "blur" },
|
||
],
|
||
},
|
||
editRules: {
|
||
mobile: [
|
||
{
|
||
pattern:
|
||
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
|
||
message: "请输入有效的手机号",
|
||
},
|
||
{ message: "请输入有效的手机号", trigger: "change" },
|
||
],
|
||
},
|
||
squareUrl:
|
||
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
|
||
passwordDialog: false,
|
||
editUserInfoDialog: false,
|
||
//通知
|
||
drawer: false,
|
||
direction: "rtl",
|
||
nick_name: JSON.parse(localStorage.getItem('user_info')).username,
|
||
userId: sessionStorage.getItem("userId"),
|
||
org_type: sessionStorage.getItem("org_type"),
|
||
role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"),
|
||
tabTitle: "消息中心",
|
||
tab_index: 1,
|
||
dialogTableVisible: false,
|
||
dialogFormVisible: false,
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
},
|
||
formLabelWidth: '120px',
|
||
color1: '#409EFF',
|
||
color2: null,
|
||
themeState: '',
|
||
newGridObj: {
|
||
bar: {
|
||
color: '#0798DB'
|
||
},
|
||
lineTong: {
|
||
color: '#D2EB2D'
|
||
},
|
||
lineHuan: {
|
||
color: '#F51515'
|
||
},
|
||
},
|
||
oneId: '',
|
||
isOne: false,
|
||
currentFile: null
|
||
};
|
||
},
|
||
components: {
|
||
PromotionalInvitationCode,
|
||
Breadcrumb,
|
||
Hamburger,
|
||
Screenfull,
|
||
SizeSelect,
|
||
Search,
|
||
InForm,
|
||
messagedrawer,
|
||
},
|
||
computed: {
|
||
...mapGetters(["sidebar", "avatar", "device"]),
|
||
...mapState({
|
||
gridObj: state => state.operationAnalysis.gridObj,
|
||
mybalance: state => state.user.mybalance,
|
||
logoutUrl: state => state.login.logoutUrl,
|
||
|
||
})
|
||
},
|
||
created() {
|
||
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
|
||
|
||
this.getUserInfo();
|
||
// this.autoShuaXin();
|
||
this.themeState = sessionStorage.getItem('themeState')
|
||
this.getUnreadmsg()
|
||
this.handleResize()
|
||
},
|
||
methods: {
|
||
goHomePage() {
|
||
this.$router.push('/homePage/index')
|
||
this.$store.commit('setShowHomeNav', true)
|
||
},
|
||
openChou() {
|
||
this.drawerPro = true
|
||
},
|
||
handleClose() {
|
||
this.searchDialogVisible = false
|
||
this.searchValue = ''
|
||
this.searchResultList = []
|
||
},
|
||
goProductPage(item) {
|
||
this.searchValue = ''
|
||
this.searchResultList = []
|
||
this.searchDialogVisible = false
|
||
console.log(item)
|
||
if (item.type === "bd") {
|
||
if (bdProducts['网络'].includes(item.product_name)) {
|
||
console.log("对等连接~~")
|
||
this.$router.push({
|
||
path: '/product/baiduProduct',
|
||
query: { product_name: '网络' }
|
||
})
|
||
} else if (bdProducts['存储'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '存储' }
|
||
})
|
||
} else if (bdProducts['云与业务安全'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '云与业务安全' }
|
||
})
|
||
} else if (bdProducts['计算'].includes(item.product_name)) {
|
||
console.log("跳转了")
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '计算' }
|
||
})
|
||
} else if (bdProducts['数据库'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '数据库' }
|
||
})
|
||
} else {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: 'AI能力引擎' }
|
||
})
|
||
}
|
||
} else if (item.type === "jd") {
|
||
if (jdProducts['网络与CDN'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '网络与CDN' }
|
||
})
|
||
} else if (jdProducts['存储'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '存储' }
|
||
})
|
||
} else if (jdProducts['安全'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '安全' }
|
||
})
|
||
} else if (jdProducts['弹性计算'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '弹性计算' }
|
||
})
|
||
} else if (jdProducts['数据库'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '数据库' }
|
||
})
|
||
} else {
|
||
// console.log("走了京哦else")
|
||
this.$router.push('/product/jdProduct')
|
||
}
|
||
} else if (item.type === "sdzx") {
|
||
this.$router.push('/gpu/createGpu')
|
||
} else if (item.type === "ucloud") {
|
||
this.$router.push('/product/ucloudProduct/createCloudHost')
|
||
}
|
||
},
|
||
searchBtn() {
|
||
if (!this.searchValue) {
|
||
return
|
||
}
|
||
this.searchLoading = true
|
||
// setTimeout(() => {
|
||
// this.searchLoading = false
|
||
// }, 300)
|
||
reqSearchProductList({ name: this.searchValue }).then(res => {
|
||
this.searchLoading = false
|
||
if (res.status) {
|
||
this.searchResultList = res.data
|
||
} else {
|
||
this.searchResultList = []
|
||
}
|
||
})
|
||
},
|
||
showSearch() {
|
||
this.searchDialogVisible = true
|
||
},
|
||
goScreen() {
|
||
window.open('https://www.kaiyuancloud.cn/dev/#/screen/k8sRescource', '_blank');
|
||
// const newWindow = window.open('https://www.kaiyuancloud.cn/dev/#/screen/index', '_blank');
|
||
// const newWindow = window.open('http://localhost:9527/#/screen/index', '_blank');
|
||
// // 确保窗口已经打开
|
||
// newWindow.onload = function () {
|
||
// // 这需要用户的交互才能全屏
|
||
// if (newWindow.document.documentElement.requestFullscreen) {
|
||
// console.log("走了if")
|
||
// newWindow.document.documentElement.requestFullscreen();
|
||
// } else if (newWindow.document.documentElement.mozRequestFullScreen) { // Firefox
|
||
// newWindow.document.documentElement.mozRequestFullScreen();
|
||
// } else if (newWindow.document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
|
||
// console.log("走了if谷歌")
|
||
// newWindow.document.documentElement.webkitRequestFullscreen();
|
||
// } else if (newWindow.document.documentElement.msRequestFullscreen) { // IE/Edge
|
||
// newWindow.document.documentElement.msRequestFullscreen();
|
||
// }
|
||
// };
|
||
|
||
},
|
||
channelFirstBtn() {
|
||
reqApplyChannel({ user_id: this.userId }).then(res => {
|
||
if (res.code == "100" || res.code == "210") {
|
||
this.$message.success(res.msg)
|
||
} else if (res.code == "300") {
|
||
this.channelManagementShow = true
|
||
} else if (res.code == "200") {
|
||
this.$router.push('/customer/channelMangement')
|
||
}
|
||
})
|
||
},
|
||
ChannelConfirmBtn() {//渠道确定按钮
|
||
reqApplyChannel({ user_id: this.userId, code: '200' }).then(res => {
|
||
if (res.status) {
|
||
this.$message.success("申请渠道成功，后续会有相关人员和您沟通~")
|
||
this.channelManagementShow = false
|
||
} else {
|
||
this.$message.error("申请渠道失败~")
|
||
}
|
||
})
|
||
|
||
},
|
||
// 屏幕宽度变化时触发的方法
|
||
handleResize() {
|
||
if (window.matchMedia('(max-width: 760px)').matches) {
|
||
this.isMobileScreen = true;
|
||
} else {
|
||
this.isMobileScreen = false;
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
// 在组件销毁前移除监听器
|
||
window.removeEventListener('resize', this.handleResize);
|
||
},
|
||
//接受子组件信息
|
||
acceptSonMessage(value) {
|
||
this.cuxiaoIsShow = value
|
||
},
|
||
showCode() {
|
||
this.cuxiaoIsShow = true
|
||
},
|
||
handleShow(isShow) {
|
||
let resverNode = document.getElementById('resverIcon')
|
||
|
||
if (isShow) {
|
||
if (this.role.includes('客户')) {
|
||
this.$store.dispatch('user/getCustmoersMoney')
|
||
}
|
||
|
||
resverNode.style.transform = 'rotate(180deg)'
|
||
} else {
|
||
resverNode.style.transform = 'rotate(0)'
|
||
}
|
||
},
|
||
initMybalance() {
|
||
return sessionStorage.getItem('mybalance')
|
||
},
|
||
copyBtn() {//个人信息复制id
|
||
const textToCopy = this.$refs.contentToCopy.innerText;
|
||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||
this.$message.success('复制成功！')
|
||
|
||
}).catch((error) => {
|
||
console.error('复制失败', error);
|
||
});
|
||
|
||
},
|
||
closeMesssageWindow() {//抽屉关闭的回调
|
||
|
||
this.getUnreadmsg()
|
||
if (this.isUpdate) {
|
||
|
||
|
||
} else {
|
||
|
||
}
|
||
|
||
},
|
||
rowClass() {
|
||
return "font-size:14px;"
|
||
},
|
||
handleAvatarSuccess(file, fileList) {
|
||
this.imageUrl = URL.createObjectURL(file.raw);
|
||
this.currentFile = file;
|
||
},
|
||
personalMessage() {//进入个人信息页面
|
||
this.$router.push('/customer/customerInformation')
|
||
},
|
||
getUnreadmsg() {//获取未读信息
|
||
getUnreadmsgAPI().then(res => {
|
||
if (res.status) {
|
||
this.count = res.count
|
||
this.unreadMessageList = res.messages
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
getReadmsg() {//获取已读信息
|
||
getReadmsgAPI().then(res => {
|
||
if (res.status) {
|
||
this.readInformationList = res.msg
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
rowStyle({ row, rowIndex }) {//改变表格某一行样式
|
||
if (this.isOne == true && row.id == this.oneId) {
|
||
return 'unReadColor';
|
||
} else if (row.msgstatus == 1) {
|
||
return 'unReadColor';
|
||
}
|
||
return '';
|
||
},
|
||
|
||
handleSelectionChange(selection) {//获取选择的数据的id
|
||
if (selection) {
|
||
this.readIdList = []
|
||
selection.forEach(item => {
|
||
this.readIdList.push(item.id)
|
||
})
|
||
}
|
||
},
|
||
infrom() { // 通知
|
||
this.isUpdate = false
|
||
this.drawer = true;
|
||
this.getMsg()
|
||
},
|
||
getMsg() {//获取所有信息
|
||
getMsgAPI({ userid: this.userId }).then(res => {
|
||
if (res.status && res.msg) {
|
||
this.alliInformationList = res.msg
|
||
}
|
||
})
|
||
},
|
||
readMassage() {//一键已读
|
||
this.isUpdate = true
|
||
if (this.readIdList.length) {
|
||
this.upMsg(this.readIdList)
|
||
} else {
|
||
this.$message({
|
||
message: "请选择数据",
|
||
type: "warning",
|
||
});
|
||
}
|
||
},
|
||
upMsg(data) {//更改消息状态
|
||
let params = {
|
||
msgids: data
|
||
}
|
||
upMsgAPI(params).then(res => {
|
||
if (res.status) {
|
||
this.$message({
|
||
message: "一键已读成功",
|
||
type: "success",
|
||
});
|
||
if (this.tab_index == 1) {
|
||
this.getMsg()
|
||
} else if (this.tab_index == 2) {
|
||
this.getUnreadmsg()
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
delMsg(data) {//删除消息
|
||
let params = {
|
||
id: data
|
||
}
|
||
delMsgAPI(params).then(res => {
|
||
if (res.status) {
|
||
this.$message({
|
||
message: "删除成功",
|
||
type: "success",
|
||
});
|
||
if (this.tab_index == 1) {
|
||
this.getMsg()
|
||
} else if (this.tab_index == 2) {
|
||
this.getUnreadmsg()
|
||
} else if (this.tab_index == 3) {
|
||
this.getReadmsg()
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
delMessage() {//一键删除
|
||
if (this.readIdList.length) {
|
||
this.delMsg(this.readIdList)
|
||
} else {
|
||
this.$message({
|
||
message: "请选择数据",
|
||
type: "warning",
|
||
});
|
||
}
|
||
},
|
||
expandChangeHandler(row) {//表格每一行展开时
|
||
this.isOne = true
|
||
this.oneId = row.id
|
||
let params = {
|
||
msgids: [row.id]
|
||
}
|
||
upMsgAPI(params).then(res => {
|
||
if (res.status) {
|
||
this.rowStyle(row)
|
||
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
|
||
},
|
||
expandChangeHandler1(row) {
|
||
this.isUpdate = true
|
||
this.$refs.table.toggleRowExpansion(row);
|
||
this.expandChangeHandler(row)
|
||
},
|
||
expandChangeHandler2(row) {
|
||
this.$refs.table.toggleRowExpansion(row);
|
||
},
|
||
change(row, expanded) {
|
||
// console.log(row);
|
||
// console.log(expanded);
|
||
|
||
},
|
||
tab(i) {//通知切换
|
||
this.tab_index = i;
|
||
if (i == 1) {
|
||
this.tabTitle = "全部消息";
|
||
this.getMsg()
|
||
} else if (i == 2) {
|
||
this.tabTitle = "未读消息";
|
||
this.getUnreadmsg()
|
||
|
||
} else {
|
||
this.tabTitle = "已读消息";
|
||
this.getReadmsg()
|
||
}
|
||
},
|
||
autoShuaXin() { // 自动刷新
|
||
setInterval(() => {
|
||
getTimeAPI().then((res) => {
|
||
// console.log(res);
|
||
});
|
||
// 时间间隔
|
||
}, 100000);
|
||
},
|
||
async getUserInfo() { //获取个人信息
|
||
getUserInfoAPI({ id: this.userId }).then((res) => {
|
||
if (res.status == true) {
|
||
// this.nick_name = res.data[0].username;
|
||
this.userInfoList = res.data;
|
||
sessionStorage.setItem("orgid", res.data[0].orgid);
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
goShopping() { //跳转购物车
|
||
// this.$router.push("/shoppingManagement");
|
||
this.$router.push("/product/shoppingCart");
|
||
},
|
||
toggleSideBar() {
|
||
this.$store.dispatch("app/toggleSideBar");
|
||
},
|
||
edituserPassword() {//修改密码
|
||
this.passwordDialog = true;
|
||
},
|
||
onsubmit() { //修改密码
|
||
this.$refs.passwordForm.validate((valid) => {
|
||
if (valid) {
|
||
if (
|
||
this.passwordForm.newpassword == this.passwordForm.configPassword
|
||
) {
|
||
let params = {
|
||
id: this.userId,
|
||
password: this.passwordForm.password,
|
||
newpassword: this.passwordForm.newpassword,
|
||
};
|
||
editPasswordAPI(params).then((res) => {
|
||
if (res.status == true) {
|
||
this.$message({
|
||
message: "密码修改成功",
|
||
type: "success",
|
||
});
|
||
this.passwordDialog = false;
|
||
this.$router.push({ name: "Login" });
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: "新旧密码不一致",
|
||
type: "error",
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async edituser() { //修改个人信息
|
||
this.editUserInfoDialog = true;
|
||
if (this.role == '运营') {
|
||
this.getOpicture()
|
||
} else {
|
||
this.getPicture()
|
||
}
|
||
await this.getUserInfo();
|
||
this.editUserInfoForm.email = this.userInfoList[0].email;
|
||
this.editUserInfoForm.address = this.userInfoList[0].address;
|
||
this.editUserInfoForm.mobile = this.userInfoList[0].mobile;
|
||
// this.editUserInfoForm.nick_name = this.userInfoList[0].username;
|
||
},
|
||
getPicture() {
|
||
let params = {
|
||
userid: this.userId
|
||
}
|
||
getPictureAPI(params).then(res => {
|
||
this.imageUrl = res.picture_url ? res.picture_url : null;
|
||
})
|
||
},
|
||
getOpicture() {//仅运营角色用
|
||
let params = {
|
||
userid: this.userId
|
||
}
|
||
getOpictureAPI(params).then(res => {
|
||
this.imageUrl = res.data ? res.data : null;
|
||
})
|
||
},
|
||
|
||
editOnsubmit() { //修改个人信息
|
||
this.editUserInfoForm.contactor_phone = this.editUserInfoForm.mobile;
|
||
editUserInfoAPI({ ...this.editUserInfoForm, id: this.userId, }).then(
|
||
(res) => {
|
||
if (res.status == true) {
|
||
this.$message({
|
||
message: "修改成功",
|
||
type: "success",
|
||
});
|
||
this.getUserInfo();
|
||
this.editUserInfoDialog = false;
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
}
|
||
);
|
||
let params = {
|
||
userid: this.userId
|
||
}
|
||
let formData = this.getFormData(params);
|
||
formData.append("picture", this.currentFile.raw);
|
||
if (this.role == '运营') {
|
||
addOpictureAPI(formData).then(res => {
|
||
if (res.status) {
|
||
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
addPictureAPI(formData).then(res => {
|
||
if (res.status) {
|
||
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
handleClose1() {
|
||
this.$refs.passwordForm.resetFields();
|
||
this.passwordDialog = false;
|
||
},
|
||
handleClose2() {
|
||
this.$refs.editUserInfoForm.resetFields();
|
||
this.editUserInfoDialog = false;
|
||
},
|
||
cancelPassword() {
|
||
this.passwordDialog = false;
|
||
},
|
||
cancelEdit() {
|
||
this.$refs.editUserInfoForm.resetFields();
|
||
this.editUserInfoDialog = false;
|
||
},
|
||
async logout() {//退出登录
|
||
|
||
// logout() {
|
||
// await this.$store.dispatch('auth/removeToken')
|
||
// logoutAPI().then((res) => {
|
||
// // console.log(res);
|
||
// });
|
||
|
||
//获取当前url
|
||
let url = window.location.href;
|
||
//判断url中是否包含domain_name字段
|
||
// if (!url.includes('domain_name')) {
|
||
// //跳转到https://www.opencomputing.cn/
|
||
// window.location.href = 'https://www.opencomputing.cn/';
|
||
//
|
||
// } else {
|
||
// await this.$router.push(`/homePage?redirect=${this.$route.fullPath}`);
|
||
// }
|
||
|
||
|
||
// if (this.logoutUrl) {
|
||
// window.location.href = this.logoutUrl
|
||
// } else {mo
|
||
// window.location.href = 'https://www.opencomputing.cn/';
|
||
// }
|
||
|
||
store.commit('tagsView/resetBreadcrumbState');
|
||
sessionStorage.removeItem("auths");
|
||
sessionStorage.removeItem("routes");
|
||
sessionStorage.removeItem("user");
|
||
sessionStorage.removeItem("userId");
|
||
sessionStorage.removeItem("org_type")
|
||
localStorage.removeItem('userId')
|
||
|
||
|
||
localStorage.removeItem("auths");
|
||
localStorage.removeItem("routes");
|
||
localStorage.removeItem("user");
|
||
localStorage.removeItem("userId");
|
||
localStorage.removeItem("org_type")
|
||
sessionStorage.removeItem('userId')
|
||
this.$store.commit('setLoginState', false)
|
||
|
||
await this.$router.push(getHomePath());
|
||
// window.location.reload()
|
||
},
|
||
|
||
async logout1() {//退出登录
|
||
|
||
// logout() {
|
||
// await this.$store.dispatch('auth/removeToken')
|
||
logoutAPI().then((res) => {
|
||
// console.log(res);
|
||
});
|
||
|
||
//获取当前url
|
||
let url = window.location.href;
|
||
//判断url中是否包含domain_name字段
|
||
await this.$router.push(`/login`);
|
||
store.commit('tagsView/resetBreadcrumbState');
|
||
sessionStorage.removeItem("auths");
|
||
sessionStorage.removeItem("routes");
|
||
sessionStorage.removeItem("user");
|
||
sessionStorage.removeItem("userId");
|
||
},
|
||
//改变图表颜色
|
||
changeColor() {
|
||
this.dialogFormVisible = false
|
||
this.$store.commit('operationAnalysis/setGridObj', this.newGridObj)
|
||
localStorage.setItem('gridObj', JSON.stringify(this.newGridObj))
|
||
},
|
||
getFormData(object) {//转换参数为formdata格式
|
||
const formData = new FormData();
|
||
Object.keys(object).forEach((key) => {
|
||
const value = object[key];
|
||
if (Array.isArray(value)) {
|
||
value.forEach((subValue, i) => {
|
||
formData.append(key + `[${i}]`, subValue);
|
||
});
|
||
} else {
|
||
formData.append(key, object[key]);
|
||
}
|
||
});
|
||
return formData;
|
||
},
|
||
},
|
||
watch: {
|
||
// gridObj(newValue, oldValue) {
|
||
// this.themeState = newValue
|
||
// console.log("gridObj原先是", oldValue)
|
||
// console.log("gridObj现在是", newValue)
|
||
// console.log("tgridObj", this.gridObj)
|
||
// },
|
||
gridObj: {
|
||
handler(newValue, oldValue) {
|
||
// console.log("gridObj原先是", oldValue)
|
||
// console.log("gridObj现在是", newValue)
|
||
// console.log("tgridObj", this.gridObj)
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.role = sessionStorage.getItem("jueseNew")
|
||
if (this.role.includes('客户')) {
|
||
// this.$store.commit('app/closeSiderBtn')
|
||
}
|
||
|
||
//判断是否在充值也展示
|
||
if (window.location.href.includes('kbossCharge')) {
|
||
this.isShowKbossCharge = true
|
||
}
|
||
if (JSON.parse(localStorage.getItem('gridObj')) != {}) {
|
||
// this.newGridObj.bar.color = JSON.parse(localStorage.getItem('gridObj')).bar.color
|
||
// this.newGridObj.lineHuan.color = JSON.parse(localStorage.getItem('gridObj')).lineHuan.color
|
||
// this.newGridObj.lineTong.color = JSON.parse(localStorage.getItem('gridObj')).lineTong.color
|
||
// console.log("grid",this.gridObj)
|
||
}
|
||
this.isLocalhost = window.location.href.includes('localhost') || window.location.href.includes('xterm')
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less">
|
||
::v-deep .password-dialog {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.el-dialog {
|
||
margin: 0 auto !important;
|
||
position: relative;
|
||
top: 0;
|
||
|
||
@media screen and (max-width: 1200px) {
|
||
width: 70% !important;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
width: 90% !important;
|
||
}
|
||
}
|
||
|
||
.el-dialog__header {
|
||
text-align: center;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
.password-dialog-wrapper {
|
||
::v-deep .el-dialog {
|
||
margin-top: 0 !important;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
.channel-dialog-style {
|
||
position: relative;
|
||
width: 700px;
|
||
height: 350px;
|
||
|
||
.indent {
|
||
line-height: 35px;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.indent {
|
||
display: block;
|
||
/* 将 span 元素转换为块级元素 */
|
||
text-indent: 2em;
|
||
/* 设置首行缩进的大小为 2 个字符 */
|
||
line-height: 25px;
|
||
}
|
||
|
||
.el-divider--horizontal {
|
||
margin: 0;
|
||
}
|
||
|
||
.navbar {
|
||
.userInfoDialog {
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
height: 60px;
|
||
width: 60px;
|
||
line-height: 60px;
|
||
text-align: center;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
}
|
||
|
||
.drawer {
|
||
.el-table .readColor {
|
||
color: rgb(146, 192, 146) !important;
|
||
}
|
||
|
||
.el-table .unReadColor {
|
||
color: rgb(175, 179, 175) !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.logo {
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 15px;
|
||
transform: translate(0, -50%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 45px;
|
||
height: 45px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
}
|
||
|
||
//.resverIcon:hover {
|
||
// transform: rotate(180deg);
|
||
// border: 1px solid red;
|
||
//}
|
||
|
||
.nick-name-style:hover .resverIcon {
|
||
//transition: transform 250ms ease; /* 设置初始过渡时间为250毫秒 */
|
||
//transform: rotate(180deg);
|
||
//transform: rotate(180deg);
|
||
}
|
||
|
||
|
||
.navbar {
|
||
height: 50px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||
|
||
.hamburger-container {
|
||
line-height: 46px;
|
||
height: 100%;
|
||
float: left;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, 0.025);
|
||
}
|
||
}
|
||
|
||
.breadcrumb-container {
|
||
float: left;
|
||
}
|
||
|
||
.errLog-container {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.right-menu {
|
||
float: right;
|
||
height: 100%;
|
||
line-height: 50px;
|
||
|
||
.shopCar {
|
||
// padding-top: 19px;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.right-menu-item {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
height: 100%;
|
||
font-size: 18px;
|
||
color: #5a5e66;
|
||
vertical-align: text-bottom;
|
||
|
||
.badge {
|
||
// margin-top: 10px;
|
||
//margin-right: 10px;
|
||
}
|
||
|
||
&.hover-effect {
|
||
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, 0.025);
|
||
}
|
||
}
|
||
}
|
||
|
||
.avatar-container {
|
||
margin-right: 30px;
|
||
|
||
.avatar-wrapper {
|
||
// margin-top: 5px;
|
||
position: relative;
|
||
|
||
.user-avatar {
|
||
cursor: pointer;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.el-icon-caret-bottom {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 25px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.drawerMobile {
|
||
.container {
|
||
height: 100vh;
|
||
|
||
.aside {
|
||
.header {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.title {
|
||
.info {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_box {
|
||
.header {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.content {
|
||
.allinfo {
|
||
.button {
|
||
display: flex;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.readinfo {
|
||
.button {
|
||
display: flex;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.noreadinfo {
|
||
.button {
|
||
display: flex;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//通知框样式
|
||
//tatle背景色设置
|
||
::v-deep .el-drawer {
|
||
background: #d9dee4;
|
||
color: black;
|
||
}
|
||
|
||
.aside {
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
.header {
|
||
padding-left: 20px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
font-weight: 600;
|
||
background-color: #d9dee4;
|
||
}
|
||
|
||
.title div {
|
||
padding-left: 35px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.title div:hover {
|
||
background-color: #f4f6f8;
|
||
}
|
||
}
|
||
|
||
.content_box {
|
||
background-color: #fff;
|
||
padding: 0 10px;
|
||
|
||
.header {
|
||
font-size: 22px;
|
||
line-height: 60px;
|
||
border-bottom: 1px solid rgb(65, 65, 65);
|
||
}
|
||
|
||
.msgtext {
|
||
// height: 100px;
|
||
}
|
||
|
||
.button {
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.themeStyle {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.themeBtn {
|
||
position: absolute;
|
||
right: 250px;
|
||
top: 0;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.gridForm {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-dropdown-menu__item--divided {
|
||
border-top: 0;
|
||
}
|
||
|
||
.copy-btn {
|
||
margin-left: 5px;
|
||
|
||
&:hover {
|
||
fill: #7f7dda !important;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.moneyNow {
|
||
&:hover {
|
||
text-underline: black;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 760px) {
|
||
.logo {
|
||
display: none;
|
||
}
|
||
|
||
.hamburger-container {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.el-dropdown-menu {
|
||
background-color: #ffffff;
|
||
padding-top: 0;
|
||
}
|
||
|
||
::v-deep .el-popper .popper__arrow::after {
|
||
top: 1px;
|
||
margin-left: -6px;
|
||
border-top-width: 0;
|
||
border-bottom-color: #255fd5 !important;
|
||
}
|
||
|
||
.searchUl,
|
||
.searchEmpty {
|
||
|
||
height: 250px;
|
||
width: 100%;
|
||
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
}
|
||
|
||
.searchEmpty {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.searchUl {
|
||
overflow-y: auto;
|
||
padding-top: 10px;
|
||
|
||
li {
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
margin-bottom: 10px;
|
||
|
||
.title {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
transition: all .3s ease-in-out;
|
||
|
||
&:hover {
|
||
transition: all .3s ease-in-out;
|
||
color: blue;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.description {
|
||
color: #949498;
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
margin-top: 3px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
.cuxiao-style {
|
||
width: 500px;
|
||
height: 250px;
|
||
|
||
}
|
||
|
||
@media screen and (max-width: 760px) {
|
||
.logo {
|
||
display: none;
|
||
}
|
||
|
||
.cuxiao-style {
|
||
width: 95% !important;
|
||
}
|
||
}
|
||
|
||
.allProStyle {
|
||
padding: 15px;
|
||
|
||
li {
|
||
width: fit-content;
|
||
margin: 15px 0;
|
||
font-size: 18px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: all .3s ease-in-out;
|
||
|
||
&:hover {
|
||
color: #1b5bff;
|
||
}
|
||
|
||
img {
|
||
margin-right: 5px;
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
::v-deep .ltr {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.imgUser {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: #081020;
|
||
color: white;
|
||
}
|
||
</style>
|
||
<style>
|
||
::v-deep .myDrawer {
|
||
width: 100% !important;
|
||
}
|
||
</style>
|