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

Merge branch 'master' of http://git.2weisou.com/wangxiao/zkPCproject

newStyle
wangxiaohua 3 years ago
parent
63f4dec07d c04d04a0aa
commit
fac7dd64cf
2 changed files with 897 additions and 6 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/views/Statistics/MentoringAbility.vue
  2. +896
    -5
      src/views/houseData/analyse.vue

+ 1
- 1
src/views/Statistics/MentoringAbility.vue View File

@@ -1242,7 +1242,7 @@ export default {
} }


.app-top { .app-top {
width: 98.6%;
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;


+ 896
- 5
src/views/houseData/analyse.vue View File

@@ -1,16 +1,907 @@
<template> <template>
<div>
列表分析
</div>
<div class="box-center">
<div class="app-top">
<div class="app-titel" style="margin-bottom: 10px">
<div style="display: flex">
<div class="titel-text" style="line-height: 32px">月份:</div>
<div style="margin-left: 10px">
<el-date-picker
v-model="time"
type="month"
:clearable='false'
value-format="yyyy-MM"
@change="confirmtime"
placeholder="选择月"
>
</el-date-picker>
</div>
</div>

<el-select
v-model="selValue"
@change="selChange"
style="width: 100px; margin-left: 20px"
placeholder="请选择"
>
<el-option label="代理商" v-if="orgType == 0" value="0"></el-option>
<el-option label="公司" v-if="orgType != 2" value="1"></el-option>
<el-option label="楼盘" value="2"></el-option>
</el-select>

<div style="margin-left: 10px" v-if="selValue == 1">
<el-select
v-model="choicValue"
@change="valuechange"
placeholder="默认为全部"
clearable
filterable
>
<el-option
v-for="item in houseList"
:key="item.orgCode"
:label="item.name"
:value="item.orgCode"
>
</el-option>
</el-select>
</div>
<!-- 楼盘 -->
<div style="margin-left: 26px" v-else-if="selValue == 2">
<el-select
v-model="choicValue"
@change="valuechange"
placeholder="默认为全部"
clearable
filterable
>
<el-option
v-for="item in houseList"
:key="item.id"
:label="item.propertyName"
:value="item.id"
>
</el-option>
</el-select>
</div>
<div style="margin-left: 26px" v-else>
<el-select
v-model="choicValue"
@change="valuechange"
clearable
filterable
placeholder="默认为全部"
>
<el-option
v-for="item in houseList"
:key="item.id"
:label="item.agentName"
:value="item.id"
>
</el-option>
</el-select>
</div>

<div v-if="orgType == 0 || orgType == 1" class="div-lab">
<div class="label">运营人员：</div>
<el-select
v-model="operationStaffId"
placeholder="请选择"
class="div-inp"
filterable
clearable
>
<el-option
v-for="item in operaList"
:key="item.accountId"
:label="item.name"
:value="item.accountId"
>
</el-option>
</el-select>
</div>
<div style="margin-left: auto; display: flex; margin-right: 50px">
<div style="margin-left: 20px">
<el-button type="primary" @click="screen">筛选</el-button>
</div>
<div style="margin-left: 20px">
<el-button @click="clascreen">清空筛选条件</el-button>
</div>
</div>
</div>
</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">目标分析</div>
</div>
<div style="height: 350px; width: 94%; margin: 0 auto">
<div id="data1" style="min-height: 350px"></div>
</div>
</div>
<div class="zuo">
<div class="title">
<div class="text1">运营目标完成排名</div>
</div>
<div
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
>
<div class="jinbox" v-for="(item, i) in objList" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<div class="jinbox-box">
<div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
</div>
<div class="jinboxbott">{{ item.zxl }}</div>
</div>
</div>
</div>
</div>
<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">对比上月分析</div>
</div>
<div style="height: 350px; width: 94%; margin: 0 auto">
<div id="data2" style="min-height: 350px"></div>
</div>
</div>
<div class="zuo">
<div class="title">
<div class="text1">运营目标排名</div>
</div>
<div
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
>
<div class="jinbox" v-for="(item, i) in objList" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<div class="jinbox-box">
<div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
</div>
<div class="jinboxbott">{{ item.zxl }}</div>
</div>
</div>
</div>
</div>

<!-- 表格 -->
<div class="cen-tab">
<div class="app-titel" style="margin-bottom: 10px">
<el-button type="primary">批量设置目标</el-button>
<!-- <el-button
>导出</el-button
> -->
</div>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
stripe
style="width: 100%"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="houseName" label="楼盘名称" align="center">
</el-table-column>
<el-table-column prop="accountNum" label="地区" align="center">
</el-table-column>
<el-table-column prop="receptionCount" label="运营" align="center">
</el-table-column>

<el-table-column
label="6月"
align="center"
v-for="(item, idx) in 6"
:key="idx"
>
<el-table-column
width="100"
prop="houseName"
label="平均执行率"
align="center"
>
</el-table-column>
<el-table-column
width="100"
prop="houseName"
label="对比上月"
align="center"
>
</el-table-column>
<el-table-column
width="100"
prop="houseName"
label="目标执行率"
align="center"
>
</el-table-column>
<el-table-column
width="100"
prop="houseName"
label="目标完成率"
align="center"
>
</el-table-column>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="200">
<template slot-scope="{ row }">
<el-button type="text" @click="getAnalyse(row)">趋势图</el-button>
<el-button type="text" @click="setTit(row)">设置目标</el-button>
</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="page"
:page-sizes="[10, 30, 50]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div> -->
</div>

<el-dialog title="趋势图" :visible.sync="dialogVisible">
<div style="height: 350px; width: 94%; margin: 0 auto">
<div id="line" style="min-height: 350px"></div>
</div>
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addEquipment()">保存</el-button>
</div> -->
</el-dialog>

<el-dialog title="目标" :visible.sync="targetVisible" width="400px" @close='reset'>
<el-form
:model="receiveForm"
ref="receiveForm"
:rules="receiveRules"
label-width="120px"
>
<el-form-item label="12月目标执行率" prop="num1">
<el-input
v-model.number="receiveForm.num1"
style="width: 80%; margin-left: 20px"
maxlength="2"
clearable
>
<i slot="suffix" style="font-style: normal; margin-right: 10px"
>%</i
>
</el-input>
</el-form-item>
<el-form-item label="12月目标执行率" prop="num2">
<el-input
v-model.number="receiveForm.num2"
style="width: 80%; margin-left: 20px"
maxlength="2"
clearable
>
<i slot="suffix" style="font-style: normal; margin-right: 10px"
>%</i
>
</el-input>
</el-form-item>
<el-form-item label="12月目标执行率" prop="num3">
<el-input
v-model.number="receiveForm.num3"
style="width: 80%; margin-left: 20px"
maxlength="2"
clearable
>
<i slot="suffix" style="font-style: normal; margin-right: 10px"
>%</i
>
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="targetVisible = false">取 消</el-button>
<el-button type="primary" @click="sava()">保存</el-button>
</div>
</el-dialog>
</div>
</template> </template>


<script> <script>
import * as echarts from "echarts";
import { exportMethodPost } from "@/util/util";
export default { export default {
data() {
return {
selValue:
localStorage.getItem("orgType") == 0
? "0"
: localStorage.getItem("orgType") == 1
? "1"
: "2",
choicValue: "",
operationStaffId: "",
houseList: [],
operaList: [],
tableData: [{ houseName: "123" }],
orgType: localStorage.getItem("orgType"),
time: "",
page: 1,
pagesize: 10,
total: 0,
dialogVisible: false,
targetVisible: false,
receiveForm: {
num1: "",
num2: "",
num3: "",
},
receiveRules: {},
objList: [
{
name: "顾文一",
zxl1: 90,
zxl: 10,
},
{
name: "顾文一",
zxl1: 90,
zxl: 10,
},
{
name: "顾文一",
zxl1: 90,
zxl: 10,
},
{
name: "顾文一",
zxl1: 90,
zxl: 10,
},
],
};
},
mounted() {
// 先默认获取当前月份
this.time = new Date().getFullYear() + "-" + (new Date().getMonth() + 1);
// console.log(new Date().getFullYear() + "-" + (new Date().getMonth() + 1));
this.getList();
this.getOperaList();
let arr = [
{
value: 10,
name: "达标",
},
{
value: 10,
name: "未达标",
},
];
this.getChart("data1", arr);
this.getChart("data2", arr);
},
methods: {
reset(){
this.receiveForm={
num1: "",
num2: "",
num3: "",
}
this.$refs.receiveForm.resetFields()
},
screen() {},
clascreen() {
this.time=new Date().getFullYear() + "-" + (new Date().getMonth() + 1);
this.choicValue=''
if(this.orgType==0){
this.selValue='0'
}else if(this.orgType==1){
this.selValue='1'
}else{
this.selValue='2'
}
this.operationStaffId=''
this.getList()


}
},
sava() {},
getAnalyse(row) {
console.log("趋势图");
let timeDate = ["六月", "七月", "八月", "九月", "十月", "十一月"];
let Strname = ["平均执行率", "对比上月", "目标执行率", "目标完成率"];
let arr0 = [1, 2, 3, 4, 5, -7];
let arr1 = [1, 2, -10, 4, 5, -7];
let arr2 = [1, 5, 3, 7, 5, 7];
let arr3 = [1, 2, 3, -16, 5, 7];
let arr = [];
Strname.map((item, idx) => {
// console.log(eval('arr'+idx));
// return
let obj = {
name: item,
data: eval("arr" + idx),
type: "line",
smooth: true,
};
arr.push(obj);
});
// console.log(arr,'数据');
this.dialogVisible = true;
// 将echar 变成异步操作，因为此时页面尚未渲染
setTimeout(() => {
this.SwitchCARDS(arr, "line", timeDate, Strname);
}, 100);
},
setTit(row) {
console.log("设置目标");
this.targetVisible = true;
},
// 折线图
SwitchCARDS(arr, str, timeDate, Strname) {
// console.log(arr, str, timeDate, Strname);
echarts.init(document.getElementById(str)).dispose();
var chartDom = document.getElementById(str);
var myChart = echarts.init(chartDom);
var option;

option = {
tooltip: {
trigger: "axis",
},
legend: {
data: Strname,
bottom: "10",
},
grid: {
left: 10,
right: 10,

containLabel: true,
},
xAxis: {
type: "category",
data: timeDate,
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: arr,
};
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
// 饼状图
getChart(id, data) {
echarts.init(document.getElementById(id)).dispose();
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option = {
color: [
"#66AFF5",
"#FABD2B",
"#6F8EDC",
"#FFCF8F",
"#F98120",
"#1CC99E",
"#9474FB",
"#657292",
"#7A6A99",
"#BF5D52",
"#EE6666",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
tooltip: {
trigger: "item",
},
legend: {
bottom: "1%",
left: "center",
},
series: [
{
name: "",
type: "pie",
radius: ["48%", "70%"],
avoidLabelOverlap: false,
data: data,
},
],
};

option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
confirmtime(e) {
console.log(e, "获取到的时间参数");
console.log(e.substring(5) / 1, "月份");
// 再次要对时间进行操作 即往前六个月
},
selChange() {
this.choicValue = "";
this.getList();
},
valuechange() {},
handleSelectionChange(e) {
console.log(e);
},
getList() {
console.log(this.selValue);
// 当为楼盘选择时
if (this.selValue == 1) {
this.$api.api
.findMyOrg({
orgType: localStorage.getItem("orgType"),
agentId: localStorage.getItem("agentId"),
})
.then((res) => {
this.houseList = res.data;
});
} else if (this.selValue == 2) {
this.$api.api
.findHouseByUser({
orgType: localStorage.getItem("orgType"),
houseId: localStorage.getItem("houseId"),
})
.then((res) => {
this.houseList = res.data;
});
} else {
this.$api.api
.findMyAgent({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
});
}
},
getOperaList() {
if (this.orgType == 1) {
this.$api.http
.getAllOperationsStaffByAgent({
agentId: localStorage.getItem("agentId"),
})
.then((res) => {
this.operaList = res.data;
});
} else {
this.$api.http.getAllOperationsStaff().then((res) => {
this.operaList = res.data;
});
}
},
handleSizeChange(val) {
this.pagesize = val;
// this.houseTable()
},
handleCurrentChange(val) {
this.page = val;
// this.houseTable()
},
},
};
</script> </script>


<style lang="" scoped >
<style lang="scss" scoped >
.box-center {
width: 100%;
padding: 15px;
min-width: 1000px;
padding-bottom: 100px;
}
.cen-tab {
width: 100%;
padding: 15px;
background: #ffffff;
margin-top: 15px;
}
.tophove {
color: #ffffff;
background: #2671e2;
}
.app-titel1 {
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: 20px;
cursor: pointer;
}
.toptimeqhuan div {
flex: 1;
text-align: center;
line-height: 32px;
font-size: 16px;
}
}

.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;
padding-bottom: 6px;
.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;
}
}
}


.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;
}
}
.div-lab {
display: flex;
margin: 5px;
}
.div-inp {
width: 200px;
}
.label {
font-size: 14px;
font-weight: 400;
color: #32363d;
line-height: 32px;
margin-left: 15px;
min-width: 40px;
}
.noData {
width: 100%;
// height: 60vh;
height: 500px;
background: #fff;
text-align: center;
margin-top: 20px;
overflow: hidden;
}
.imgboxc {
margin-top: 100px;
color: #999999;
}
// 进度条
.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: 16px;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save