|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907 |
- <template>
- <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>
-
- <script>
- import * as echarts from "echarts";
- import { exportMethodPost } from "@/util/util";
- 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>
-
- <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>
|