|
|
@@ -0,0 +1,857 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container home">
|
|
|
+ <!-- <el-row :gutter="20"></el-row>
|
|
|
+ <el-row :gutter="20"></el-row>
|
|
|
+ <el-divider/>
|
|
|
+
|
|
|
+ <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
|
|
+ <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
|
|
+ :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
|
|
+ :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip text-center" slot="tip">
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ <el-checkbox v-model="upload.updateSupport"/>
|
|
|
+ 是否更新已经存在的用户数据
|
|
|
+ </div>
|
|
|
+ <span>仅允许导入xls、xlsx格式文件。</span>
|
|
|
+ <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
|
|
+ @click="importTemplate">下载模板
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitFileForm">确 定</el-button>
|
|
|
+ <el-button @click="upload.open = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <button @click="upload.open = true">上传文件</button>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="8"></el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
|
+ <el-card class="update-log">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>更新日志</span>
|
|
|
+ </div>
|
|
|
+ <el-collapse accordion> 123123</el-collapse>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="8">
|
|
|
+ <el-card class="update-log">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>捐赠支持</span>
|
|
|
+ </div>
|
|
|
+ <div class="body"></div>
|
|
|
+ </el-card>
|
|
|
+ </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="title">欢迎登录Mec OS 工业应用操作系统</div> -->
|
|
|
+ <!-- <div class="title mt20">欢迎登录工业应用引擎</div> -->
|
|
|
+
|
|
|
+ <div class="echarts1">
|
|
|
+ <div class="pieChart" ref="pieChart"></div>
|
|
|
+ <div
|
|
|
+ :class="'describe' + (parseInt(index) + 1)"
|
|
|
+ v-for="(item, index) in processList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <P class="text">{{ item.name }}</P>
|
|
|
+ <P class="num">{{ item.value }}</P>
|
|
|
+ </div>
|
|
|
+ </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.oper_name }}</span>
|
|
|
+ <span class="ip">{{ item.oper_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>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { formatDate } from "@/utils";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+import { mapGetters, mapState } from "vuex";
|
|
|
+import "swiper/css/swiper.css";
|
|
|
+import Swiper from "swiper";
|
|
|
+import {
|
|
|
+ getProcess,
|
|
|
+ getOperation,
|
|
|
+ getLogin,
|
|
|
+ getTabular,
|
|
|
+ getData,
|
|
|
+} from "@/api/homePage/index";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Index",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chartObj: {
|
|
|
+ myChart1: null,
|
|
|
+ myChart2: null,
|
|
|
+ myChart3: null,
|
|
|
+ myChart4: null,
|
|
|
+ },
|
|
|
+ processList: [],
|
|
|
+ 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: {
|
|
|
+ // 是否显示弹出层（用户导入）
|
|
|
+ open: false,
|
|
|
+ // 弹出层标题（用户导入）
|
|
|
+ title: "",
|
|
|
+ // 是否禁用上传
|
|
|
+ isUploading: false,
|
|
|
+ // 是否更新已经存在的用户数据
|
|
|
+ updateSupport: 0,
|
|
|
+ // 设置上传的请求头部
|
|
|
+ headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ // 上传的地址
|
|
|
+ url: process.env.VUE_APP_BASE_API3 + "common/importDataInfo",
|
|
|
+ },
|
|
|
+ // 版本号
|
|
|
+ version: "3.8.5",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.title = sessionStorage.getItem("title") || "智能制造平台";
|
|
|
+ // 初始化 echarts
|
|
|
+ this.initChart1();
|
|
|
+ this.initChart2();
|
|
|
+ this.initChart3();
|
|
|
+ this.initChart4();
|
|
|
+
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData() {
|
|
|
+ console.log(1111);
|
|
|
+ //工业流&审批流
|
|
|
+ getProcess().then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ this.processList = response.data;
|
|
|
+ console.log(response.data);
|
|
|
+ this.chartObj.myChart1.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: response.data,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(response);
|
|
|
+ this.$message.error("获取数据失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //登录次数统计
|
|
|
+ getLogin().then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ let xAxisData = response.data[0].date;
|
|
|
+ xAxisData = xAxisData.map(function (dateStr) {
|
|
|
+ var date = new Date(dateStr);
|
|
|
+ return date.getMonth() + 1 + "月" + date.getDate() + "日";
|
|
|
+ });
|
|
|
+ let loginList = response.data.map((item) => item.name);
|
|
|
+ this.chartObj.myChart2.setOption({
|
|
|
+ xAxis: {
|
|
|
+ data: xAxisData,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: loginList,
|
|
|
+ },
|
|
|
+ series: response.data,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(response);
|
|
|
+ this.$message.error("获取数据失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //登录统计信息
|
|
|
+ getOperation().then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ this.swiperList = response.data;
|
|
|
+ console.log(this.swiperList);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ var swiper = new Swiper(".swiper-container", {
|
|
|
+ direction: "vertical",
|
|
|
+ loop: true,
|
|
|
+ autoplay: {
|
|
|
+ delay: 1000,
|
|
|
+ disableOnInteraction: false,
|
|
|
+ },
|
|
|
+ scrollbar: {
|
|
|
+ el: ".swiper-scrollbar",
|
|
|
+ },
|
|
|
+ slidesPerView: 3,
|
|
|
+ freeMode: true,
|
|
|
+ // spaceBetween: 1,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(response);
|
|
|
+ this.$message.error("获取数据失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 表格统计
|
|
|
+ getTabular().then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ let tabularList = response.data;
|
|
|
+ tabularList.push({ name: "多表数量", value: 30 });
|
|
|
+ let labelList = response.data.map((item) => item.name);
|
|
|
+ this.chartObj.myChart3.setOption({
|
|
|
+ yAxis: {
|
|
|
+ data: labelList,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: response.data,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(response);
|
|
|
+ this.$message.error("获取数据失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //数据建模数量
|
|
|
+ getData().then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ console.log(response.data);
|
|
|
+ this.chartObj.myChart4.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [response.data],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(response);
|
|
|
+ this.$message.error("获取数据失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart1() {
|
|
|
+ // 通过 $ref 进行挂载
|
|
|
+ this.chartObj.myChart1 = this.$echarts.init(this.$refs.pieChart);
|
|
|
+ let option = {
|
|
|
+ color: ["#9370db", "#ffd700", "#00ccff", "#ff6600", "#ff9900"],
|
|
|
+ title: {
|
|
|
+ text: "流程统计",
|
|
|
+ left: "left",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: "normal",
|
|
|
+ color: "#696969",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ left: "60%",
|
|
|
+ top: "60%",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ 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",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.chartObj.myChart1.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart2() {
|
|
|
+ this.chartObj.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: ["客户端11", "工具端11"],
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.chartObj.myChart2.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart3() {
|
|
|
+ this.chartObj.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: "20%",
|
|
|
+ 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: "18",
|
|
|
+ orientation: "horizontal",
|
|
|
+ data: [
|
|
|
+ { value: 88, name: "表单" },
|
|
|
+ { value: 66, name: "表格" },
|
|
|
+ { value: 33, name: "三级联动" },
|
|
|
+ { value: 55, name: "多表数量" },
|
|
|
+ ],
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: "#F0F8FF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.chartObj.myChart3.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart4() {
|
|
|
+ this.chartObj.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",
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ interval: 20,
|
|
|
+ splitLine: {
|
|
|
+ show: false, // 关闭y轴的水平分割线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "5%",
|
|
|
+ right: "5%",
|
|
|
+ top: "30%",
|
|
|
+ bottom: "0%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [20],
|
|
|
+ type: "bar",
|
|
|
+ barWidth: "30", // 设置柱体宽度
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: "#E8EFFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.chartObj.myChart4.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 导入按钮操作 */
|
|
|
+ handleImport() {
|
|
|
+ this.upload.title = "用户导入";
|
|
|
+ this.upload.open = true;
|
|
|
+ },
|
|
|
+ /** 下载模板操作 */
|
|
|
+ importTemplate() {
|
|
|
+ this.download(
|
|
|
+ "system/user/importTemplate",
|
|
|
+ {},
|
|
|
+ `user_template_${new Date().getTime()}.xlsx`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 文件上传中处理
|
|
|
+ handleFileUploadProgress(event, file, fileList) {
|
|
|
+ this.upload.isUploading = true;
|
|
|
+ },
|
|
|
+ // 文件上传成功处理
|
|
|
+ handleFileSuccess(response, file, fileList) {
|
|
|
+ this.upload.open = false;
|
|
|
+ this.upload.isUploading = false;
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ this.$alert(
|
|
|
+ "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
|
|
+ response.msg +
|
|
|
+ "</div>",
|
|
|
+ "导入结果",
|
|
|
+ { dangerouslyUseHTMLString: true }
|
|
|
+ );
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 提交上传文件
|
|
|
+ submitFileForm() {
|
|
|
+ this.$refs.upload.submit();
|
|
|
+ },
|
|
|
+ goTarget(href) {
|
|
|
+ window.open(href, "_blank");
|
|
|
+ },
|
|
|
+
|
|
|
+ toPersonalCenter() {
|
|
|
+ this.$router.push("/user/profile");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ username: (state) => state.user.name,
|
|
|
+ owner: (state) => state.user?.tenant.owner,
|
|
|
+ tenantName: (state) => state.user?.tenant.tenantName,
|
|
|
+ nickName: (state) => state.user?.nickName,
|
|
|
+ }),
|
|
|
+
|
|
|
+ ...mapGetters(["avatar"]),
|
|
|
+ date: () => {
|
|
|
+ return formatDate(new Date());
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.home {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ /* height: 500px; */
|
|
|
+ .info-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ 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%;
|
|
|
+ }
|
|
|
+ .describe1 {
|
|
|
+ .text {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ top: 90px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 20px;
|
|
|
+ color: black;
|
|
|
+ left: 63px;
|
|
|
+ top: 55px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .describe2 {
|
|
|
+ .text {
|
|
|
+ position: absolute;
|
|
|
+ left: 157px;
|
|
|
+ top: 90px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 20px;
|
|
|
+ color: black;
|
|
|
+ left: 170px;
|
|
|
+ top: 55px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 2px;
|
|
|
+ margin-right: 59px;
|
|
|
+ }
|
|
|
+ .ip {
|
|
|
+ text-align: center;
|
|
|
+ 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;
|
|
|
+ .user-avatar {
|
|
|
+ width: 160px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ } */
|
|
|
+ .name {
|
|
|
+ font-size: 30px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .tenant-name {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ /* // font-size: 16px; */
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.home {
|
|
|
+ blockquote {
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin: 0 0 20px;
|
|
|
+ font-size: 17.5px;
|
|
|
+ /* border-left: 5px solid #eee; */
|
|
|
+ }
|
|
|
+
|
|
|
+ hr {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 0;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #676a6c;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ list-style-type: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ b {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .update-log {
|
|
|
+ ol {
|
|
|
+ display: block;
|
|
|
+ list-style-type: decimal;
|
|
|
+ margin-block-start: 1em;
|
|
|
+ margin-block-end: 1em;
|
|
|
+ margin-inline-start: 0;
|
|
|
+ margin-inline-end: 0;
|
|
|
+ padding-inline-start: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lph