parent
f3e06fef48
commit
6645cadfe5
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 938 KiB |
|
After Width: | Height: | Size: 771 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 86 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div ref="chart" style="width:350px" class="bar3d-chart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'Pie3DChart',
|
||||
mounted() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption({
|
||||
color:['#6340f3','#c740f1','#6dcde6'],
|
||||
title: {
|
||||
text: '待办任务',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#6dcde6'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'left'
|
||||
// },
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [{
|
||||
value: 8,
|
||||
name: '工单'
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
name: '维修'
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: '盘点'
|
||||
}
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: '#fff'
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
this.resizeChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
const option = {
|
||||
title: {
|
||||
text: 'Referer of a Website',
|
||||
subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [{
|
||||
value: 8,
|
||||
name: '工单'
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
name: '维修'
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: '盘点'
|
||||
}
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
this.chart.setOption(option)
|
||||
})
|
||||
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chart) this.chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar3d-chart {
|
||||
height: 400px;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="jsc" :style="bgStyle">
|
||||
<div class="jscC">
|
||||
<div class="jscC-top">
|
||||
<div v-for="item in topObj">
|
||||
<div class="label">{{item.label}}</div>
|
||||
<div class="value">{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jscC-center">
|
||||
<div class="jscC-center-left">
|
||||
<Bar3DChart></Bar3DChart>
|
||||
</div>
|
||||
<div class="jscC-center-center">
|
||||
<echartsMap ref="echartsMap"></echartsMap>
|
||||
|
||||
</div>
|
||||
<div class="jscC-center-right">
|
||||
<Pie3DChart></Pie3DChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jscC-bottom">
|
||||
<div @click="toUrl(item.path)" v-for="item in bottomObj">
|
||||
<div class="label">{{item.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <img :style="contentStyle" src="../../assets/jsc/content.png"></img> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Bar3DChart from "../jsc/components/barChart.vue"
|
||||
import Pie3DChart from "../jsc/components/pieChart.vue"
|
||||
import echartsMap from "./components/mapChart.vue";
|
||||
export default {
|
||||
components: {
|
||||
Bar3DChart,
|
||||
Pie3DChart,
|
||||
echartsMap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
screenWidth: 0,
|
||||
screenHeight: 0,
|
||||
bgStyle: {
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
contentStyle: {
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
topObj: [{
|
||||
label: '物资总量',
|
||||
value: 123500
|
||||
}, {
|
||||
label: '仓库数量',
|
||||
value: 45
|
||||
}, {
|
||||
label: '本月出库',
|
||||
value: 1390
|
||||
}, {
|
||||
label: '本月入库',
|
||||
value: 2350
|
||||
}, {
|
||||
label: '应急调度次数',
|
||||
value: 25
|
||||
}, {
|
||||
label: '设备总数',
|
||||
value: 350
|
||||
}, {
|
||||
label: '盘点',
|
||||
value: 0
|
||||
}, {
|
||||
label: '维护',
|
||||
value: 0
|
||||
}],
|
||||
bottomObj: [{
|
||||
label: '库存管理',
|
||||
path: '/views/inventorys'
|
||||
}, {
|
||||
label: '入库管理',
|
||||
path: '/stocks/index_purchase'
|
||||
}, {
|
||||
label: '出库管理',
|
||||
path: '/outbounds/index_receive'
|
||||
}, {
|
||||
label: '统计报表',
|
||||
path: '/reports/stocks'
|
||||
}, {
|
||||
label: '应急防御',
|
||||
path: '/books/index'
|
||||
}, {
|
||||
label: '盘点管理',
|
||||
path: '/inventorys/stocktaking'
|
||||
}, {
|
||||
label: '运维管理',
|
||||
path: '/maintenance/maintenance_records'
|
||||
}, {
|
||||
label: '工单管理',
|
||||
path: '/flood/plan'
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
this.setRem()
|
||||
|
||||
this.calculateScreenSize()
|
||||
window.addEventListener('resize', this.calculateScreenSize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateScreenSize)
|
||||
},
|
||||
methods: {
|
||||
setRem() {
|
||||
// 默认使用100px作为基准大小
|
||||
const baseSize = 100;
|
||||
const baseVal = baseSize / 1920;
|
||||
const vW = window.innerWidth; // 当前窗口的宽度
|
||||
const rem = vW * baseVal; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
|
||||
window.$size = rem / 100;
|
||||
document.documentElement.style.fontSize = rem + "px";
|
||||
},
|
||||
calculateScreenSize() {
|
||||
this.screenWidth = window.innerWidth
|
||||
this.screenHeight = window.innerHeight
|
||||
this.bgStyle = {
|
||||
width: this.screenWidth - 56 + 'px',
|
||||
height: this.screenHeight + 'px',
|
||||
position: 'relative',
|
||||
left: '-20px',
|
||||
// top:'-60px'
|
||||
}
|
||||
this.contentStyle = {
|
||||
width: this.screenWidth - 70 + 'px',
|
||||
height: this.screenHeight - 20 + 'px'
|
||||
}
|
||||
},
|
||||
toUrl(path) {
|
||||
this.$router.push(path)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .app-main {
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.jsc {
|
||||
height: 100%;
|
||||
background: url(../../assets/jsc/bg.png) no-repeat center top;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
|
||||
.jscC {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../assets/jsc/contentBg.png) no-repeat center top;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: .7rem;
|
||||
|
||||
&-top {
|
||||
width: 17.67rem;
|
||||
height: 1.52rem;
|
||||
padding: 0 .4rem;
|
||||
// height: 100%;
|
||||
background: url(../../assets/jsc/topbg.png) no-repeat center top;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.label {
|
||||
font-size: .2rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: .38rem;
|
||||
text-align: center;
|
||||
color: #7ff7fe;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
&-center {
|
||||
width: 17.67rem;
|
||||
// height: 1.52rem;
|
||||
padding: 0 .2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
// flex-wrap: wrap;
|
||||
&-left {
|
||||
// width:5.3rem;
|
||||
}
|
||||
|
||||
&-center {
|
||||
width: 10.3rem;
|
||||
}
|
||||
|
||||
&-right {}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
font-size: .22rem;
|
||||
color: #fff;
|
||||
width: 17.67rem;
|
||||
padding: .2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&>div {
|
||||
width: 1.57rem;
|
||||
height: 1.57rem;
|
||||
background: url(../../assets/jsc/icon.png) no-repeat center top;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue