zkPCproject/src/views/Statistics/index.vue

<template>
  <div class="box-center" ref="boxcenter"  style="cursor:pointer;">
    <!-- 头 -->
    <div class="app-top">
    <div v-if="orgType!=3" class="app-titel2" style="margin-bottom: 10px">
      <div class="titel-text" >
        项目选择： </div>
      <div style="margin-left: 26px">
          <el-select v-model="houseId" filterable @change="houseChange" placeholder="请选择">
          <el-option
            v-for="item in buildingoptions"
            :key="item.value"
            :label="item.propertyName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>

  <div class="app-titel2">
 <div style="text-indent: 30px;font-weight: bold;">接待时间:</div>
      <div class="toptimeqhuan">
        <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
          今日
        </div>
        <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
          昨日
        </div>
        <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
          近一周
        </div>
      </div>
      <div style="margin-left: 26px">
        <el-date-picker
          v-model="customtime"
          @change="confirmtime()"
          type="daterange"
          range-separator="-"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
  </div>

    </div>

    <!-- 中间 -->
    <div style="display: flex;justify-content: space-between" :style="{'margin-top':orgType != 3?'110px':'70px'}">
			<el-card style="width: 33%;display: flex;flex-direction: column;align-items: center;text-align: center">
				<div @click="goTo(1)">{{efficient}}</div>
				<div @click="goTo(1)" style="margin-top: 10px">有效接待</div>
			</el-card>
			<el-card style="width: 33%;display: flex;flex-direction: column;align-items: center;text-align: center">
				<div @click="goTo(2)">{{markCount}}</div>
				<div @click="goTo(2)" style="margin-top: 10px">已标顾问</div>
			</el-card>
			<el-card  style="width: 33%;display: flex;flex-direction: column;align-items: center;text-align: center">
				<div @click="goTo(3)">{{noMarkCount}}</div>
				<div @click="goTo(3)" style="margin-top: 10px">未标顾问</div>
			</el-card>
		</div>

    <div class="app-box">
      <div class="conbox">客群特征总览</div>
      <div class="alllistbox">
        <div
          class="alllist"
          v-for="(item, index) in alllist"
          :key="index"
          @click="movePlace(index)"
          style="cursor: pointer"
        >
          <div class="alllist-text1">{{ item.name }}</div>
          <div class="alllist-text1">{{ item.num }}</div>
        </div>
      </div>
    </div>

    <!-- 下面 -->
    <div class="box-forhtml" v-for="(item, index) in objlist" :key="index">
      <div class="conbox">{{ item.name }}触达排名</div>
      <div class="box-forhtml-flex">
        <div class="left">
          <div class="Templatetable">
            <div class="table-tit">
              <div>排名</div>
              <div>画像语意词/触达次数</div>
              <div>触达占比</div>
              <div>沟通记录</div>
            </div>
            <div
              v-if="item.total == 0"
              style="
                width: 100%;
                line-height: 300px;
                text-align: center;
                color: #999999;
                font-size: 14px;
              "
            >
              暂无数据
            </div>
            <div
              class="table-cent"
              v-else
              v-for="(itcen, inde) in item.matchKeywords"
              :key="inde"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img
                  v-if="inde == 0"
                  style="width: 30px; height: 30px"
                  src="/img/ranking1.png"
                  alt=""
                />
                <img
                  v-else-if="inde == 1"
                  style="width: 30px; height: 30px"
                  src="/img/ranking2.png"
                  alt=""
                />
                <img
                  v-else-if="inde == 2"
                  style="width: 30px; height: 30px"
                  src="/img/ranking3.png"
                  alt=""
                />
                <div v-else class="indeclass">{{ inde + 1 }}</div>
              </div>
              <div v-if="index == 2">
                {{ itcen.name + "-" + itcen.endName + "㎡" }}({{ itcen.total }})
              </div>
              <div v-else-if="index == 3">
                {{ itcen.name + "-" + itcen.endName + "万" }}({{ itcen.total }})
              </div>
              <div v-else>{{ itcen.name }}({{ itcen.total }})</div>
              <div>{{ itcen.proportion }}%</div>
              <div
                style="color: #2671e2; cursor: pointer"
                @click="Toview(item, inde)"
              >
                查看
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div
            :id="'ids' + item.id"
            class="container"
            style="width: 400px; height: 330px; text-align: center"
          >
            <img
              v-if="item.total == 0"
              style="width: 260px; height: 260px"
              src="/img/Elementcircle.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>

   <div @click="backTop()" class="backTopbox">
			<img class="backTop"  src="http://121.42.63.138:9091/autoSR/static/images/system/images/backTop.png" alt="">
		</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Router from "../../router/router";

import colorTheme from "../../util/theme.color"
export default {
  data() {
    return {
      alllist: [],
      namelist: [],
      numlist: [],
      objlist: [],
      value: "",
      orgType: localStorage.getItem("orgType"),
      houseId: "",
      buildingoptions: [],
      TimetoAhoose: 2,
      customtime: [],
      fromobj: {
        starttime: "",
        endoftime: "",
      },

				efficient:"",
				markCount:"",
				noMarkCount:""
    };
  },
  mounted() {
    this.zkhousePage();
  },
  methods: {
      goTo(i){
				if(i==1){
          Router.push("/ReceivingRecords/index?activeTotal=0&validInvalid=0")
				}else if(i==2){
					Router.push("/ReceivingRecords/index?activeTotal=0&markAdvisor=1");
				}else{
					Router.push("/ReceivingRecords/index?activeTotal=0&markAdvisor=0");
				}
			},
    	backTop(){
         $('#avue-view').scrollTop(0)
			},
      	movePlace(index){
				if(index==0){
					return
				}else {
					var as55=this.objlist[index-1].id;
					var shu='#ids'+as55;
          $('#avue-view').scrollTop(($(shu).offset().top)-200)
				}
			},


    houseChange() {
      this.getorgCode();
    },
    Toview(item, index) {
      let Userrecord = {
        TimetoAhoose: this.TimetoAhoose,
        keywordsId: item.matchKeywords[index].keywordsId,
        customtime: this.customtime,
        starttime: this.fromobj.starttime,
        endoftime: this.fromobj.endoftime,
        houseId: this.houseId,
      };
      this.$router.push({
        path: "/Statistics/Insightintothedetails",
        query: { flag: Userrecord },
      });
    },
    //获取项目
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.buildingoptions = res.data;
          if (localStorage.getItem("orgType") == 3) {
            this.houseId = localStorage.getItem("houseId");
          } else {
            this.houseId = res.data[0].id;
          }
          // this.houseId = res.data[0].id;
          this.getorgCode();
        });
    },
    //自定义时间
    confirmtime() {
      this.TimetoAhoose = 6;
      this.fromobj.starttime = this.customtime[0];
      this.fromobj.endoftime = this.customtime[1];
      this.getorgCode();
    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.fromobj.starttime = "";
      this.fromobj.endoftime = "";
      this.customtime = [];
      this.getorgCode();
    },
    //初始化
    getorgCode() {
      this.namelist = [];
      this.numlist = [];
      this.objlist = [];
      var dateType = "";
      if (this.TimetoAhoose == 6) {
        dateType = "";
      } else {
        dateType = this.TimetoAhoose;
      }
      this.$api.http
        .findmatchdata({
          dateType: dateType,
          houseId: this.houseId,
          statDateStart: this.fromobj.starttime,
          statDateEnd: this.fromobj.endoftime,
        })
        .then((res) => {
          this.objlist = res.data.list;
          this.alllist = [{ name: "有效接待", num: res.data.total }];

					this.efficient = res.data.total
					this.markCount = res.data.markCount
					this.noMarkCount = res.data.noMarkCount

          res.data.list.forEach((item, index) => {
            this.alllist.push({
              name: item.name,
              num: item.total,
            });
          });
          this.$nextTick(() => {
            this.myChartinit();
          });
        });
    },

    myChartinit() {
      this.objlist.forEach((item, index) => {
        if (item.total != 0) {
          var id = "ids" + item.id;
          var myChart = echarts.init(document.getElementById(id));
          var objoptlis = [];
          item.matchKeywords.forEach((ice) => {
            objoptlis.push({ value: ice.total, name: ice.name });
          });
          var option = {
            color: colorTheme.colorArr,
            tooltip: {
              trigger: "item",
            },
            legend:{
              show:true,
              bottom: "0",
            },
            graphic: [
              {
                type: "text",
                left: "center",
                top: "42%",
                style: {
                  text: item.total,
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 24,
                  color: "#32363D",
                  fontFamily: "Microsoft YaHei",
                },
              },
              {
                type: "text",
                left: "center",
                top: "55%",
                style: {
                  text: "总触达次数",
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 16,
                  color: "#666666",
                },
              },
            ],
            series: [
              {
                name: "",
                type: "pie",
                radius: ["48%", "70%"],
                avoidLabelOverlap: false,
                data: objoptlis,
              },
            ],
          };
          myChart.setOption(option);
        }
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
		.backTopbox{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: #D0EDFF;
			position:fixed;
			bottom: 40px;
			right: 40px;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
      z-index: 9999;
		}
		.backTop{
			display: block;
			width: 16px;
			height: 20px;
		}
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel {
  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: 16px;
    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-box {
  width: 100%;
  padding-bottom: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
  .conbox {
    height: 18px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #32363d;
    line-height: 18px;
  }
  .alllistbox {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .alllist {
      width: 16.66%;
      border: 1px solid #e0e0e0;
      padding-bottom: 2px;
      padding-top: 4px;
    }
    .alllist-text1 {
      width: 100%;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 26px;
      text-align: center;
    }
  }
}

.box-forhtml {
  width: 100%;
  min-height: 400px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding: 20px 30px;
  margin-top: 20px;
}
.box-forhtml-flex {
  width: 100%;
  display: flex;
  margin-top: 20px;
}
.box-forhtml-flex .left {
  width: 50%;
  min-height: 320px;
}
.box-forhtml-flex .right {
  width: 50%;
  min-height: 330px;
  display: flex;
  justify-content: center;
}
.Templatetable {
  width: 88%;
  height: 100%;
  margin: 0 auto;
  overflow-y: auto;
}
.table-tit {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
}
.table-tit > div:nth-of-type(1) {
  width: 10%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}
.table-tit > div:nth-of-type(2) {
  width: 40%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}
.table-tit > div:nth-of-type(3) {
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}
.table-tit > div:nth-of-type(4) {
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}

.table-cent {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
  margin-top: 18px;
}
.table-cent > div:nth-of-type(1) {
  width: 10%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.table-cent > div:nth-of-type(2) {
  width: 40%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.table-cent > div:nth-of-type(3) {
  width: 25%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.table-cent > div:nth-of-type(4) {
  width: 25%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.indeclass {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ecf1ff;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}
.app-top {
  // width: 100%;
  width: calc(100% - 270px);
  position: fixed;    
  z-index: 999;
  margin-top: -16px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0px 10px 0px #dadada;
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel2 {
  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>