mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 13:49:37 +08:00
1
This commit is contained in:
SelfRidicule
parent
6fe0274bb3
commit
a19d96bec9
@ -19,7 +19,7 @@
|
||||
"axios": "^0.19.0",
|
||||
"core-js": "^3.6.4",
|
||||
"crypto-js": "^4.0.0",
|
||||
"echarts": "^5.1.1",
|
||||
"echarts": "^5.5.1",
|
||||
"enquire.js": "^2.1.6",
|
||||
"js-cookie": "^2.2.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
|
||||
@ -1,13 +1,397 @@
|
||||
<template>
|
||||
<div class='container'>
|
||||
|
||||
<div class='topHeadView'>
|
||||
<div class='itemView' v-for='item in 4'>
|
||||
<div class='imgView'></div>
|
||||
<div class='label'>待派单</div>
|
||||
<div class='num'>10</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='caseStatisticsView'>
|
||||
<div class='headView'>
|
||||
<div class='titleView'>工单统计</div>
|
||||
<div class='typeView'>
|
||||
<div class='type activity'>本周</div>
|
||||
<div class='type'>本月</div>
|
||||
<div class='type'>本年</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='contentView'>
|
||||
<div class='itemView' v-for='item in 6'>
|
||||
<div class='label'>维修工单</div>
|
||||
<div class='value'>100</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='statusView'>
|
||||
<div class='caseStatusView'>
|
||||
<div class='headView'>
|
||||
<div class='titleView'>工单完成情况</div>
|
||||
<div class='typeView'>
|
||||
<div class='type activity'>本周</div>
|
||||
<div class='type'>本年</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='contentView'>
|
||||
<div class='circularView'>
|
||||
<div id='echart1' style='width: 400px; height: 300px'></div>
|
||||
</div>
|
||||
<div class='centerLine'></div>
|
||||
<div class='circularView'>
|
||||
<div id='echart2' style='width: 400px; height: 300px'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='evaluateView'>
|
||||
<div class='headView'>
|
||||
<div class='titleView'>评价情况</div>
|
||||
</div>
|
||||
<div class='contentView'>
|
||||
<div id='echart3' style='width: 400px; height: 300px'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='faultView'>
|
||||
<div class='floorView'>
|
||||
<div class='headView'>
|
||||
<div class='titleView'>工单完成情况</div>
|
||||
<div class='conditionView'>
|
||||
<a-select default-value="week" style="width: 120px;margin-right: 10px">
|
||||
<a-select-option value="week">
|
||||
按周
|
||||
</a-select-option>
|
||||
<a-select-option value="month">
|
||||
按月
|
||||
</a-select-option>
|
||||
<a-select-option value="year">
|
||||
按年
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-date-picker placeholder="请选择时间" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='rightView'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'RepairStatistics'
|
||||
name: 'RepairStatistics',
|
||||
mounted() {
|
||||
this.createEchart('echart1')
|
||||
this.createEchart('echart2')
|
||||
this.createEchart('echart3')
|
||||
},
|
||||
methods: {
|
||||
createEchart(id) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
let myChart = echarts.init(document.getElementById(id))
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
left: 'right',
|
||||
orient: 'vertical'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 2,
|
||||
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 ' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union ' },
|
||||
{ value: 300, name: 'Video ' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
word-break: break-all;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.topHeadView {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
background: #4093f7;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.topHeadView .itemView {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.topHeadView .itemView .imgView {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: white;
|
||||
border-radius: 80px;
|
||||
}
|
||||
|
||||
.topHeadView .itemView .label {
|
||||
margin-top: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.topHeadView .itemView .num {
|
||||
position: absolute;
|
||||
left: calc(100% + 10px);
|
||||
top: 50%;
|
||||
transform: translateY(-100%);
|
||||
width: 90px;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.caseStatisticsView {
|
||||
margin-top: 10px;
|
||||
padding: 0 20px;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.caseStatisticsView .headView {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.caseStatisticsView .headView .titleView {
|
||||
font-size: 14px;
|
||||
color: #4093f7;
|
||||
font-weight: bold;
|
||||
padding: 14px 30px;
|
||||
border-bottom: 2px solid #4093f7;
|
||||
}
|
||||
|
||||
|
||||
.caseStatisticsView .headView .typeView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.caseStatisticsView .headView .typeView .type {
|
||||
margin-right: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.caseStatisticsView .headView .typeView .activity {
|
||||
color: #4093f7;
|
||||
}
|
||||
|
||||
.caseStatisticsView .contentView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30px 50px;
|
||||
}
|
||||
|
||||
|
||||
.caseStatisticsView .contentView .itemView {
|
||||
flex: 1;
|
||||
border: 1px solid #4093f7;
|
||||
border-radius: 4px;
|
||||
padding: 14px 20px;
|
||||
margin-left: 20px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.caseStatisticsView .contentView .itemView:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.caseStatisticsView .contentView .itemView .label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #4093f7;
|
||||
}
|
||||
|
||||
.caseStatisticsView .contentView .itemView .value {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.statusView {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.statusView .caseStatusView, .statusView .evaluateView {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
.statusView .caseStatusView {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.statusView .evaluateView {
|
||||
flex: 1;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
|
||||
.statusView .caseStatusView .headView, .statusView .evaluateView .headView {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.statusView .caseStatusView .headView .titleView, .statusView .evaluateView .headView .titleView {
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
.statusView .caseStatusView .headView .typeView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.statusView .caseStatusView .headView .typeView .type {
|
||||
font-size: 12px;
|
||||
color: #4093f7;
|
||||
margin-left: 20px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.statusView .caseStatusView .headView .typeView .type.activity {
|
||||
border: 1px solid #4093f7;
|
||||
}
|
||||
|
||||
.statusView .caseStatusView .contentView {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.statusView .caseStatusView .contentView .circularView {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.statusView .caseStatusView .contentView .centerLine {
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.statusView .evaluateView .contentView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.faultView {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.faultView .floorView{
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
|
||||
.faultView .floorView .headView {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.faultView .floorView .headView .titleView {
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
.faultView .floorView .headView .conditionView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -108,7 +108,7 @@ const vueConfig = {
|
||||
port: 8000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:9227',
|
||||
target: 'http://192.168.0.30:9227',
|
||||
pathRewrite: { '^/api': '' },
|
||||
ws: false,
|
||||
changeOrigin: true
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@ -5539,13 +5539,13 @@ ecc-jsbn@~0.1.1:
|
||||
jsbn "~0.1.0"
|
||||
safer-buffer "^2.1.0"
|
||||
|
||||
echarts@^5.1.1:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.1.tgz#b186f162f017c555cfd67b12ede6762bdc3ddfda"
|
||||
integrity sha512-b3nP8M9XwZM2jISuA+fP0EuJv8lcfgWrinel185Npy8bE/UhXTDIPJcqgQOCWdvk0c5CeT6Dsm1xBjmJXAGlxQ==
|
||||
echarts@^5.5.1:
|
||||
version "5.5.1"
|
||||
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
|
||||
integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
|
||||
dependencies:
|
||||
tslib "2.0.3"
|
||||
zrender "5.1.0"
|
||||
tslib "2.3.0"
|
||||
zrender "5.6.0"
|
||||
|
||||
editorconfig@^0.15.2:
|
||||
version "0.15.2"
|
||||
@ -12391,10 +12391,10 @@ tsconfig@^7.0.0:
|
||||
strip-bom "^3.0.0"
|
||||
strip-json-comments "^2.0.0"
|
||||
|
||||
tslib@2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz?cache=0&sync_timestamp=1617647074515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
|
||||
integrity sha1-jgdBrEX8DCJuWKF7/D5kubxsphw=
|
||||
tslib@2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
|
||||
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
|
||||
|
||||
tslib@^1.10.0:
|
||||
version "1.11.1"
|
||||
@ -13456,9 +13456,9 @@ yorkie@^2.0.0:
|
||||
normalize-path "^1.0.0"
|
||||
strip-indent "^2.0.0"
|
||||
|
||||
zrender@5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.npm.taobao.org/zrender/download/zrender-5.1.0.tgz?cache=0&sync_timestamp=1618215776804&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fzrender%2Fdownload%2Fzrender-5.1.0.tgz#b6a84c3aa7ccc6642ee0519901ca4c0835c4d85e"
|
||||
integrity sha1-tqhMOqfMxmQu4FGZAcpMCDXE2F4=
|
||||
zrender@5.6.0:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
|
||||
integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
|
||||
dependencies:
|
||||
tslib "2.0.3"
|
||||
tslib "2.3.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user