mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 17:19:35 +08:00
1
This commit is contained in:
SelfRidicule
parent
6fe0274bb3
commit
a19d96bec9
@ -19,7 +19,7 @@
|
|||||||
"axios": "^0.19.0",
|
"axios": "^0.19.0",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
"crypto-js": "^4.0.0",
|
"crypto-js": "^4.0.0",
|
||||||
"echarts": "^5.1.1",
|
"echarts": "^5.5.1",
|
||||||
"enquire.js": "^2.1.6",
|
"enquire.js": "^2.1.6",
|
||||||
"js-cookie": "^2.2.0",
|
"js-cookie": "^2.2.0",
|
||||||
"lodash.clonedeep": "^4.5.0",
|
"lodash.clonedeep": "^4.5.0",
|
||||||
|
|||||||
@ -1,13 +1,397 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
@ -108,7 +108,7 @@ const vueConfig = {
|
|||||||
port: 8000,
|
port: 8000,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost:9227',
|
target: 'http://192.168.0.30:9227',
|
||||||
pathRewrite: { '^/api': '' },
|
pathRewrite: { '^/api': '' },
|
||||||
ws: false,
|
ws: false,
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
|
|||||||
30
yarn.lock
30
yarn.lock
@ -5539,13 +5539,13 @@ ecc-jsbn@~0.1.1:
|
|||||||
jsbn "~0.1.0"
|
jsbn "~0.1.0"
|
||||||
safer-buffer "^2.1.0"
|
safer-buffer "^2.1.0"
|
||||||
|
|
||||||
echarts@^5.1.1:
|
echarts@^5.5.1:
|
||||||
version "5.1.1"
|
version "5.5.1"
|
||||||
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.1.tgz#b186f162f017c555cfd67b12ede6762bdc3ddfda"
|
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
|
||||||
integrity sha512-b3nP8M9XwZM2jISuA+fP0EuJv8lcfgWrinel185Npy8bE/UhXTDIPJcqgQOCWdvk0c5CeT6Dsm1xBjmJXAGlxQ==
|
integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib "2.0.3"
|
tslib "2.3.0"
|
||||||
zrender "5.1.0"
|
zrender "5.6.0"
|
||||||
|
|
||||||
editorconfig@^0.15.2:
|
editorconfig@^0.15.2:
|
||||||
version "0.15.2"
|
version "0.15.2"
|
||||||
@ -12391,10 +12391,10 @@ tsconfig@^7.0.0:
|
|||||||
strip-bom "^3.0.0"
|
strip-bom "^3.0.0"
|
||||||
strip-json-comments "^2.0.0"
|
strip-json-comments "^2.0.0"
|
||||||
|
|
||||||
tslib@2.0.3:
|
tslib@2.3.0:
|
||||||
version "2.0.3"
|
version "2.3.0"
|
||||||
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"
|
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
|
||||||
integrity sha1-jgdBrEX8DCJuWKF7/D5kubxsphw=
|
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
|
||||||
|
|
||||||
tslib@^1.10.0:
|
tslib@^1.10.0:
|
||||||
version "1.11.1"
|
version "1.11.1"
|
||||||
@ -13456,9 +13456,9 @@ yorkie@^2.0.0:
|
|||||||
normalize-path "^1.0.0"
|
normalize-path "^1.0.0"
|
||||||
strip-indent "^2.0.0"
|
strip-indent "^2.0.0"
|
||||||
|
|
||||||
zrender@5.1.0:
|
zrender@5.6.0:
|
||||||
version "5.1.0"
|
version "5.6.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"
|
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
|
||||||
integrity sha1-tqhMOqfMxmQu4FGZAcpMCDXE2F4=
|
integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib "2.0.3"
|
tslib "2.3.0"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user