zkPCproject/src/views/houseData/analyse.vue

<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>