|
@@ -1,5 +1,26 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="box-center"> |
|
|
<div class="box-center"> |
|
|
|
|
|
<div class="app-titel"> |
|
|
|
|
|
<div class="titel-text">时间</div> |
|
|
|
|
|
<div class="toptimeqhuan"> |
|
|
|
|
|
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">近7天</div> |
|
|
|
|
|
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近15天 </div> |
|
|
|
|
|
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> 近30天 </div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style="margin-left: 26px"> |
|
|
|
|
|
<el-date-picker |
|
|
|
|
|
@change="confirmtime()" |
|
|
|
|
|
v-model="customtime" |
|
|
|
|
|
type="daterange" |
|
|
|
|
|
range-separator="-" |
|
|
|
|
|
:default-time="['00:00:00', '23:59:59']" |
|
|
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
|
> |
|
|
|
|
|
</el-date-picker> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<!-- 卡片部分 --> |
|
|
<!-- 卡片部分 --> |
|
|
<div class="page-container"> |
|
|
<div class="page-container"> |
|
|
<div class="pagechen"> |
|
|
<div class="pagechen"> |
|
@@ -7,7 +28,7 @@ |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="span1">5020</div> |
|
|
<div class="span1">5020</div> |
|
|
<div class="span2"> |
|
|
<div class="span2"> |
|
|
<span class="span2-1"> 昨日:288</span> |
|
|
|
|
|
|
|
|
<span class="span2-1"> 环比:288</span> |
|
|
<span class="span2-2">25%</span> |
|
|
<span class="span2-2">25%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -43,7 +64,7 @@ |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="span1">5020</div> |
|
|
<div class="span1">5020</div> |
|
|
<div class="span2"> |
|
|
<div class="span2"> |
|
|
<span class="span2-1"> 昨日:288</span> |
|
|
|
|
|
|
|
|
<span class="span2-1"> 环比:288</span> |
|
|
<span class="span2-2">25%</span> |
|
|
<span class="span2-2">25%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -53,7 +74,7 @@ |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="span1">20</div> |
|
|
<div class="span1">20</div> |
|
|
<div class="span2"> |
|
|
<div class="span2"> |
|
|
<span class="span2-1"> 昨日:288</span> |
|
|
|
|
|
|
|
|
<span class="span2-1"> 环比:288</span> |
|
|
<span class="span2-2">25%</span> |
|
|
<span class="span2-2">25%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -63,7 +84,7 @@ |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="span1">50</div> |
|
|
<div class="span1">50</div> |
|
|
<div class="span2"> |
|
|
<div class="span2"> |
|
|
<span class="span2-1"> 昨日:288</span> |
|
|
|
|
|
|
|
|
<span class="span2-1"> 环比:288</span> |
|
|
<span class="span2-2">25%</span> |
|
|
<span class="span2-2">25%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -73,7 +94,7 @@ |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="pageboxtitle2"> |
|
|
<div class="span1">80</div> |
|
|
<div class="span1">80</div> |
|
|
<div class="span2"> |
|
|
<div class="span2"> |
|
|
<span class="span2-1"> 昨日:288</span> |
|
|
|
|
|
|
|
|
<span class="span2-1"> 环比:288</span> |
|
|
<span class="span2-2">25%</span> |
|
|
<span class="span2-2">25%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -85,41 +106,113 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 列表部分 --> |
|
|
|
|
|
<div class="table-box"> |
|
|
|
|
|
<div class="title">急需充电的工牌</div> |
|
|
|
|
|
<div class="tabbox"> |
|
|
|
|
|
<el-table |
|
|
|
|
|
:header-cell-style="{background:'#F2F4F5'}" |
|
|
|
|
|
:data="tableData" |
|
|
|
|
|
height="300" |
|
|
|
|
|
style="width: 100%"> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="name" |
|
|
|
|
|
label="顾问" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="num" |
|
|
|
|
|
label="电话" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="address" |
|
|
|
|
|
label="状态" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
<div class="app-box-san"> |
|
|
|
|
|
<div class="zuo"> |
|
|
|
|
|
<div class="title"> |
|
|
|
|
|
<div class="text1">违禁提醒</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="tabbox"> |
|
|
|
|
|
<el-table |
|
|
|
|
|
:header-cell-style="{background:'#F2F4F5'}" |
|
|
|
|
|
:data="tableData" |
|
|
|
|
|
height="320" |
|
|
|
|
|
style="width: 100%"> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="name" |
|
|
|
|
|
label="顾问" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="num" |
|
|
|
|
|
label="禁忌执行率" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="address" |
|
|
|
|
|
label="接待时间" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="date" |
|
|
|
|
|
label="操作" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
<template slot-scope=""> |
|
|
|
|
|
<div style="color: #2671E2;">查看</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
</el-table> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="date" |
|
|
|
|
|
label="电量" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
</el-table> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="you"> |
|
|
|
|
|
<div class="title"> |
|
|
|
|
|
<div class="text1" @click="tabclick('1')" :class="{ colostyle: classatec == 1 }">低电工牌</div> |
|
|
|
|
|
<div class="text1" @click="tabclick('2')" :class="{ colostyle: classatec == 2 }">离线工牌</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tabbox" v-if="classatec==1"> |
|
|
|
|
|
<el-table |
|
|
|
|
|
:header-cell-style="{background:'#F2F4F5'}" |
|
|
|
|
|
:data="tableData" |
|
|
|
|
|
height="320" |
|
|
|
|
|
style="width: 100%"> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="name" |
|
|
|
|
|
label="顾问" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="num" |
|
|
|
|
|
label="电话" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="address" |
|
|
|
|
|
label="状态" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="date" |
|
|
|
|
|
label="电量" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
</el-table> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tabbox" v-if="classatec==2"> |
|
|
|
|
|
<el-table |
|
|
|
|
|
:header-cell-style="{background:'#F2F4F5'}" |
|
|
|
|
|
:data="tableData" |
|
|
|
|
|
height="320" |
|
|
|
|
|
style="width: 100%"> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="name" |
|
|
|
|
|
label="顾问" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="num" |
|
|
|
|
|
label="电话" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="address" |
|
|
|
|
|
label="离线时间" |
|
|
|
|
|
align="center"> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
</el-table> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
@@ -128,6 +221,9 @@ export default { |
|
|
name: 'Wel', |
|
|
name: 'Wel', |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
classatec:1, |
|
|
|
|
|
customtime:[], |
|
|
|
|
|
TimetoAhoose:0, |
|
|
tableData: [ |
|
|
tableData: [ |
|
|
{ |
|
|
{ |
|
|
date: '80%', |
|
|
date: '80%', |
|
@@ -211,8 +307,15 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tabclick(i){ |
|
|
|
|
|
this.classatec=i; |
|
|
|
|
|
}, |
|
|
|
|
|
tabtimetap(i){ |
|
|
|
|
|
this.TimetoAhoose=i |
|
|
|
|
|
}, |
|
|
|
|
|
confirmtime() { |
|
|
|
|
|
console.log(this.customtime) |
|
|
|
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
@@ -227,6 +330,7 @@ export default { |
|
|
.page-container{ |
|
|
.page-container{ |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
margin-top: 16px; |
|
|
.pagechen{ |
|
|
.pagechen{ |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
min-width: 223px; |
|
|
min-width: 223px; |
|
@@ -273,6 +377,9 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.colostyle{ |
|
|
|
|
|
color: red; |
|
|
|
|
|
} |
|
|
.table-box{ |
|
|
.table-box{ |
|
|
width:98.8%; |
|
|
width:98.8%; |
|
|
height: 400px; |
|
|
height: 400px; |
|
@@ -287,7 +394,7 @@ export default { |
|
|
text-indent: 30px; |
|
|
text-indent: 30px; |
|
|
font-weight: 500; |
|
|
font-weight: 500; |
|
|
color: #32363D; |
|
|
color: #32363D; |
|
|
border-bottom: 1px solid #E6E6E6; |
|
|
|
|
|
|
|
|
// border-bottom: 1px solid #E6E6E6; |
|
|
} |
|
|
} |
|
|
.tabbox{ |
|
|
.tabbox{ |
|
|
padding-left: 30px; |
|
|
padding-left: 30px; |
|
@@ -301,4 +408,86 @@ export default { |
|
|
margin-bottom: 0; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.app-box-san{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 400px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
margin-top: 15px; |
|
|
|
|
|
.zuo{ |
|
|
|
|
|
// flex: 1; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
margin-right: 15px; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
width: 48.7%; |
|
|
|
|
|
.title{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 55px; |
|
|
|
|
|
// border-bottom: 1px solid #E0E0E0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-content: center; |
|
|
|
|
|
.text1{ |
|
|
|
|
|
flex: 2; |
|
|
|
|
|
line-height: 55px; |
|
|
|
|
|
text-indent: 20px; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.you{ |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
width: 49%; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
.title{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 55px; |
|
|
|
|
|
// border-bottom: 1px solid #E0E0E0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-content: center; |
|
|
|
|
|
.text1{ |
|
|
|
|
|
line-height: 55px; |
|
|
|
|
|
text-indent: 20px; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tophove { |
|
|
|
|
|
color: #ffffff; |
|
|
|
|
|
background: #2671e2; |
|
|
|
|
|
} |
|
|
|
|
|
.app-titel { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
.titel-text { |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
color: #32363d; |
|
|
|
|
|
} |
|
|
|
|
|
.toptimeqhuan { |
|
|
|
|
|
width: 190px; |
|
|
|
|
|
height: 32px; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
margin-left: 20px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
.toptimeqhuan div { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 32px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |