@@ -384,3 +384,23 @@ export function updateManagerPhone(data) { | |||||
data | data | ||||
}) | }) | ||||
} | } | ||||
// 接待记录 | |||||
export function findbypage(query) { | |||||
return request({ | |||||
url: '/autoSR/customer/findbypage', | |||||
method:'get', | |||||
params:query | |||||
}) | |||||
} | |||||
// 常错词列表 | |||||
export function correctFindbypage(query) { | |||||
return request({ | |||||
url: '/autoSR/zk/correct/findByPage', | |||||
method:'get', | |||||
params:query | |||||
}) | |||||
} |
@@ -1,17 +1,21 @@ | |||||
<template> | <template> | ||||
<div class="box-center"> | <div class="box-center"> | ||||
<!-- 头 --> | <!-- 头 --> | ||||
<div class="app-top"> | <div class="app-top"> | ||||
<div class="app-titel"> | |||||
<div class="label" style="color: #32363D;font-weight: 400;font-size: 16px;">楼盘选择:</div> | |||||
<div class="app-titel"> | |||||
<div | |||||
class="label" | |||||
style="color: #32363d; font-weight: 400; font-size: 16px" | |||||
> | |||||
楼盘选择: | |||||
</div> | |||||
<div> | <div> | ||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-select v-model="searchForm.houseId" placeholder="请选择"> | |||||
<el-option | <el-option | ||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
v-for="item in houseList" | |||||
:key="item.id" | |||||
:label="item.propertyName" | |||||
:value="item.id" | |||||
> | > | ||||
</el-option> | </el-option> | ||||
</el-select> | </el-select> | ||||
@@ -20,47 +24,60 @@ | |||||
<div class="app-titel" style="margin-top: 15px"> | <div class="app-titel" style="margin-top: 15px"> | ||||
<div class="label">时间:</div> | <div class="label">时间:</div> | ||||
<div class="toptimeqhuan"> | <div class="toptimeqhuan"> | ||||
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)"> | |||||
全部 | |||||
<div | |||||
:class="{ tophove: searchForm.residueTime == 7 }" | |||||
@click="tabtimetap(7)" | |||||
> | |||||
7天内 | |||||
</div> | </div> | ||||
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> | |||||
<div | |||||
:class="{ tophove: searchForm.residueTime == 15 }" | |||||
@click="tabtimetap(15)" | |||||
> | |||||
15天内 | 15天内 | ||||
</div> | </div> | ||||
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> | |||||
<div | |||||
:class="{ tophove: searchForm.residueTime == 30 }" | |||||
@click="tabtimetap(30)" | |||||
> | |||||
30天内 | 30天内 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div> | <div> | ||||
<el-date-picker | |||||
v-model="value1" | |||||
<el-date-picker | |||||
v-model="time" | |||||
type="daterange" | type="daterange" | ||||
range-separator="至" | |||||
class="div-inp" | |||||
range-separator="-" | |||||
start-placeholder="开始日期" | start-placeholder="开始日期" | ||||
end-placeholder="结束日期"> | |||||
end-placeholder="结束日期" | |||||
> | |||||
</el-date-picker> | </el-date-picker> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="app-titel" style="margin-top: 15px"> | <div class="app-titel" style="margin-top: 15px"> | ||||
<div class="label">客户名称:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
<div class="div-lab"> | |||||
<div class="label">客户名称:</div> | |||||
<el-input class="div-inp" v-model="value"></el-input> | |||||
</div> | </div> | ||||
<div class="label">客户意向:</div> | |||||
<div > | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<div class="div-lab"> | |||||
<div class="label">客户意向:</div> | |||||
<el-select class="div-inp" v-model="value" placeholder="请选择"> | |||||
<el-option | <el-option | ||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
v-for="item in houseList" | |||||
:key="item.id" | |||||
:label="item.propertyName" | |||||
:value="item.id" | |||||
> | > | ||||
</el-option> | </el-option> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
<div class="label">录音类型:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<div class="div-lab"> | |||||
<div class="label">录音类型:</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | <el-option | ||||
v-for="item in options2" | v-for="item in options2" | ||||
:key="item.value" | :key="item.value" | ||||
@@ -70,12 +87,10 @@ | |||||
</el-option> | </el-option> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">置业顾问:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<div class="div-lab"> | |||||
<div class="label">置业顾问:</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | <el-option | ||||
v-for="item in options" | v-for="item in options" | ||||
:key="item.value" | :key="item.value" | ||||
@@ -85,9 +100,10 @@ | |||||
</el-option> | </el-option> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
<div class="label">标注顾问:</div> | |||||
<div > | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<div class="div-lab"> | |||||
<div class="label">标注顾问:</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | <el-option | ||||
v-for="item in options5" | v-for="item in options5" | ||||
:key="item.value" | :key="item.value" | ||||
@@ -97,9 +113,10 @@ | |||||
</el-option> | </el-option> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
<div class="label">接待时长:</div> | |||||
<div > | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<div class="div-lab"> | |||||
<div class="label">接待时长:</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | <el-option | ||||
v-for="item in options3" | v-for="item in options3" | ||||
:key="item.value" | :key="item.value" | ||||
@@ -109,9 +126,10 @@ | |||||
</el-option> | </el-option> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
<div class="label">到访次数:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<div class="div-lab"> | |||||
<div class="label">到访次数:</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | <el-option | ||||
v-for="item in options4" | v-for="item in options4" | ||||
:key="item.value" | :key="item.value" | ||||
@@ -123,6 +141,8 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="app-titel" style="margin-top: 15px"></div> | |||||
<div class="app-titel" style="margin-top: 15px"> | <div class="app-titel" style="margin-top: 15px"> | ||||
<div class="label" style="color: #ffffff">筛选相关:</div> | <div class="label" style="color: #ffffff">筛选相关:</div> | ||||
<div style="margin-left: 20px"> | <div style="margin-left: 20px"> | ||||
@@ -138,84 +158,48 @@ | |||||
<!-- 表格 --> | <!-- 表格 --> | ||||
<div class="cen-tab"> | <div class="cen-tab"> | ||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
prop="date" | |||||
label="接待开始时间" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="顾问" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="客户" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table :data="tableData" stripe height="400" style="width: 100%"> | |||||
<el-table-column prop="date" label="接待开始时间" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="name" 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-column | |||||
prop="name" | |||||
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-column prop="name" 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-column | |||||
prop="name" | |||||
label="执行率" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="禁忌执行率" | |||||
align="center"> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;">查看</div> | |||||
<div style="color: #2671E2;">下载文本</div> | |||||
<div style="color: #2671E2;">下载录音</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="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
<el-table-column prop="date" label="客户意向" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="name" label="执行率" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="address" label="禁忌执行率" align="center"> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671e2">查看</div> | |||||
<div style="color: #2671e2">下载文本</div> | |||||
<div style="color: #2671e2">下载录音</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="currentPage" | |||||
:page-sizes="[10, 20, 30, 40]" | |||||
:page-size="10" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="total" | |||||
> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -225,21 +209,10 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
TimetoAhoose: 2, | TimetoAhoose: 2, | ||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "全部", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "服务器内", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "已失效", | |||||
}, | |||||
], | |||||
options2: [ | |||||
time: [], | |||||
houseList: [], | |||||
options: [], | |||||
options2: [ | |||||
{ | { | ||||
value: "1", | value: "1", | ||||
label: "有效录音", | label: "有效录音", | ||||
@@ -249,7 +222,7 @@ export default { | |||||
label: "无效录音", | label: "无效录音", | ||||
}, | }, | ||||
], | ], | ||||
options3: [ | |||||
options3: [ | |||||
{ | { | ||||
value: "1", | value: "1", | ||||
label: "0-15分钟", | label: "0-15分钟", | ||||
@@ -303,56 +276,71 @@ export default { | |||||
label: "全部", | label: "全部", | ||||
}, | }, | ||||
], | ], | ||||
currentPage4:4, | |||||
currentPage: 1, | |||||
size: "", | |||||
total: 10, | |||||
value: "", | value: "", | ||||
input: "", | input: "", | ||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
tableData: [], | |||||
tophove: "", | |||||
searchForm: { | |||||
corporateName: "", | |||||
propertyName: "", | |||||
serviceStatus: "", | |||||
houseType: "", | |||||
residueTime: 7, | |||||
startWorking: "", | |||||
endWorking: "", | |||||
agentName: "", | |||||
operationalPeople: "", | |||||
}, | |||||
}; | }; | ||||
}, | }, | ||||
mounted() {}, | |||||
mounted() { | |||||
// 获取楼盘列表 | |||||
this.zkhousePage(); | |||||
// 获取接待记录列表 | |||||
this.findbypage(); | |||||
}, | |||||
methods: { | methods: { | ||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
// 接待记录列表 | |||||
findbypage() { | |||||
let obj = { | |||||
current: this.currentPage, | |||||
size: this.size, | |||||
...this.searchForm, | |||||
}; | |||||
this.$api.api.findbypage(obj).then((res) => { | |||||
// console.log(res) | |||||
this.tableData = res.data.records; | |||||
this.total = res.data.total; | |||||
}); | |||||
}, | |||||
zkhousePage() { | |||||
let obj = { | |||||
current: 1, | |||||
size: 999, | |||||
}; | |||||
this.$api.api.zkhousePage(obj).then((res) => { | |||||
// console.log(res) | |||||
this.houseList = res.data.records; | |||||
this.searchForm.houseId = res.data.records[0].id; | |||||
}); | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
this.size = val; | |||||
this.findbypage(); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
his.currentPage = val; | |||||
this.findbypage(); | |||||
}, | |||||
tabtimetap(idx) { | |||||
this.searchForm.residueTime = idx; | |||||
}, | |||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
@@ -364,10 +352,10 @@ export default { | |||||
min-width: 1200px; | min-width: 1200px; | ||||
padding-bottom: 100px; | padding-bottom: 100px; | ||||
} | } | ||||
.cen-tab{ | |||||
.cen-tab { | |||||
width: 100%; | width: 100%; | ||||
padding: 15px; | padding: 15px; | ||||
background: #FFFFFF; | |||||
background: #ffffff; | |||||
margin-top: 15px; | margin-top: 15px; | ||||
} | } | ||||
.tophove { | .tophove { | ||||
@@ -385,12 +373,14 @@ export default { | |||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
flex-wrap: wrap; | |||||
.label { | .label { | ||||
font-size: 14px; | font-size: 14px; | ||||
font-weight: 400; | font-weight: 400; | ||||
color: #32363d; | color: #32363d; | ||||
line-height: 14px; | |||||
line-height: 32px; | |||||
margin-left: 15px; | margin-left: 15px; | ||||
min-width: 100px; | |||||
} | } | ||||
.toptimeqhuan { | .toptimeqhuan { | ||||
height: 30px; | height: 30px; | ||||
@@ -410,4 +400,11 @@ export default { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.div-lab { | |||||
display: flex; | |||||
margin: 5px; | |||||
} | |||||
.div-inp { | |||||
width: 250px; | |||||
} | |||||
</style> | </style> |
@@ -1,33 +1,40 @@ | |||||
<template> | <template> | ||||
<div class="box-center"> | <div class="box-center"> | ||||
<!-- 头 --> | |||||
<!-- 头 --> | |||||
<div class="app-top"> | <div class="app-top"> | ||||
<div class="app-titel"> | |||||
<div class="app-titel"> | |||||
<div class="titel-text">楼盘选择:</div> | <div class="titel-text">楼盘选择:</div> | ||||
<div style="margin-left: 26px"> | <div style="margin-left: 26px"> | ||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | <el-option | ||||
v-for="item in options" | v-for="item in options" | ||||
:key="item.value" | :key="item.value" | ||||
:label="item.label" | :label="item.label" | ||||
:value="item.value"> | |||||
:value="item.value" | |||||
> | |||||
</el-option> | </el-option> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="app-titel" style="margin-top: 10px;"> | |||||
<div class="app-titel" style="margin-top: 10px"> | |||||
<div class="titel-text">接待时间</div> | <div class="titel-text">接待时间</div> | ||||
<div class="toptimeqhuan"> | <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 :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)"> | |||||
近7天 | |||||
</div> | |||||
<div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)"> | |||||
近15天 | |||||
</div> | |||||
<div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)"> | |||||
近30天 | |||||
</div> | |||||
</div> | </div> | ||||
<div style="margin-left: 26px"> | <div style="margin-left: 26px"> | ||||
<el-date-picker | <el-date-picker | ||||
@change="confirmtime()" | @change="confirmtime()" | ||||
v-model="customtime" | v-model="customtime" | ||||
type="daterange" | type="daterange" | ||||
range-separator="至" | |||||
range-separator="-" | |||||
start-placeholder="开始日期" | start-placeholder="开始日期" | ||||
end-placeholder="结束日期" | end-placeholder="结束日期" | ||||
> | > | ||||
@@ -37,127 +44,136 @@ | |||||
<el-checkbox v-model="checked">对比时间段</el-checkbox> | <el-checkbox v-model="checked">对比时间段</el-checkbox> | ||||
</div> | </div> | ||||
<div style="margin-left: 26px"> | <div style="margin-left: 26px"> | ||||
<div v-if="checked"> | |||||
<div class="demonstration timeSel" @click="show"> | |||||
{{ selectTime1 ? "时段二: " : "请选择: " | |||||
}}<span v-if="selectTime1">{{ | |||||
selectTime + "-" + selectTime1 | |||||
}}</span> | |||||
</div> | |||||
<el-date-picker | <el-date-picker | ||||
v-model="value1" | |||||
style="opacity: 0" | |||||
v-model="time" | |||||
@change="timeChange" | |||||
ref="time" | |||||
type="date" | type="date" | ||||
validate-event='false' | |||||
editable='true' | |||||
placeholder="选择日期"> | |||||
placeholder="选择日期" | |||||
format="yyyy-MM-dd" | |||||
value-format="yyyy-MM-dd" | |||||
> | |||||
</el-date-picker> | </el-date-picker> | ||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- //卡片 --> | <!-- //卡片 --> | ||||
<div class="kapian-box"> | <div class="kapian-box"> | ||||
<div class="kayi"> | |||||
<div class="shang"> | |||||
<div class="zuo"> | |||||
<div class="text1">接待量</div> | |||||
<div class="text2">2</div> | |||||
</div> | |||||
<div class="you"> | |||||
<img class="youimg" src="/img/waves1.png" alt=""> | |||||
</div> | |||||
<div class="kayi"> | |||||
<div class="shang"> | |||||
<div class="zuo"> | |||||
<div class="text1">接待量</div> | |||||
<div class="text2">2</div> | |||||
</div> | </div> | ||||
<div class="xia"> | |||||
<span class="span1">对比:78</span> | |||||
<span class="span2">50%</span> | |||||
<div class="you"> | |||||
<img class="youimg" src="/img/waves1.png" alt="" /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="kayi"> | |||||
<div class="shang"> | |||||
<div class="zuo"> | |||||
<div class="text1">录音时长</div> | |||||
<div class="text2">2</div> | |||||
</div> | |||||
<div class="you"> | |||||
<img class="youimg" src="/img/waves2.png" alt=""> | |||||
</div> | |||||
<div class="xia"> | |||||
<span class="span1">对比:78</span> | |||||
<span class="span2">50%</span> | |||||
</div> | |||||
</div> | |||||
<div class="kayi"> | |||||
<div class="shang"> | |||||
<div class="zuo"> | |||||
<div class="text1">录音时长</div> | |||||
<div class="text2">2</div> | |||||
</div> | </div> | ||||
<div class="xia"> | |||||
<span class="span1">对比:78</span> | |||||
<span class="span2">50%</span> | |||||
<div class="you"> | |||||
<img class="youimg" src="/img/waves2.png" alt="" /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="kayi" style="margin:0px;"> | |||||
<div class="shang"> | |||||
<div class="zuo"> | |||||
<div class="text1">平均执行率</div> | |||||
<div class="text2">2</div> | |||||
</div> | |||||
<div class="you"> | |||||
<img class="youimg" src="/img/waves3.png" alt=""> | |||||
</div> | |||||
<div class="xia"> | |||||
<span class="span1">对比:78</span> | |||||
<span class="span2">50%</span> | |||||
</div> | |||||
</div> | |||||
<div class="kayi" style="margin: 0px"> | |||||
<div class="shang"> | |||||
<div class="zuo"> | |||||
<div class="text1">平均执行率</div> | |||||
<div class="text2">2</div> | |||||
</div> | </div> | ||||
<div class="xia"> | |||||
<span class="span1">对比:78</span> | |||||
<span class="span2">50%</span> | |||||
<div class="you"> | |||||
<img class="youimg" src="/img/waves3.png" alt="" /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="xia"> | |||||
<span class="span1">对比:78</span> | |||||
<span class="span2">50%</span> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
<!-- 图表 --> | <!-- 图表 --> | ||||
<div class="app-box-er"> | <div class="app-box-er"> | ||||
<div class="titletab"> | <div class="titletab"> | ||||
<div :class="{claindex: aliasclass==1}">项目</div> | |||||
<div :class="{claindex: aliasclass==2}">团队</div> | |||||
<div :class="{claindex: aliasclass==3}">顾问</div> | |||||
<div :class="{claindex: aliasclass==4}">销讲一级</div> | |||||
<div :class="{claindex: aliasclass==5}">销讲二级</div> | |||||
<div :class="{ claindex: aliasclass == 1 }">项目</div> | |||||
<div :class="{ claindex: aliasclass == 2 }">团队</div> | |||||
<div :class="{ claindex: aliasclass == 3 }">顾问</div> | |||||
<div :class="{ claindex: aliasclass == 4 }">销讲一级</div> | |||||
<div :class="{ claindex: aliasclass == 5 }">销讲二级</div> | |||||
</div> | </div> | ||||
<div style="display: flex;justify-content: center;align-items: center;margin-top: 26px;"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
<el-select v-model="value" placeholder="请选择" style="margin-left: 15px;"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
<div | |||||
style=" | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
margin-top: 26px; | |||||
" | |||||
> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
<el-select | |||||
v-model="value" | |||||
placeholder="请选择" | |||||
style="margin-left: 15px" | |||||
> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | </div> | ||||
<div id="main"></div> | <div id="main"></div> | ||||
</div> | </div> | ||||
<!-- 表格 --> | <!-- 表格 --> | ||||
<div class="app-box-san"> | |||||
<div class="santitle">对比报表</div> | |||||
<div class="santab"> | |||||
<el-table | |||||
:data="tableData" | |||||
height="400" | |||||
border | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
prop="date" | |||||
label="时间" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="时段1" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="时段2" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="变化" | |||||
align="center"> | |||||
</el-table-column> | |||||
</el-table> | |||||
</div> | |||||
</div> | |||||
<div class="app-box-san"> | |||||
<div class="santitle">对比报表</div> | |||||
<div class="santab"> | |||||
<el-table :data="tableData" height="400" border style="width: 100%"> | |||||
<el-table-column prop="date" label="时间" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="name" label="时段1" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="address" label="时段2" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="address" label="变化" align="center"> | |||||
</el-table-column> | |||||
</el-table> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -166,131 +182,276 @@ import * as echarts from "echarts"; | |||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
customtime: "", | |||||
TimetoAhoose: 2, | |||||
aliasclass:1, | |||||
customtime: "", | |||||
timeType: 4, | |||||
time: '', | |||||
customtime: [], | |||||
page: { | |||||
pageNum: 1, | |||||
pageSize: 6, | |||||
openTime: "", | |||||
closeTime: "", | |||||
houseName: "", | |||||
accountName: "", | |||||
imei: "", | |||||
total: "", | |||||
recording: "", | |||||
}, | |||||
selectTime1: "", | |||||
selectTime: "", | |||||
aliasclass: 1, | |||||
fromobj: { | fromobj: { | ||||
starttime: "", | starttime: "", | ||||
endoftime: "", | endoftime: "", | ||||
}, | }, | ||||
houseId: "", | houseId: "", | ||||
options: [{ | |||||
value: '选项1', | |||||
label: '黄金糕' | |||||
}, { | |||||
value: '选项2', | |||||
label: '双皮奶' | |||||
}], | |||||
value: '', | |||||
checked:false, | |||||
value1:'99999999999999', | |||||
tableData: [{ | |||||
date: '2016-05-03', | |||||
name: '王小虎', | |||||
address: '上海市普陀区金沙江路 1518 弄' | |||||
}, { | |||||
date: '2016-05-02', | |||||
name: '王小虎', | |||||
address: '上海市普陀区金沙江路 1518 弄' | |||||
}, { | |||||
date: '2016-05-04', | |||||
name: '王小虎', | |||||
address: '上海市普陀区金沙江路 1518 弄' | |||||
}, { | |||||
date: '2016-05-01', | |||||
name: '王小虎', | |||||
address: '上海市普陀区金沙江路 1518 弄' | |||||
}, { | |||||
date: '2016-05-08', | |||||
name: '王小虎', | |||||
address: '上海市普陀区金沙江路 1518 弄' | |||||
}, { | |||||
date: '2016-05-06', | |||||
name: '王小虎', | |||||
address: '上海市普陀区金沙江路 1518 弄' | |||||
}, { | |||||
date: '2016-05-07', | |||||
name: '王小虎', | |||||
address: '上海市普陀区金沙江路 1518 弄' | |||||
}] | |||||
options: [ | |||||
{ | |||||
value: "选项1", | |||||
label: "黄金糕", | |||||
}, | |||||
{ | |||||
value: "选项2", | |||||
label: "双皮奶", | |||||
}, | |||||
], | |||||
value: "", | |||||
checked: false, | |||||
value1: "99999999999999", | |||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: "上海市普陀区金沙江路 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: "上海市普陀区金沙江路 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: "上海市普陀区金沙江路 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: "上海市普陀区金沙江路 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: "上海市普陀区金沙江路 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: "上海市普陀区金沙江路 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: "上海市普陀区金沙江路 1518 弄", | |||||
}, | |||||
], | |||||
}; | }; | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.SwitchCARDS() | |||||
this.SwitchCARDS(); | |||||
}, | }, | ||||
methods: { | methods: { | ||||
SwitchCARDS(){ | |||||
var chartDom = document.getElementById('main'); | |||||
tabtimetap(i) { | |||||
this.timeType = i; | |||||
// this.getTableList() | |||||
this.checked = false; | |||||
this.selectTime = ""; | |||||
this.selectTime1 = ""; | |||||
//给时间选择器赋值 | |||||
let num = 24 * 3600 * 1000; | |||||
// 获取当前时间戳转换为日期格式 | |||||
if (this.timeType == 4) { | |||||
num = 24 * 3600 * 1000 * 6; | |||||
} | |||||
if (this.timeType == 5) { | |||||
num = 24 * 3600 * 1000 * 14; | |||||
} | |||||
if (this.timeType == 6) { | |||||
num = 24 * 3600 * 1000 * 29; | |||||
} | |||||
this.customtime = [ | |||||
this.timestampToTime(new Date().getTime() - num), | |||||
this.timestampToTime(new Date().getTime()), | |||||
]; | |||||
console.log(this.customtime); | |||||
// this.$refs.time.valueIsEmpty=true | |||||
console.log(this.$refs.time); | |||||
// this.getTableList(); | |||||
// this.getdetail(); | |||||
}, | |||||
show() { | |||||
this.$refs.time.pickerVisible = true; | |||||
}, | |||||
timeChange(e) { | |||||
// console.log(e) | |||||
// this.selectTime=e | |||||
// 对数据进行处理 | |||||
// 当当前选择的为自定义时间时 | |||||
this.selectTime = ""; | |||||
this.selectTime1 = ""; | |||||
this.timeSelect(e); | |||||
// this.getdetail(); | |||||
// this.getcompare(); | |||||
}, | |||||
timeSelect(e) { | |||||
console.log(this.$refs.time); | |||||
if (this.timeType == -1) { | |||||
// 将两者的时间戳相减,然后在在选择的自定义时间的时间戳想加 | |||||
// console.log(e,this.page.openTime,this.page.closeTime) | |||||
// console.log(new Date(e).getTime(),new Date(this.page.openTime).getTime(),new Date(this.page.closeTime).getTime(),'时间戳') | |||||
// console.log(this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime())) | |||||
this.selectTime = e; | |||||
this.selectTime1 = this.timestampToTime( | |||||
new Date(e).getTime() + | |||||
new Date(this.page.closeTime).getTime() - | |||||
new Date(this.page.openTime).getTime() | |||||
); | |||||
} else { | |||||
// 获取今天昨天近一周 | |||||
// 获取一天的时间戳 | |||||
let num = 24 * 3600 * 1000; | |||||
// 获取当前时间戳转换为日期格式 | |||||
if (this.timeType == 4) { | |||||
num = 24 * 3600 * 1000 * 6; | |||||
} | |||||
if (this.timeType == 5) { | |||||
num = 24 * 3600 * 1000 * 14; | |||||
} | |||||
if (this.timeType == 6) { | |||||
num = 24 * 3600 * 1000 * 29; | |||||
} | |||||
// console.log(-this.timeType*num) | |||||
// this.selectTime=this.timestampToTime(new Date().getTime()-this.timeType*num) | |||||
this.selectTime = e; | |||||
this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num); | |||||
} | |||||
}, | |||||
confirmtime() { | |||||
this.timeType = "-1"; | |||||
// if(this.customtime==''){ }else{ | |||||
// const d = new Date(this.customtime[0]) | |||||
// this.page.openTime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate()) | |||||
// const c = new Date(this.customtime[1]) | |||||
// this.page.closeTime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate()) | |||||
// } | |||||
this.checked = false; | |||||
this.selectTime = ""; | |||||
this.selectTime1 = ""; | |||||
this.page.openTime = this.customtime[0]; | |||||
this.page.closeTime = this.customtime[1]; | |||||
// this.getTableList() | |||||
// this.getdetail() | |||||
}, | |||||
timestampToTime(timestamp) { | |||||
var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 | |||||
// var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 | |||||
var yyyy = date.getFullYear() + '-'; | |||||
var MM = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; | |||||
// var dd = date.getDate() + ' '; | |||||
var dd = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' '; | |||||
// var HH = date.getHours() + ':'; | |||||
// var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':'; | |||||
// | |||||
// // var mm = date.getMinutes() + ':'; | |||||
// var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':'; | |||||
// | |||||
// // var ss = date.getSeconds(); | |||||
// var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds()); | |||||
// return yyyy+MM+dd+HH+mm+ss; | |||||
return yyyy+MM+dd; | |||||
}, | |||||
SwitchCARDS() { | |||||
var chartDom = document.getElementById("main"); | |||||
var myChart = echarts.init(chartDom); | var myChart = echarts.init(chartDom); | ||||
var option; | var option; | ||||
option = { | option = { | ||||
tooltip: { | |||||
trigger: 'axis' | |||||
}, | |||||
legend: { | |||||
data: ['来访人数/个'], | |||||
bottom: '10', | |||||
}, | |||||
grid: { | |||||
left: 10, | |||||
right: 10, | |||||
tooltip: { | |||||
trigger: "axis", | |||||
}, | |||||
legend: { | |||||
data: ["来访人数/个"], | |||||
bottom: "10", | |||||
}, | |||||
grid: { | |||||
left: 10, | |||||
right: 10, | |||||
containLabel: true, | |||||
containLabel: true, | |||||
}, | |||||
xAxis: { | |||||
type: "category", | |||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], | |||||
axisLabel: { | |||||
//重点在这一块,其余可以忽略 | |||||
textStyle: { | |||||
color: "#212121", //更改坐标轴文字颜色 | |||||
}, | |||||
}, | }, | ||||
xAxis: { | |||||
type: 'category', | |||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |||||
axisLabel: { //重点在这一块,其余可以忽略 | |||||
textStyle: { | |||||
color: '#212121', //更改坐标轴文字颜色 | |||||
} | |||||
}, | |||||
axisLine: { | |||||
lineStyle: { | |||||
type: 'solid', | |||||
color: '#DDE1EE',//x线的颜色 | |||||
width:'1'//坐标线的宽度 | |||||
} | |||||
} | |||||
axisLine: { | |||||
lineStyle: { | |||||
type: "solid", | |||||
color: "#DDE1EE", //x线的颜色 | |||||
width: "1", //坐标线的宽度 | |||||
}, | |||||
}, | }, | ||||
yAxis: { | |||||
type: 'value', | |||||
splitNumber:4, | |||||
axisLabel: { //重点在这一块,其余可以忽略 | |||||
textStyle: { | |||||
color: '#212121', //更改坐标轴文字颜色 | |||||
} | |||||
}, | |||||
axisLine: { | |||||
lineStyle: { | |||||
ype: 'solid', | |||||
color: '#DDE1EE',//x线的颜色 | |||||
width:'1'//坐标线的宽度 | |||||
} | |||||
}, | |||||
splitLine: { | |||||
lineStyle: { | |||||
type: 'dashed' // y轴分割线类型 | |||||
} | |||||
}, | |||||
axisTick: { //y轴刻度线 | |||||
show: false | |||||
}, | |||||
}, | |||||
yAxis: { | |||||
type: "value", | |||||
splitNumber: 4, | |||||
axisLabel: { | |||||
//重点在这一块,其余可以忽略 | |||||
textStyle: { | |||||
color: "#212121", //更改坐标轴文字颜色 | |||||
}, | |||||
}, | }, | ||||
series: [{ | |||||
name:'来访人数/个', | |||||
data: [820, 932, 901, 934, 1290, 1330, 1320,], | |||||
type: 'line', | |||||
smooth: true, | |||||
}] | |||||
axisLine: { | |||||
lineStyle: { | |||||
ype: "solid", | |||||
color: "#DDE1EE", //x线的颜色 | |||||
width: "1", //坐标线的宽度 | |||||
}, | |||||
}, | |||||
splitLine: { | |||||
lineStyle: { | |||||
type: "dashed", // y轴分割线类型 | |||||
}, | |||||
}, | |||||
axisTick: { | |||||
//y轴刻度线 | |||||
show: false, | |||||
}, | |||||
}, | |||||
series: [ | |||||
{ | |||||
name: "来访人数/个", | |||||
data: [820, 932, 901, 934, 1290, 1330, 1320], | |||||
type: "line", | |||||
smooth: true, | |||||
}, | |||||
], | |||||
}; | }; | ||||
option && myChart.setOption(option); | option && myChart.setOption(option); | ||||
window.addEventListener("resize", () => { myChart.resize();}); | |||||
window.addEventListener("resize", () => { | |||||
myChart.resize(); | |||||
}); | |||||
}, | }, | ||||
}, | }, | ||||
}; | }; | ||||
@@ -304,119 +465,118 @@ export default { | |||||
padding-bottom: 100px; | padding-bottom: 100px; | ||||
} | } | ||||
#main{ | |||||
#main { | |||||
width: 100%; | width: 100%; | ||||
height: 380px; | height: 380px; | ||||
} | } | ||||
.app-box-san{ | |||||
.app-box-san { | |||||
width: 100%; | width: 100%; | ||||
background: #FFFFFF; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | ||||
border-radius: 4px; | border-radius: 4px; | ||||
margin-top: 15px; | margin-top: 15px; | ||||
padding-bottom: 15px; | padding-bottom: 15px; | ||||
.santitle{ | |||||
.santitle { | |||||
width: 100%; | width: 100%; | ||||
height: 50px; | height: 50px; | ||||
line-height: 50px; | line-height: 50px; | ||||
border-bottom: 1px solid #E0E0E0; | |||||
border-bottom: 1px solid #e0e0e0; | |||||
font-size: 16px; | font-size: 16px; | ||||
color: #333333; | color: #333333; | ||||
font-weight: 500; | font-weight: 500; | ||||
text-indent: 15px; | text-indent: 15px; | ||||
} | } | ||||
.santab{ | |||||
.santab { | |||||
width: 100%; | width: 100%; | ||||
height: 400px; | height: 400px; | ||||
padding: 15px; | padding: 15px; | ||||
} | } | ||||
} | } | ||||
.app-box-er{ | |||||
.app-box-er { | |||||
width: 100%; | width: 100%; | ||||
background: #FFFFFF; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | ||||
border-radius: 4px; | border-radius: 4px; | ||||
margin-top: 15px; | margin-top: 15px; | ||||
padding: 15px; | padding: 15px; | ||||
.titletab{ | |||||
.titletab { | |||||
width: 100%; | width: 100%; | ||||
height: 42px; | height: 42px; | ||||
display: flex; | display: flex; | ||||
// border: 1px solid red; | // border: 1px solid red; | ||||
} | } | ||||
.titletab div{ | |||||
.titletab div { | |||||
width: 130px; | width: 130px; | ||||
height: 42px; | height: 42px; | ||||
line-height: 42px; | line-height: 42px; | ||||
text-align: center; | text-align: center; | ||||
border: 1px solid #E0E0E0; | |||||
border: 1px solid #e0e0e0; | |||||
font-size: 14px; | font-size: 14px; | ||||
} | } | ||||
.claindex{ | |||||
background: #2671E2; | |||||
color: #FFFFFF; | |||||
.claindex { | |||||
background: #2671e2; | |||||
color: #ffffff; | |||||
border: none; | border: none; | ||||
} | } | ||||
} | } | ||||
.kapian-box{ | |||||
.kapian-box { | |||||
width: 100%; | width: 100%; | ||||
height: 144px; | height: 144px; | ||||
margin-top: 15px; | margin-top: 15px; | ||||
display: flex; | display: flex; | ||||
.kayi{ | |||||
flex: 1; | |||||
margin-right: 15px; | |||||
height: 144px; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
.shang{ | |||||
width: 100%; | |||||
display: flex; | |||||
.zuo{ | |||||
flex: 1; | |||||
.text1{ | |||||
font-size: 16px; | |||||
font-weight: 400; | |||||
color: #666666; | |||||
margin-left: 30px; | |||||
margin-top: 24px; | |||||
} | |||||
.text2{ | |||||
font-size: 32px; | |||||
font-weight: normal; | |||||
color: #32363D; | |||||
margin-left: 30px; | |||||
margin-top: 18px; | |||||
} | |||||
} | |||||
.you{ | |||||
flex: 2; | |||||
.kayi { | |||||
flex: 1; | |||||
margin-right: 15px; | |||||
height: 144px; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
.shang { | |||||
width: 100%; | |||||
display: flex; | |||||
.zuo { | |||||
flex: 1; | |||||
.text1 { | |||||
font-size: 16px; | |||||
font-weight: 400; | |||||
color: #666666; | |||||
margin-left: 30px; | |||||
margin-top: 24px; | |||||
} | |||||
.text2 { | |||||
font-size: 32px; | |||||
font-weight: normal; | |||||
color: #32363d; | |||||
margin-left: 30px; | |||||
margin-top: 18px; | |||||
} | |||||
} | |||||
.you { | |||||
flex: 2; | |||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
.youimg{ | |||||
width: 90%; | |||||
height: 60px; | |||||
} | |||||
} | |||||
} | |||||
.xia{ | |||||
width: 100%; | |||||
font-size: 14px; | |||||
text-indent: 30px; | |||||
margin-top: 10px; | |||||
.span1{ | |||||
color: #333333; | |||||
font-weight: 400; | |||||
} | |||||
.span2{ | |||||
color: #E6273A; | |||||
font-weight: 400; | |||||
margin-left: 16px; | |||||
} | |||||
} | |||||
.youimg { | |||||
width: 90%; | |||||
height: 60px; | |||||
} | |||||
} | |||||
} | |||||
.xia { | |||||
width: 100%; | |||||
font-size: 14px; | |||||
text-indent: 30px; | |||||
margin-top: 10px; | |||||
.span1 { | |||||
color: #333333; | |||||
font-weight: 400; | |||||
} | |||||
.span2 { | |||||
color: #e6273a; | |||||
font-weight: 400; | |||||
margin-left: 16px; | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
@@ -424,7 +584,7 @@ export default { | |||||
color: #ffffff; | color: #ffffff; | ||||
background: #2671e2; | background: #2671e2; | ||||
} | } | ||||
.app-top{ | |||||
.app-top { | |||||
width: 100%; | width: 100%; | ||||
background: #ffffff; | background: #ffffff; | ||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | ||||
@@ -462,4 +622,12 @@ export default { | |||||
font-size: 14px; | font-size: 14px; | ||||
} | } | ||||
} | } | ||||
.timeSel { | |||||
margin-top: 8px; | |||||
margin-left: 20px; | |||||
border: 1px solid #ccc; | |||||
padding: 0 5px; | |||||
cursor: pointer; | |||||
color: #606266; | |||||
} | |||||
</style> | </style> |
@@ -1,16 +1,15 @@ | |||||
<template> | <template> | ||||
<div class="box-center"> | <div class="box-center"> | ||||
<!-- 头 --> | <!-- 头 --> | ||||
<div class="app-top"> | <div class="app-top"> | ||||
<div class="app-titel" style="margin-top: 5px"> | <div class="app-titel" style="margin-top: 5px"> | ||||
<div class="label">正确词:</div> | <div class="label">正确词:</div> | ||||
<div> | <div> | ||||
<el-input v-model="value"></el-input> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | </div> | ||||
<div class="label">错误词:</div> | <div class="label">错误词:</div> | ||||
<div> | <div> | ||||
<el-input v-model="value"></el-input> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | </div> | ||||
<div style="margin-left: 20px"> | <div style="margin-left: 20px"> | ||||
<el-button style="background: #2671e2; color: #ffffff" | <el-button style="background: #2671e2; color: #ffffff" | ||||
@@ -20,8 +19,10 @@ | |||||
<div style="margin-left: 20px"> | <div style="margin-left: 20px"> | ||||
<el-button>清空筛选条件</el-button> | <el-button>清空筛选条件</el-button> | ||||
</div> | </div> | ||||
<div style="margin-left: 20px"> | |||||
<el-button @click="editorinfo()" style="background: #2671e2; color: #ffffff" | |||||
<div style="margin-left: 20px"> | |||||
<el-button | |||||
@click="editorinfo()" | |||||
style="background: #2671e2; color: #ffffff" | |||||
>新增</el-button | >新增</el-button | ||||
> | > | ||||
</div> | </div> | ||||
@@ -30,79 +31,63 @@ | |||||
<!-- 表格 --> | <!-- 表格 --> | ||||
<div class="cen-tab"> | <div class="cen-tab"> | ||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
prop="date" | |||||
label="公司" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="正确词" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="错误词" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table :data="tableData" stripe height="400" style="width: 100%"> | |||||
<el-table-column prop="date" label="公司" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="name" 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-column prop="date" label="创建时间" align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="备注" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;">修改</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="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
<el-table-column prop="date" label="备注" align="center"> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671e2">修改</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="currentPage" | |||||
:page-sizes="[10, 20, 30, 40]" | |||||
:page-size="10" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="total" | |||||
> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | </div> | ||||
<el-dialog title="绑定" :visible.sync="dialogVisible" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="正确词" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="错误词" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="描述:" prop="areaName"> | |||||
<el-input type="textarea" v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-dialog title="绑定" :visible.sync="dialogVisible"> | |||||
<el-form | |||||
:model="ruleForm" | |||||
label-position="labelPosition" | |||||
ref="ruleForm" | |||||
label-width="140px" | |||||
style="width: 60%; margin: 0 auto" | |||||
> | |||||
<el-form-item label="正确词" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="错误词" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="描述:" prop="areaName"> | |||||
<el-input type="textarea" v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | </el-form> | ||||
<div slot="footer" class="dialog-footer"> | <div slot="footer" class="dialog-footer"> | ||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="editor()">保存</el-button> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="editor()">保存</el-button> | |||||
</div> | </div> | ||||
</el-dialog> | |||||
</el-dialog> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -110,71 +95,56 @@ | |||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
currentPage4:4, | |||||
currentPage: 4, | |||||
value: "", | value: "", | ||||
input: "", | input: "", | ||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
multipleSelection:[], | |||||
dialogVisible:false, | |||||
ruleForm:{ | |||||
areaName:'', | |||||
provinceItem:[], | |||||
}, | |||||
tableData: [], | |||||
multipleSelection: [], | |||||
dialogVisible: false, | |||||
ruleForm: { | |||||
areaName: "", | |||||
provinceItem: [], | |||||
}, | |||||
searchForm:{}, | |||||
currentPage: 1, | |||||
size: "", | |||||
total: 10, | |||||
}; | }; | ||||
}, | }, | ||||
mounted() {}, | |||||
mounted() { | |||||
// 列表获取 | |||||
this.correctFindbypage() | |||||
}, | |||||
methods: { | methods: { | ||||
editorinfo(){ | |||||
this.dialogVisible=true; | |||||
// 获取常错词列表 | |||||
correctFindbypage() { | |||||
let obj = { | |||||
current: this.currentPage, | |||||
size: this.size, | |||||
...this.searchForm, | |||||
}; | |||||
this.$api.api.correctFindbypage(obj).then((res) => { | |||||
console.log(res); | |||||
this.tableData = res.data.records; | |||||
this.total = res.data.total; | |||||
}); | |||||
}, | }, | ||||
editor(){ | |||||
this.dialogVisible=false; | |||||
editorinfo() { | |||||
this.dialogVisible = true; | |||||
}, | |||||
editor() { | |||||
this.dialogVisible = false; | |||||
}, | |||||
handleSelectionChange(val) { | |||||
this.multipleSelection = val; | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
}, | }, | ||||
handleSelectionChange(val) { | |||||
this.multipleSelection = val; | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
@@ -186,10 +156,10 @@ export default { | |||||
min-width: 1200px; | min-width: 1200px; | ||||
padding-bottom: 100px; | padding-bottom: 100px; | ||||
} | } | ||||
.cen-tab{ | |||||
.cen-tab { | |||||
width: 100%; | width: 100%; | ||||
padding: 15px; | padding: 15px; | ||||
background: #FFFFFF; | |||||
background: #ffffff; | |||||
margin-top: 15px; | margin-top: 15px; | ||||
} | } | ||||
.tophove { | .tophove { | ||||
@@ -419,19 +419,19 @@ export default { | |||||
lazy: true, | lazy: true, | ||||
async lazyLoad(node, resolve) { | async lazyLoad(node, resolve) { | ||||
const { level } = node; | const { level } = node; | ||||
// if (level == 0) { | |||||
// console.log(23); | |||||
// const { data } = await getAreaList({ parentId: 0 }); //获取省接口 | |||||
// var nodes = data.map((item) => { | |||||
// return { | |||||
// value: item.id, | |||||
// label: item.name, | |||||
// leaf: false, | |||||
// }; | |||||
// }); | |||||
// resolve(nodes); | |||||
// } else | |||||
if (level == 1) { | |||||
if (level == 0) { | |||||
console.log(23); | |||||
const { data } = await getAreaList({ parentId: 0 }); //获取省接口 | |||||
var nodes = data.map((item) => { | |||||
return { | |||||
value: item.id, | |||||
label: item.name, | |||||
leaf: false, | |||||
}; | |||||
}); | |||||
resolve(nodes); | |||||
} | |||||
else if (level == 1) { | |||||
const { data } = await getAreaList({ parentId: node.data.value }); //获取市接口 | const { data } = await getAreaList({ parentId: node.data.value }); //获取市接口 | ||||
var nodes = data.map((item) => { | var nodes = data.map((item) => { | ||||
return { | return { | ||||
@@ -544,8 +544,7 @@ export default { | |||||
this.getAllOperationsStaff(); | this.getAllOperationsStaff(); | ||||
// 获取列表数据 | // 获取列表数据 | ||||
this.zkhousePage(); | this.zkhousePage(); | ||||
// 获取地区选择数据,在这里对回显的时候进行操作,首先先获取一级省的数据 | |||||
this.getProvinceList(); | |||||
}, | }, | ||||
methods: { | methods: { | ||||
// 添加楼盘 | // 添加楼盘 | ||||
@@ -584,6 +583,7 @@ export default { | |||||
this.restFrom(); | this.restFrom(); | ||||
}, | }, | ||||
restFrom() { | restFrom() { | ||||
this.$refs.ruleForm.resetFields() | |||||
this.time = []; | this.time = []; | ||||
this.ruleForm={ | this.ruleForm={ | ||||
orgCode: "", //公司标识 | orgCode: "", //公司标识 | ||||
@@ -615,8 +615,10 @@ export default { | |||||
]; | ]; | ||||
// console.log(this.time) | // console.log(this.time) | ||||
this.ruleForm = Object.assign({},row) | this.ruleForm = Object.assign({},row) | ||||
// 获取地区选择数据,在这里对回显的时候进行操作,首先先获取一级省的数据 | |||||
this.getProvinceList(); | |||||
// 级联选择器回显问题 | // 级联选择器回显问题 | ||||
this.loadOptions(); | |||||
this.editFlag = true; | this.editFlag = true; | ||||
}, | }, | ||||
// 更换账号 | // 更换账号 | ||||
@@ -708,6 +710,7 @@ export default { | |||||
}, | }, | ||||
getProvinceList(parentId = 0) { | getProvinceList(parentId = 0) { | ||||
let _this = this; | let _this = this; | ||||
this.addressOptions=[] | |||||
getAreaList({ parentId }).then((res) => { | getAreaList({ parentId }).then((res) => { | ||||
console.log(res); | console.log(res); | ||||
// 当他没有值时给addressOptions赋值,这是第一个数组 | // 当他没有值时给addressOptions赋值,这是第一个数组 | ||||
@@ -723,6 +726,7 @@ export default { | |||||
arr.push(obj); | arr.push(obj); | ||||
}); | }); | ||||
this.addressOptions = arr; | this.addressOptions = arr; | ||||
this.loadOptions(); | |||||
} | } | ||||
}); | }); | ||||
}, | }, | ||||
@@ -730,6 +734,7 @@ export default { | |||||
console.log(this.addressOptions); | console.log(this.addressOptions); | ||||
this.addressOptions.map((item,idx) => { | this.addressOptions.map((item,idx) => { | ||||
if (item.value == this.ruleForm.provinceId) { | if (item.value == this.ruleForm.provinceId) { | ||||
console.log('有匹配项') | |||||
getAreaList({ parentId: this.ruleForm.provinceId }).then((res) => { | getAreaList({ parentId: this.ruleForm.provinceId }).then((res) => { | ||||
if (res.code == 0) { | if (res.code == 0) { | ||||
let arr = []; | let arr = []; | ||||
@@ -742,14 +747,16 @@ export default { | |||||
}); | }); | ||||
this.$set(this.addressOptions[idx],'children',arr) | this.$set(this.addressOptions[idx],'children',arr) | ||||
this.area = [this.ruleForm.provinceId, this.ruleForm.cityId]; | this.area = [this.ruleForm.provinceId, this.ruleForm.cityId]; | ||||
// console.log(this.addressOptions[idx]); | |||||
console.log(this.addressOptions[idx],'123'); | |||||
console.log(this.area); | |||||
this.addressOptions=Object.assign([],this.addressOptions) | this.addressOptions=Object.assign([],this.addressOptions) | ||||
this.$forceUpdate() | this.$forceUpdate() | ||||
this.dialogVisible = true; | |||||
} | } | ||||
}); | }); | ||||
} | } | ||||
this.dialogVisible = true; | |||||
}); | }); | ||||
}, | }, | ||||
empty() { | empty() { | ||||
@@ -771,7 +778,7 @@ export default { | |||||
this.searchForm.endWorking = e[1]; | this.searchForm.endWorking = e[1]; | ||||
}, | }, | ||||
tabtimetap(idx) { | tabtimetap(idx) { | ||||
this.tabtimetap = idx; | |||||
this.searchForm.residueTime=idx | |||||
}, | }, | ||||
handleSizeChange(val) { | handleSizeChange(val) { | ||||
console.log(`每页 ${val} 条`); | console.log(`每页 ${val} 条`); | ||||
@@ -7,6 +7,7 @@ | |||||
const url = 'http://39.97.167.65:9999' //测试 | const url = 'http://39.97.167.65:9999' //测试 | ||||
// const url = 'http://192.168.31.160:9999' //长龙/ | // const url = 'http://192.168.31.160:9999' //长龙/ | ||||
// const url = 'http://192.168.31.128:9999' //嘉豪 | // const url = 'http://192.168.31.128:9999' //嘉豪 | ||||
// const url = 'http://192.168.31.100:9999' //王笑 | |||||
const CompressionWebpackPlugin = require('compression-webpack-plugin') | const CompressionWebpackPlugin = require('compression-webpack-plugin') | ||||
const productionGzipExtensions = ['js', 'css'] | const productionGzipExtensions = ['js', 'css'] | ||||