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

init

newStyle
wangxiaohua 3 years ago
parent
c0043d5f70
commit
38298b56b9
5 changed files with 772 additions and 2 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/img/waves1.png
  2. BIN
      public/img/waves2.png
  3. BIN
      public/img/waves3.png
  4. +435
    -2
      src/views/Statistics/TrendAnalysis.vue
  5. +337
    -0
      src/views/building/area.vue

BIN
public/img/waves1.png View File

Before After
Width: 400  |  Height: 124  |  Size: 19 KiB

BIN
public/img/waves2.png View File

Before After
Width: 402  |  Height: 122  |  Size: 37 KiB

BIN
public/img/waves3.png View File

Before After
Width: 402  |  Height: 122  |  Size: 33 KiB

+ 435
- 2
src/views/Statistics/TrendAnalysis.vue View File

@@ -1,6 +1,163 @@
<template> <template>
<div class="box-center"> <div class="box-center">
asad
<!-- 头 -->
<div class="app-top">
<div class="app-titel">
<div class="titel-text">楼盘选择：</div>
<div style="margin-left: 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>
</div>
</div>
<div class="app-titel" style="margin-top: 10px;">
<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="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
<div style="margin-left: 26px">
<el-checkbox v-model="checked">对比时间段</el-checkbox>
</div>
<div style="margin-left: 26px">
<el-date-picker
v-model="value1"
type="date"
validate-event='false'
editable='true'
placeholder="选择日期">
</el-date-picker>
</div>
</div>
</div>
<!-- //卡片 -->
<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>
<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 class="you">
<img class="youimg" src="/img/waves2.png" alt="">
</div>
</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 class="you">
<img class="youimg" src="/img/waves3.png" alt="">
</div>
</div>
<div class="xia">
<span class="span1">对比:78</span>
<span class="span2">50%</span>
</div>
</div>
</div>

<!-- 图表 -->
<div class="app-box-er">
<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>
<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 id="main"></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>


@@ -9,14 +166,132 @@ import * as echarts from "echarts";
export default { export default {
data() { data() {
return { return {
customtime: "",
TimetoAhoose: 2,
aliasclass:1,
fromobj: {
starttime: "",
endoftime: "",
},
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 弄'
}]


}; };
}, },
mounted() { mounted() {

this.SwitchCARDS()
}, },
methods: { methods: {
SwitchCARDS(){
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['来访人数/个'],
bottom: '10',
},
grid: {
left: 10,
right: 10,

containLabel: true,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { //重点在这一块，其余可以忽略
textStyle: {
color: '#212121', //更改坐标轴文字颜色
}
},
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
},
},
series: [{
name:'来访人数/个',
data: [820, 932, 901, 934, 1290, 1330, 1320,],
type: 'line',
smooth: true,

}]
};


option && myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
},
}, },
}; };
</script> </script>
@@ -29,4 +304,162 @@ export default {
padding-bottom: 100px; padding-bottom: 100px;
} }


#main{
width: 100%;
height: 380px;
}


.app-box-san{
width: 100%;
background: #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px;
margin-top: 15px;
padding-bottom: 15px;
.santitle{
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #E0E0E0;
font-size: 16px;
color: #333333;
font-weight: 500;
text-indent: 15px;
}
.santab{
width: 100%;
height: 400px;
padding: 15px;
}
}
.app-box-er{
width: 100%;
background: #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px;
margin-top: 15px;
padding: 15px;
.titletab{
width: 100%;
height: 42px;
display: flex;
// border: 1px solid red;
}
.titletab div{
width: 130px;
height: 42px;
line-height: 42px;
text-align: center;
border: 1px solid #E0E0E0;
font-size: 14px;
}
.claindex{
background: #2671E2;
color: #FFFFFF;
border: none;
}
}

.kapian-box{
width: 100%;
height: 144px;
margin-top: 15px;
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;
display: flex;
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;
}
}
}
}

.tophove {
color: #ffffff;
background: #2671e2;
}
.app-top{
width: 100%;
background: #ffffff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px;
padding-top: 15px;
padding-bottom: 15px;
}
.app-titel {
width: 100%;
display: flex;
align-items: center;
.titel-text {
height: 100%;
font-size: 16px;
font-weight: 600;
color: #32363d;
text-indent: 30px;
}
.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>

+ 337
- 0
src/views/building/area.vue View File

@@ -0,0 +1,337 @@
<template>
<div class="box-center">
<div class="center-er">
<div class="app-titel">
<div class="app-titel-name">区域管理
<div style="margin-left: 20px" v-if="roleFlag!=1">
<el-select v-model="orgCode" filterable @change="getTableList" placeholder="请选择公司">
<el-option
v-for="item in optionsOrg"
:key="item.id"
:label="item.name"
:value="item.orgCode">
</el-option>
</el-select>
</div>
</div>
<el-button class="app-titel-btn" type="primary" @click="addClick">新增</el-button>
</div>
<div class="app-box">

<el-table
:data="tableData"
border
style="width: 100%"
:header-cell-style="{textAlign: 'center'}"
:cell-style="{ textAlign: 'center' }"
>
<el-table-column
prop="areaName"
label="区域名称"
width="180">
</el-table-column>
<el-table-column
prop="provinceName"
label="负责区域">
</el-table-column>
<el-table-column
label="操作"
width="250">
<template slot-scope="scope">
<el-button type="text" @click="edit(scope.row)">编辑</el-button>
<el-button type="text" @click="del(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="block">
<div class="blockbox">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 12, 16, 20]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
</div>
</div>
<el-dialog title="新增区域" :visible.sync="dialogVisible" @close="formClose">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="区域名称" prop="areaName">
<el-input v-model="ruleForm.areaName"></el-input>
</el-form-item>
<el-form-item label="负责省份" prop="provinceItem">
<el-select v-model="ruleForm.provinceItem" placeholder="请选择负责省份" multiple style="width: 100%">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="add">{{editFlag?'编 辑':'确 定'}}</el-button>
</div>
</el-dialog>
</div>
</div>
</template>

<script>
export default {
name: "area",
data() {
return {
tableData: [],
page:{
pageNum:1,
pageSize:10,
total:100
},
currentPage:1,
dialogVisible:false,
editFlag:false,
//公司列表
optionsOrg:[],
ruleForm:{
areaName:'',
provinceItem:[],
},
orgCode:'',
rules:{
areaName: [
{ required: true, message: '请输入区域名称', trigger: 'blur' },
],
provinceItem: [
{ required: true, message: '请选择负责省份', trigger: 'change' }
],
},
options:[],
roleFlag:''
};
},

methods: {
addClick(){
this.dialogVisible=true
this.editFlag=false
this.getArea()
},
edit(row){
// console.log(row,'编辑')
this.getArea(row.provinceItem)
this.editFlag=true
this.ruleForm=row
this.ruleForm.provinceItem=this.ruleForm.provinceItem.split(',')
// this.ruleForm.provinceItem.map(item=>item/1)
console.log(this.ruleForm)
this.dialogVisible = true
},
del(row){
console.log(row,'删除')
this.$confirm(`是否删除区域?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
distinguishCancelAndClose: true,
type: 'warning'
}).then(()=>{
axios({
url:`${jypath}/properties/areaDelete`,
method: 'post',
data:{
id:row.id
},
}).then(res=>{
if(res.data.res==1){
this.$message.success('删除成功')
this.getTableList()
}else{
this.$message.warning(res.data.resMsg)
}
})
}
)
},
add(){
this.$refs.ruleForm.validate((valid)=>{
if(valid){
// console.log(this.ruleForm)
if(this.editFlag){
axios({
url:`${jypath}/properties/areaUpdate`,
method: 'post',
data:{
areaName:this.ruleForm.areaName,
provinceItem:this.ruleForm.provinceItem.join(','),
id:this.ruleForm.id,
orgCode:this.orgCode
},
}).then(res=>{
if(res.data.res==1){
this.$message.success('编辑成功')
this.dialogVisible = false
}
})
}else{
axios({
url:`${jypath}/properties/areaAdd`,
method: 'post',
data:{
areaName:this.ruleForm.areaName,
provinceItem:this.ruleForm.provinceItem.join(','),
orgCode:this.orgCode
},
}).then(res=>{
if(res.data.res==1){
this.$message.success('添加成功')
this.dialogVisible = false
}
})
}
}
})

},
formClose(){
this.$refs.ruleForm.resetFields()
this.getTableList()
this.ruleForm={
areaName:'',
provinceItem:[]
}
},
//获取table数据、
getTableList(){
axios({
url:`${jypath}/properties/queryByPage`,
method: 'get',
params:{
pageNum:this.page.pageNum,
pageSize:this.page.pageSize,
orgCode:this.orgCode
},
}).then(res=>{
if(res.data.res==1){
// console.log(res.data.obj.results)
this.tableData=res.data.obj.results
if(res.data.obj.totalRecord!=0&&this.tableData.length==0){
this.page.pageNum--
this.getTableList()
}
this.page.total = res.data.obj.totalRecord;
}
})
},
//获取公司数据、
getCompanyList(){
axios({
url:`${jypath}/backstage/org/role/findAll`,
method: 'get',
}).then(res=>{
if(res.data.res==1){
// console.log(res.data.obj.results)
this.optionsOrg=res.data.obj
if(this.roleFlag!=1){
this.orgCode=this.optionsOrg[0].orgCode
}
this.getTableList()

}
})
},
//获取用户数据
getDet(){
axios({
url:`${jypath}/backstage/account/getUserIdentity`,
method: 'get',
}).then(res=>{
if(res.data.res==1){
console.log(res.data.obj)
this.roleFlag=res.data.obj
}
})
},
//获取省份
getArea(id){
axios({
url:`${jypath}/properties/list`,
method: 'get',
params: {
parentId:0,
parentIds:id,
orgCode:this.orgCode
}
}).then(res=>{
if(res.data.res==1){
// console.log(res.data.obj)
this.options=res.data.obj
}
})
},
handleSizeChange(val) {
console.log("每页条" + val);
this.page.pageSize = val;
this.getTableList()

},
handleCurrentChange(val) {
console.log("当前页" + val);
this.page.pageNum = val;
this.getTableList()
}

}
};
</script>

<style lang="scss" scoped>
.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
.center-er{
width: 100%;
height: 80vh;
background: #ffffff;
border-radius: 4px;
}
}
.app-titel {
width: 100%;
background: #FFFFFF;
border-radius: 8px;
display: flex;
justify-content: space-between;
padding: 0 10px;
}
.app-titel-name{
text-align: center;
line-height: 40px;
display: flex;
}
.app-titel-btn{
height: 30px;
margin-top: 5px;
line-height: 6px;
}
.app-box{
margin-top: 20px;
}
.block {
width: 100%;
margin-top: 26px;
/*display: flex;*/
text-align: center;
}

.blockbox {
margin-left: auto;
}
</style>


Write Preview
Loading…
Cancel
Save