xiaoy
/
hjjc-workbench-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-3-10

Browse Source
master
xy 3 years ago
parent 177c0d1c20
commit f76344d1ae
4 changed files with 329 additions and 7 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -18,6 +18,7 @@
"core-js": "3.6.5",
"element-ui": "2.13.2",
"html2canvas": "^1.4.1",
"echarts": "^4.2.1",
"js-cookie": "2.2.0",
"less": "^3.13.1",
"moment": "^2.29.4",

330
src/layout/components/worker/index.vue
Unescape View File

@ -1,13 +1,89 @@
<template>
<div class="worker-container">
<div class="card" v-for="i in 13">
<div class="card">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">待办事项（4）</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div>
<div v-for="o in 4" :key="o">
{{'待办事项 ' + o }}
</div>
</el-card>
</div>
<div class="card">
<el-card class="box-card" shadow="hover">
<div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">图表1</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div>
<div id="line-chart" style="width: 500px;height: 260px;">
</div>
</el-card>
</div>
<div class="card">
<el-card class="box-card" shadow="hover">
<div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">图表2</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div>
<div id="bar-chart" style="width: 600px;height: 260px;">
</div>
</el-card>
</div>
<div class="card">
<el-card class="box-card" shadow="hover">
<div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">图表3</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div>
<div id="doughnut-chart" style="width: 300px;height: 310px;">
</div>
</el-card>
</div>
<div class="card">
<el-card class="box-card" shadow="hover">
<div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">图表4</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div>
<div id="sankey-chart" style="width: 750px;height: 310px;">
</div>
</el-card>
</div>
<div class="card">
<el-card class="box-card" shadow="hover">
<div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">进度</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div>
<div>
<el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress>
</div>
<div>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
</div>
</el-card>
</div>
<div class="card">
<el-card class="box-card" shadow="hover">
<div slot="header">
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">卡片名称</span>
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
<div>
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
</div>
</el-card>
</div>
@ -15,12 +91,252 @@
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
const animationDuration = 6000
export default {
data() {
return {}
return {
lineChartOption: {
tooltip: {
trigger: 'axis'
},
legend: {},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: 'Highest',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{type: 'max', name: 'Max'},
{type: 'min', name: 'Min'}
]
},
markLine: {
data: [{type: 'average', name: 'Avg'}]
}
},
{
name: 'Lowest',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]
},
markLine: {
data: [
{type: 'average', name: 'Avg'},
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
},
chart2Option:{
title: {
text: 'Waterfall Chart',
subtext: 'Living Expenses in Shenzhen'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
let tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: [0, 1700, 1400, 1200, 300, 0]
},
{
name: 'Life Cost',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'inside'
},
data: [2900, 1200, 300, 200, 900, 300]
}
]
},
chart3Option:{
tooltip: {
trigger: 'item'
},
legend: {
top: '0%',
left: 'center',
padding:[4, 0, 20, 0]
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
},
chart4Option:{
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
data: [
{
name: 'a'
},
{
name: 'b'
},
{
name: 'a1'
},
{
name: 'a2'
},
{
name: 'b1'
},
{
name: 'c'
}
],
links: [
{
source: 'a',
target: 'a1',
value: 5
},
{
source: 'a',
target: 'a2',
value: 3
},
{
source: 'b',
target: 'b1',
value: 8
},
{
source: 'a',
target: 'b1',
value: 3
},
{
source: 'b1',
target: 'a1',
value: 1
},
{
source: 'b1',
target: 'c',
value: 2
}
]
}
}
}
},
methods: {
initChart(id,options){
echarts.init(document.getElementById(id),"macarons").setOption(options)
}
},
methods: {},
computed: {},
mounted() {
this.initChart('line-chart',this.lineChartOption)
this.initChart('bar-chart',this.chart2Option)
this.initChart('doughnut-chart',this.chart3Option)
this.initChart('sankey-chart',this.chart4Option)
}
}
</script>
@ -36,7 +352,7 @@ export default {
.card{
flex-shrink: 0;
flex-grow: 1;
min-width: 20vw;
//min-width: 25vw;
margin-right: 10px;
margin-bottom: 10px;

1
src/layout/index.vue
Unescape View File

@ -181,6 +181,7 @@ import worker from "./components/worker"
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
padding: 0 20px;
position: relative;

4
src/store/modules/permission.js
Unescape View File

@ -146,6 +146,10 @@ const actions = {
case '/contract':
item.redirect = '/contract/dashboard'
break;
default:
if(item.children.length > 0){
item.redirect = item.children[0]?.path
}
}
item.hidden = true
return item

Write Preview
Loading…
Cancel
Save