删除（非系统管理/待办清单范围）： - delta：view/delta、api/delta（后端已同步移除） - kpi：view/kpi(7 页)、api/kpi(7 文件)——后端无对应接口，本为死功能 - api/basic：config/dict-item/notice 均无后端接口且无人引用 - home 死代码：example.vue、notice.vue 及 home.vue 中全部注释模板与死 import 删除依赖（bundle 减重，echarts ~1MB）： - echarts / charts 组件（kpi、home 外无人使用） - vue-particles（登录页粒子，随简约化移除） - mathjs（全局注册 $math 但零调用） 删除图片（均零引用）： - talkingdata.png 2.8MB、login-bg.jpg 2.1MB、logo.jpg、logo-min.jpg 登录页重设计： - 移除粒子动画，改为浅色渐变背景 + 居中卡片 + 大标题，纯 CSS 零图片 顺带修复 lint 存量问题：移除未使用的 turnTo/canTurnTo、== 改 ===、no-new 注解
This commit is contained in:
张家训
@@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div ref="dom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { on, off } from '@/libs/tools'
|
||||
export default {
|
||||
name: 'serviceRequests',
|
||||
data () {
|
||||
return {
|
||||
dom: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resize () {
|
||||
this.dom.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '3%',
|
||||
left: '1.2%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '运营商/网络服务',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {
|
||||
color: '#2d8cf0'
|
||||
} },
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '银行/证券',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {
|
||||
color: '#10A6FF'
|
||||
} },
|
||||
data: [257, 358, 278, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '游戏/视频',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {
|
||||
color: '#0C17A6'
|
||||
} },
|
||||
data: [379, 268, 354, 269, 310, 478, 358]
|
||||
},
|
||||
{
|
||||
name: '餐饮/外卖',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {
|
||||
color: '#4608A6'
|
||||
} },
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '快递/电商',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
areaStyle: { normal: {
|
||||
color: '#398DBF'
|
||||
} },
|
||||
data: [820, 645, 546, 745, 872, 624, 258]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.dom = echarts.init(this.$refs.dom)
|
||||
this.dom.setOption(option)
|
||||
on(window, 'resize', this.resize)
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
off(window, 'resize', this.resize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+23
-131
@@ -1,143 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <Row :gutter="20">-->
|
||||
<!-- <i-col :xs="12" :md="8" :lg="4" v-for="(info, i) in homeInfoData" :key="`infor-${i}`"-->
|
||||
<!-- style="height: 120px;padding-bottom: 10px;">-->
|
||||
<!-- <infor-card shadow :color="info.color" :icon="info.icon" :icon-size="36">-->
|
||||
<!-- <count-to :end="info.count" count-class="count-style"/>-->
|
||||
<!-- <p>{{ info.title }}</p>-->
|
||||
<!-- </infor-card>-->
|
||||
<!-- </i-col>-->
|
||||
<!-- </Row>-->
|
||||
<!-- <Row :gutter="20" style="margin-top: 10px;">-->
|
||||
<!-- <i-col :md="24" :lg="10" style="margin-bottom: 20px;">-->
|
||||
<!-- <Card shadow>-->
|
||||
<!-- <div ref="myChart" style="height: 400px;"></div>-->
|
||||
<!-- </Card>-->
|
||||
<!-- </i-col>-->
|
||||
<!-- <i-col :md="24" :lg="14" style="margin-bottom: 20px;">-->
|
||||
<!-- <Card shadow>-->
|
||||
<!-- <Notice></Notice>-->
|
||||
<!-- </Card>-->
|
||||
<!-- </i-col>-->
|
||||
<!-- </Row>-->
|
||||
<div class="home">
|
||||
<Card shadow class="home-card">
|
||||
<h2>欢迎使用 freedom 管理系统</h2>
|
||||
<p>当前模块：系统管理、待办清单</p>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InforCard from '_c/info-card'
|
||||
import CountTo from '_c/count-to'
|
||||
import {ChartPie, ChartBar} from '_c/charts'
|
||||
import Example from './example.vue'
|
||||
import Notice from './notice.vue'
|
||||
import myTheme from '_c/charts/theme.json'
|
||||
import { getQuotaCountList, getHomeInfoCountList } from '@/api/kpi/kpi-quota-library'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
InforCard,
|
||||
CountTo,
|
||||
ChartPie,
|
||||
ChartBar,
|
||||
Example,
|
||||
Notice
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
homeInfoData: [
|
||||
{title: '系统用户', icon: 'md-person', count: 0, color: '#2d8cf0'},
|
||||
{title: '访问人次', icon: 'md-locate', count: 0, color: '#19be6b'},
|
||||
{title: '考核指标', icon: 'ios-leaf', count: 0, color: '#ff9900'},
|
||||
{title: '考核规则', icon: 'ios-quote', count: 0, color: '#ed3f14'},
|
||||
{title: '资产名单', icon: 'ios-paper', count: 0, color: '#E46CBB'},
|
||||
{title: '工作动态', icon: 'md-megaphone', count: 0, color: '#9A66E4'}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getDataList(){
|
||||
// 首页info统计
|
||||
getHomeInfoCountList().then(res =>{
|
||||
let temp = res.data.data.list
|
||||
let homeInfoData = this.homeInfoData
|
||||
this.homeInfoData[0].count = temp[0].userCount
|
||||
this.homeInfoData[1].count = temp[0].loginCount
|
||||
this.homeInfoData[2].count = temp[0].quotaCount
|
||||
this.homeInfoData[3].count = temp[0].itemCount
|
||||
this.homeInfoData[4].count = temp[0].assetsCount
|
||||
this.homeInfoData[5].count = temp[0].noticeCount
|
||||
})
|
||||
// 绘制统计图
|
||||
getQuotaCountList().then(res =>{
|
||||
let chartDiv = this.$refs.myChart
|
||||
this.$echarts.registerTheme('myTheme', myTheme)
|
||||
let myChart = this.$echarts.init(chartDiv,'myTheme')
|
||||
let legendList = res.data.data.legendList
|
||||
let seriesList = res.data.data.seriesList
|
||||
let option = {
|
||||
title: {
|
||||
text: '考核指标累计使用情况',
|
||||
subtext: '以对应指标使用次数为统计参数',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: legendList
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '考核指标',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: seriesList,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option)
|
||||
console.log(res.data.data.list)
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 获取数据列表
|
||||
//this.getDataList();
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'home'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.count-style {
|
||||
font-size: 50px;
|
||||
}
|
||||
/* 设置滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width:12px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.home {
|
||||
padding: 20px;
|
||||
|
||||
/* 滚动槽 */
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius:10px;
|
||||
}
|
||||
.home-card {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius:5px;
|
||||
background: #d8d7d7;
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #808695;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Row>
|
||||
<Col span="24">
|
||||
<!-- 公告区域 start -->
|
||||
<div>
|
||||
<Table :height="360"
|
||||
ref="noticeTable"
|
||||
highlight-row
|
||||
:columns="noticeListColumns"
|
||||
:data="noticeDataList"
|
||||
:loading="noticeTableLoading"
|
||||
@on-row-click="toDetail">
|
||||
</Table>
|
||||
<div class="pagination">
|
||||
<Page show-sizer
|
||||
show-total
|
||||
size="small"
|
||||
:total="pageTotal"
|
||||
:page-size="pageParam.pageSize"
|
||||
:current="pageParam.pageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
@on-change="changePage">
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<!-- 公告区域 end -->
|
||||
|
||||
<!-- Modal区域 start -->
|
||||
<Modal v-model="noticeModal"
|
||||
fullscreen
|
||||
:mask-closable="false"
|
||||
:footer-hide="true">
|
||||
<Row :gutter="24">
|
||||
<Col span="20">
|
||||
<h1>{{ notice.title }}</h1>
|
||||
</Col>
|
||||
<Divider orientation="right" style="font-size: 14px;color: #999;">
|
||||
<span style="padding-right: 24px">时间：{{ notice.publishTime | formatDateToYyMMDd }} </span>
|
||||
<span>来源：{{ notice.ssoUser.nickname }}</span>
|
||||
</Divider>
|
||||
<Col span="20">
|
||||
<p class="ql-editor" v-html="notice.content">{{ notice.content }}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
<!-- Modal区域 end -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getDataList} from '@/api/basic/basic-notice'
|
||||
import { formatDateToYyMMDd, objectUtil, } from "@/common/js/util"
|
||||
// quill 编辑器 样式
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
export default {
|
||||
name: "notice",
|
||||
data() {
|
||||
return {
|
||||
fixedHeader: true,//高度自适应
|
||||
autoHeight: `${window.innerHeight} ` * 0.30,//获取当前可视高度-定义Table高度
|
||||
noticeTableLoading: false,
|
||||
noticeDataList: [],
|
||||
pageTotal: 0, //总页数
|
||||
pageSize: 10, //每页显示条数
|
||||
pageCurrent: 1, //当前页
|
||||
pageParam: { //调用时候的分页参数
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
noticeListColumns: [
|
||||
{
|
||||
title: "#",
|
||||
type: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
className: 'my-thead',
|
||||
indexMethod: (row) => {
|
||||
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '工作动态',
|
||||
key: 'title',
|
||||
className: 'my-thead'
|
||||
},
|
||||
],
|
||||
noticeModal: false,
|
||||
noticeModalTitle: '',
|
||||
notice: {
|
||||
title: '',
|
||||
isPublish: '1',
|
||||
content: '',
|
||||
ssoUser: {},
|
||||
status: '1',
|
||||
},
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatDateToYyMMDd(value) {
|
||||
return formatDateToYyMMDd(value);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getDataList() {
|
||||
let temp = JSON.parse(JSON.stringify(this.pageParam))
|
||||
let data = objectUtil.trimJoin(temp,{"isPublish": 1} )
|
||||
this.noticeTableLoading = true
|
||||
getDataList(data).then(res => {
|
||||
let pageInfo = res.data.data.pageInfo
|
||||
this.pageTotal = pageInfo.total
|
||||
this.noticeDataList = pageInfo.list
|
||||
// 延迟300毫秒，给它更流畅的感觉
|
||||
setTimeout(() => {
|
||||
this.noticeTableLoading = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
changePage(index) {
|
||||
// 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
|
||||
this.pageParam.pageNum = index;
|
||||
this.getDataList();
|
||||
},
|
||||
changePageSize(page) {
|
||||
// 切换分页条数
|
||||
this.pageParam.pageNum = 1;
|
||||
this.pageParam.pageSize = page;
|
||||
this.getDataList();
|
||||
},
|
||||
toDetail(index) {
|
||||
this.notice.title = index.title;
|
||||
this.notice.publishTime = index.publishTime;
|
||||
this.notice.content = index.content;
|
||||
this.notice.ssoUser = index.ssoUser;
|
||||
this.noticeModal = true;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ivu-table th.my-thead {
|
||||
background: #6790bc;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.ivu-table-row{
|
||||
cursor:pointer
|
||||
}
|
||||
|
||||
.ql-editor .ql-video {
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user