liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

newStyle
wangxiaohua 2 years ago
parent
b44ab6f7c3
commit
f2f29f0e6b
1 changed files with 409 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +409
    -0
      src/views/Statistics/BuildingContrast.vue

+ 409
- 0
src/views/Statistics/BuildingContrast.vue View File

@@ -0,0 +1,409 @@
<template>
<div class="box-center">
<!-- 头 -->
<div class="app-titel">
<div class="titel-text">
楼盘选择：
<el-select v-model="houseId" placeholder="请选择">
<el-option
v-for="item in buildingoptions"
:key="item.value"
:label="item.propertyName"
:value="item.id">
</el-option>
</el-select>
</div>
<div class="toptimeqhuan">
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
今日
</div>
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
昨日
</div>
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
近一周
</div>
</div>
<div style="margin-left: 26px">
<el-date-picker
v-model="customtime"
@change="confirmtime()"
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="cen-tab">
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="batchId"
label="批次号"
align="center"
>
</el-table-column>
<el-table-column
prop="name"
label="设备号"
align="center"
>
<template slot-scope="scope">
<p>{{scope.row.deviceNoStart}}:{{scope.row.deviceNoEnd}}</p>
</template>
</el-table-column>
<el-table-column
prop="realityEquipmentCount"
label="应收设备数量"
align="center">
</el-table-column>

<el-table-column
prop="receivableEquipmentCount"
label="实收设备数量"
align="center"
>
</el-table-column>
<el-table-column
prop="acceptanceNum"
label="已验收设备数量"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
align="center">
</el-table-column>

<el-table-column
prop="remark"
label="备注"
align="center"
>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div style="color: #2671E2;" @click="clickbianji(scope.row)">修改</div>
</template>
</el-table-column>
</el-table>
<div style="display: flex;justify-content:flex-end;margin-top: 10px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[8, 16, 24, 32]"
:page-size="4"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">接待量（TOP10）</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%;">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 40%;">
<div class="text1-1">顾问</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 25%;">
<div class="text1-1">人均接待量</div>
<div class="text1-2">1</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.avgZxl}}%</div>
</div>
</div>
</div>
<div class="you">
<div class="title">
<div class="text1">销讲执行率（TOP10）</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%;">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 40%;">
<div class="text1-1">顾问</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 25%;">
<div class="text1-1">人均接待量</div>
<div class="text1-2">1</div>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.avgZxl}}%</div>
</div>
</div>
</div>
</div>

</div>
</template>

<script>
export default {
data() {
return {
houseId: "",
buildingoptions:[],
TimetoAhoose: 2,
customtime: [],
currentPage4:1,
total:20,
options: [{
value: '1',
label: '排名'
}, {
value: '2',
label: '趋势'
}],
value:'1',
ceratelist:[
{name:'还是得',avgZxl:80},
{name:'大大奥德赛',avgZxl:90},
{name:'沙发和',avgZxl:20},
{name:'还是得',avgZxl:10},
{name:'还客户家客户是得',avgZxl:80},
],

};
},
mounted() {

},
methods: {
handleCurrentChange(){

},
handleSizeChange(){

},
//切换时间
tabtimetap(index) {
this.TimetoAhoose = index;

},

},
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
}
.cen-tab{
width: 100%;
padding: 15px;
background: #FFFFFF;
margin-top: 15px;
}
.tophove {
color: #ffffff;
background: #2671e2;
}
.app-titel {
width: 100%;
height: 70px;
background: #ffffff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px;
display: flex;
align-items: center;
.titel-text {
height: 100%;
font-size: 18px;
font-weight: 600;
color: #32363d;
line-height: 70px;
margin-left: 30px;
}
.toptimeqhuan {
width: 190px;
height: 32px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
overflow: hidden;
margin-left: 30px;
cursor: pointer;
}
.toptimeqhuan div {
flex: 1;
text-align: center;
line-height: 32px;
font-size: 16px;
}
}

.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;
.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;
color: #333333;
}
.text2{
flex: 1;
height: 55px;
display: flex;
align-items: center;
}
}
}
.you{
height: 100%;
flex: 1;
background: #FFFFFF;
border-radius: 4px;
.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;
color: #333333;
}
.text2{
flex: 1;
height: 55px;
display: flex;
align-items: center;
}
}
}
}

.hejisan{
width: 92%;
margin: 0 auto;
display: flex;
padding-top: 10px;
padding-bottom:10px;
.text1-1{
color: #666666;
}
.text1-2{
color: #333333;
margin-top: 10px;
}
}

// 进度条
.jinbox {
width: 100%;
height: 18px;
line-height: 18px;
display: flex;
font-size: 16px;
color: #2C3542;
margin-top: 10px;
.jinboxtit {
width: 14%;
height: 18px;
padding-right: 6px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.jinbox-box {
width: 75%;
height: 100%;
border-radius: 8px;
background: #F2F2F2;
}
.boxbaifenbi {
height: 100%;
background:#60D7A0;
border-radius: 8px;
}
.boxbaifenbi2 {
height: 100%;
background: #5B8FF9;
}
.jinboxbott {
width: 16%;
text-indent: 50px;
}
}
</style>

Write Preview
Loading…
Cancel
Save