|
|
@@ -49,14 +49,48 @@
|
|
|
</el-col>
|
|
|
</el-row> -->
|
|
|
<div class="info-content">
|
|
|
- <div class="header" @click="toPersonalCenter">
|
|
|
- <img :src="avatar" class="user-avatar" />
|
|
|
- </div>
|
|
|
- <div class="name">{{ nickName }}</div>
|
|
|
- <div class="tenant-name">{{ tenantName }}</div>
|
|
|
- <div class="date">{{ date }}</div>
|
|
|
+ <!-- <div class="header" @click="toPersonalCenter"> -->
|
|
|
+ <!-- <img :src="avatar" class="user-avatar" /> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- <div class="name">{{ nickName }}</div> -->
|
|
|
+ <!-- <div class="tenant-name">{{ tenantName }}</div> -->
|
|
|
+ <!-- <div class="date">{{ date }}</div> -->
|
|
|
<!-- <div class="title">欢迎登录Mec OS 工业应用操作系统</div> -->
|
|
|
- <div class="title">欢迎登录Mec OS 化纤行业生产管理系统</div>
|
|
|
+ <!-- <div class="title">欢迎登录Mec OS 化纤行业生产管理系统</div> -->
|
|
|
+ <div class="echarts1">
|
|
|
+ <div class="pieChart" ref="pieChart"></div>
|
|
|
+ <P class="planNum">10</P>
|
|
|
+ <P class="approvalNum">20</P>
|
|
|
+ <P class="plan">工艺流</P>
|
|
|
+ <P class="approval">审批流</P>
|
|
|
+ </div>
|
|
|
+ <div class="echarts2">
|
|
|
+ <div class="lineChart" ref="lineChart"></div>
|
|
|
+ </div>
|
|
|
+ <div class="echarts3">
|
|
|
+ <p class="title">操作日志</p>
|
|
|
+ <div class="text">
|
|
|
+ <span class="peo">操作人</span>
|
|
|
+ <span class="add">ip</span>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-scrollbar"></div>
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
|
|
|
+ <div >
|
|
|
+ <span class="name">{{ item.name }}</span>
|
|
|
+ <span class="ip">{{ item.ip }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="echarts4">
|
|
|
+ <div class="gaugeChart" ref="gaugeChart"></div>
|
|
|
+ </div>
|
|
|
+ <div class="echarts5">
|
|
|
+ <div class="barChart" ref="barChart"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -65,11 +99,38 @@
|
|
|
import { formatDate } from "@/utils";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import { mapGetters, mapState } from "vuex";
|
|
|
-
|
|
|
+import 'swiper/css/swiper.css';
|
|
|
+import Swiper from 'swiper';
|
|
|
export default {
|
|
|
name: "Index",
|
|
|
data() {
|
|
|
return {
|
|
|
+ swiperList: [
|
|
|
+ {
|
|
|
+ name: "111",
|
|
|
+ ip: "192.168.1.1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "222",
|
|
|
+ ip: "192.168.1.2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "333",
|
|
|
+ ip: "192.168.1.3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "444",
|
|
|
+ ip: "192.168.1.4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "555",
|
|
|
+ ip: "192.168.1.5"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "666",
|
|
|
+ ip: "192.168.1.6"
|
|
|
+ },
|
|
|
+ ],
|
|
|
// 用户导入参数
|
|
|
upload: {
|
|
|
// 是否显示弹出层（用户导入）
|
|
|
@@ -89,7 +150,264 @@ export default {
|
|
|
version: "3.8.5",
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ // 初始化 echarts
|
|
|
+ this.initChart1();
|
|
|
+ this.initChart2();
|
|
|
+ this.initChart3();
|
|
|
+ this.initChart4();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ var swiper = new Swiper(".swiper-container", {
|
|
|
+ direction: "vertical",
|
|
|
+ loop: true,
|
|
|
+ autoplay: {
|
|
|
+ delay: 1000,
|
|
|
+ },
|
|
|
+ scrollbar: {
|
|
|
+ el: ".swiper-scrollbar",
|
|
|
+ },
|
|
|
+ slidesPerView: 3,
|
|
|
+ freeMode: true,
|
|
|
+ // spaceBetween: 1,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ initChart1() {
|
|
|
+ // 通过 $ref 进行挂载
|
|
|
+ let myChart1 = this.$echarts.init(this.$refs.pieChart);
|
|
|
+ let option = {
|
|
|
+ color: ["#9370db", "#ffd700", "#00ccff", "#ff6600", "#ff9900"],
|
|
|
+ title: {
|
|
|
+ text: '流程统计',
|
|
|
+ // subtext: '\n\t\t\t\t\t10\t\t\t\t\t\t\t\t\t\t\t\t\t\t20',
|
|
|
+ left: 'left',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#696969'
|
|
|
+ },
|
|
|
+ /* subtextStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: '#000000'
|
|
|
+ } */
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ left: '60%',
|
|
|
+ top: '60%',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '100%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ // borderRadius: 10,
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ right: '40%',
|
|
|
+ top: '50%',
|
|
|
+ data: [
|
|
|
+ { value: 10, name: '工艺流' },
|
|
|
+ { value: 20, name: '审批流' },
|
|
|
+ ],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart1.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart2(){
|
|
|
+ let myChart2 = this.$echarts.init(this.$refs.lineChart);
|
|
|
+ let option = {
|
|
|
+ color: ["#FF88E0", "#9FE080"],
|
|
|
+ title: {
|
|
|
+ text: '用户登录统计',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#696969'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['客户端', '工具端']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ top: '20%',
|
|
|
+ bottom: '0%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [
|
|
|
+ '01\nMon', '02\nTue', '03\nWed', '04\nThu', '05\nFri', '06\nSat', '07\nSun',
|
|
|
+ '08\nMon', '09\nTue', '10\nWed', '11\nThu', '12\nFri', '13\nSat', '14\nSun',
|
|
|
+ '15\nMon', '16\nTue', '17\nWed', '18\nThu', '19\nFri', '20\nSat', '21\nSun',
|
|
|
+ '22\nMon', '23\nTue', '24\nWed', '25\nThu', '26\nFri', '27\nSat', '28\nSun',
|
|
|
+ '29\nMon', '30\nTue',
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '客户端',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: [10, 23, 42, 13, 30, 25, 40, 30, 42, 55, 40, 28, 20, 30, 45, 25, 20, 30, 40, 33, 35, 40, 46, 31, 13, 34, 20, 10, 36, 43]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '工具端',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: [20, 30, 29, 40, 55, 33, 30, 26, 36, 45, 50, 34, 38, 25, 28, 43, 16, 30, 45, 52, 40, 46, 33, 57, 50, 33, 40, 59, 56, 56]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart2.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart3(){
|
|
|
+ let myChart3 = this.$echarts.init(this.$refs.gaugeChart);
|
|
|
+ let option = {
|
|
|
+ color: ["#00ccff", "#ff6600", "#ff9900","#9370db", "#ffd700"],
|
|
|
+ title: {
|
|
|
+ text: '表格统计',
|
|
|
+ left: 'left',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#696969'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '0%',
|
|
|
+ right: '3%',
|
|
|
+ top: '30%',
|
|
|
+ bottom: '0%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ nameLocation: 'middle',
|
|
|
+ nameTextStyle: {
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['表单', '表格', '三级联动', '多表数量'],
|
|
|
+ inverse: true, // 使类目从右向左排列
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '15',
|
|
|
+ orientation: 'horizontal',
|
|
|
+ data: [
|
|
|
+ { value: 88, name: '表单' },
|
|
|
+ { value: 66, name: '表格' },
|
|
|
+ { value: 33, name: '三级联动' },
|
|
|
+ { value: 55, name: '多表数量' },
|
|
|
+ ],
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: '#F0F8FF'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart3.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart4(){
|
|
|
+ let myChart4 = this.$echarts.init(this.$refs.barChart);
|
|
|
+ let option = {
|
|
|
+ color: ["#5D84FE"],
|
|
|
+ title: {
|
|
|
+ text: '数据建模统计',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#696969'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['数据建模'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: false // 关闭y轴的水平分割线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ top: '30%',
|
|
|
+ bottom: '0%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [88],
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20', // 设置柱体宽度
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: '#E8EFFF'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart4.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
/** 导入按钮操作 */
|
|
|
handleImport() {
|
|
|
this.upload.title = "用户导入";
|
|
|
@@ -153,16 +471,148 @@ export default {
|
|
|
.home {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
- height: 500px;
|
|
|
+ /* height: 500px; */
|
|
|
+ background-color: #EFF2F7;
|
|
|
.info-content {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 30%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .header {
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .echarts1 {
|
|
|
+ position: relative;
|
|
|
+ width: 20%;
|
|
|
+ height: 280px;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20px 15px;
|
|
|
+ box-shadow: 10px 10px 5px #E0E0E0;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ .pieChart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .planNum {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 20px;
|
|
|
+ color: black;
|
|
|
+ left: 53px;
|
|
|
+ top: 55px;
|
|
|
+ }
|
|
|
+ .approvalNum {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 20px;
|
|
|
+ color: black;
|
|
|
+ left: 160px;
|
|
|
+ top: 55px;
|
|
|
+ }
|
|
|
+ .plan {
|
|
|
+ position: absolute;
|
|
|
+ left: 40px;
|
|
|
+ top: 90px;
|
|
|
+ }
|
|
|
+ .approval {
|
|
|
+ position: absolute;
|
|
|
+ left: 146px;
|
|
|
+ top: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .echarts2 {
|
|
|
+ width: 76%;
|
|
|
+ height: 280px;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20px 15px;
|
|
|
+ box-shadow: 10px 10px 5px #E0E0E0;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-right: 30px;
|
|
|
+ .lineChart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .echarts3 {
|
|
|
+ width: 23%;
|
|
|
+ height: 200px;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20px 15px;
|
|
|
+ box-shadow: 10px 10px 5px #E0E0E0;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: '#696969'
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: 10px;
|
|
|
+ .peo {
|
|
|
+ font-size: 14px;
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-right: 120px;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ font-size: 14px;
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 90%;
|
|
|
+ height: 80px;
|
|
|
+ /* overflow: auto; */
|
|
|
+ margin-top: 10px;
|
|
|
+ .name {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 15px;
|
|
|
+ margin-right: 90px;
|
|
|
+ }
|
|
|
+ .ip {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .echarts4 {
|
|
|
+ width: 48%;
|
|
|
+ height: 200px;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20px 15px;
|
|
|
+ box-shadow: 10px 10px 5px #E0E0E0;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .gaugeChart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .echarts5 {
|
|
|
+ width: 25%;
|
|
|
+ height: 200px;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20px 15px;
|
|
|
+ box-shadow: 10px 10px 5px #E0E0E0;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-right: 30px;
|
|
|
+ .barChart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* .header {
|
|
|
white-space: nowrap;
|
|
|
margin-bottom: 5px;
|
|
|
cursor: pointer;
|
|
|
@@ -170,7 +620,7 @@ export default {
|
|
|
width: 160px;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
- }
|
|
|
+ } */
|
|
|
.name {
|
|
|
font-size: 30px;
|
|
|
margin-bottom: 5px;
|
ZYZ