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

src/api/modules/http.js

@@ -532,4 +532,24 @@ export function overviewreceptionOverviewZxl(query) {
 }
 
 
+//趋势分析
+export function trendtrendAnalysis(query) {
+  return request({
+    url: 'autoSR/cusStageStatistics/trendAnalysis',
+    method:'get',
+    params:query
+  })
+}
+
+//项目
+export function trendtrendAnalysisProject(query) {
+  return request({
+    url: 'autoSR/cusStageStatistics/trendAnalysisProject',
+    method:'get',
+    params:query
+  })
+}
+
+
+
 

src/page/wel.vue

@@ -26,6 +26,7 @@
               <el-date-picker
                 @change="confirmtime()"
                 v-model="customtime"
+                 :clearable='false'
                 type="daterange"
                 range-separator="-"
                 :default-time="['00:00:00', '23:59:59']"

src/views/Statistics/TrendAnalysis.vue

@@ -2,31 +2,7 @@
   <div class="box-center">
     <!-- 头 -->
     <div class="app-top">
-      <div class="app-titel" v-if="orgType != 3">
-        <div
-          class="label"
-          style="color: #32363d; font-weight: 400; font-size: 16px; margin-left: 30px;"
-        >
-          楼盘选择：
-        </div>
-        <div>
-          <el-select
-            v-model="houseId"
-            @change="houseChange"
-            placeholder="请选择"
-            filterable
-          >
-            <el-option
-              v-for="item in houseList"
-              :key="item.id"
-              :label="item.propertyName"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </div>
-      </div>
-      <div class="app-titel" style="margin-top: 10px">
+      <div class="app-titel">
         <div class="titel-text">接待时间</div>
         <div class="toptimeqhuan">
           <div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
@@ -39,10 +15,11 @@
             近30天
           </div>
         </div>
-        <div style="margin-left: 26px">
+        <div style="margin-left: 20px">
           <el-date-picker
             @change="confirmtime"
             v-model="customtime"
+            :clearable='false'
             type="daterange"
             range-separator="-"
             format="yyyy-MM-dd"
@@ -53,19 +30,15 @@
           >
           </el-date-picker>
         </div>
-        <div style="margin-left: 26px">
+        <div style="margin-left: 20px">
           <el-checkbox v-model="checked" @change="radioChange"
             >对比时间段</el-checkbox
           >
         </div>
-        <div style="margin-left: 26px">
-          <div v-if="checked">
-            <div class="demonstration timeSel" @click="show">
-              {{ selectTime1 ? "时段二： " : "请选择： "
-              }}<span v-if="selectTime1">{{
-                selectTime + "-" + selectTime1
-              }}</span>
-            </div>
+         <div v-if="checked" style="margin-left: 20px;border:1px solid #DCDFE6;min-width: 220px;height: 30px;border-radius: 4px;max-width:250px;
+             font-size: 13px; line-height: 30px; text-indent: 8px;" @click="show">
+            {{ selectTime1 ? "时段二： " : "请选择： "}}
+            <span v-if="selectTime1">{{ selectTime + "-" + selectTime1}}</span>
             <el-date-picker
               style="opacity: 0"
               v-model="time"
@@ -78,55 +51,56 @@
               :picker-options="pickerOptions"
             >
             </el-date-picker>
-          </div>
-        </div>
+         </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 class="text2">{{cardobj.startSumCustomer||0}}个</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 v-if="Confirmthecontrast" class="xia">
+          <span class="span1">对比:{{cardobj.endSumCustomer ||0}}个</span>
+          <span class="span2">{{cardobj.contrastSumCustomer ||0}}%</span>
         </div>
       </div>
       <div class="kayi">
         <div class="shang">
           <div class="zuo">
             <div class="text1">平均执行率</div>
-            <div class="text2">2</div>
+            <div class="text2">{{cardobj.startFraction||0}}%</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 v-if="Confirmthecontrast" class="xia">
+          <span class="span1">对比:{{cardobj.endFraction ||0}}%</span>
+          <span class="span2">{{cardobj.contrastFraction ||0}}%</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 class="text1">平均接待时长/min</div>
+            <div class="text2">{{Math.floor(cardobj.startSumDuration/60)||0}}</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 v-if="Confirmthecontrast" class="xia">
+          <span class="span1">对比:{{Math.floor(cardobj.endSumDuration/60) ||0}}</span>
+          <span class="span2">{{cardobj.contrastSumDuration ||0}}%</span>
         </div>
       </div>
     </div>
@@ -175,19 +149,30 @@
     </div>
 
     <!-- 表格 -->
-    <div class="app-box-san">
+    <div class="app-box-san" v-if="Confirmthecontrast">
       <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 prop="name" label="时间" align="center">
           </el-table-column>
-          <el-table-column prop="name" label="时段1" align="center">
+          <el-table-column prop="shiduan1" label="时段1" align="center">
+             <template slot-scope="scope">
+               <span>{{scope.row.shiduan1}}%</span>
+             </template>
           </el-table-column>
-          <el-table-column prop="address" label="时段2" align="center">
+          <el-table-column prop="shiduan2" label="时段2" align="center">
+             <template slot-scope="scope">
+               <span>{{scope.row.shiduan2}}%</span>
+             </template>
           </el-table-column>
-          <el-table-column prop="address" label="变化" align="center">
+          <el-table-column prop="heji" label="变化" align="center">
+             <template slot-scope="scope">
+               <span v-if="scope.row.heji>0"> <i class="el-icon-top" style="color: red;"></i>{{scope.row.heji}}%</span>
+               <span v-if="scope.row.heji<0"> <i class="el-icon-bottom" style="color: 25CEBA;"></i>{{scope.row.heji}}%</span>
+             </template>
           </el-table-column>
         </el-table>
+
       </div>
     </div>
   </div>
@@ -199,80 +184,132 @@ export default {
   data() {
     return {
       timeType: 4,
-      time: "",
-      customtime: [],
-      houseList: [],
-      orgType: localStorage.getItem("orgType"),
-      page: {
-        pageNum: 1,
-        pageSize: 6,
-        openTime: "",
-        closeTime: "",
-        houseName: "",
-        accountName: "",
-        imei: "",
-        total: "",
-        recording: "",
-      },
       pickerOptions: {
         disabledDate(time) {
-          //根据当前日期 --- 禁止选中之后的日期
           return time.getTime() > Date.now();
         },
       },
-      selectTime1: "",
-      selectTime: "",
-      aliasclass: 1,
-      fromobj: {
-        starttime: "",
-        endoftime: "",
+      time: "",//对比时间的数组
+      page: {
+        openTime: "",
+        closeTime: "",
       },
-      houseId: "",
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-      ],
+      customtime: [],//自定义时间
+      selectTime1: "",//对比时间
+      selectTime: "",//对比时间
+      aliasclass: 1,//tab下标
+      houseId: "",//楼盘id
+      options: [],
       value: "",
-      checked: false,
-      value1: "99999999999999",
-      tableData: [],
+      checked: false,//是否对比
+      Confirmthecontrast:false,
+      tableData: [],//表格数据
+      cardobj:{}
     };
   },
   mounted() {
-
-    this.zkhousePage();
+    this.houseId = localStorage.getItem("houseId");
+    this.tabtimetap(4);
   },
   methods: {
-    tapChange(idx){
-      this.aliasclass=idx
+    //获取卡片
+    trendtrendAnalysis(){
+      let pamaet={
+        showStatus:'',
+        houseId:this.houseId,
+        timeType:0,
+        firstStartDate:this.page.openTime,
+        firstEndDate:this.page.closeTime,
+        lastStartDate:this.selectTime,
+        lastEndDate:this.selectTime1
+      }
+      if(this.timeType==-1){
+        pamaet.timeType=null
+      }else{
+        pamaet.timeType=this.timeType
+      }
+      if(this.checked==true){
+        pamaet.showStatus=1;
+        pamaet.timeType=null
+      }else{
+         pamaet.showStatus=0
+      }
+      this.$api.http.trendtrendAnalysis(pamaet).then((res) => {
+        this.cardobj=res.data;
+        if(this.aliasclass==1){
+          this.trendtrendAnalysisProject(pamaet)
+        }
+
+      })
     },
-    zkhousePage() {
-      this.$api.api
-        .findHouseByUser({
-          orgType: localStorage.getItem("orgType"),
-        })
-        .then((res) => {
-          // console.log(res)
-          this.houseList = res.data;
-          if (localStorage.getItem("orgType") == 3) {
-            this.houseId = localStorage.getItem("houseId");
-          } else {
-            this.houseId = res.data[0].id;
-          }
-          this.SwitchCARDS();
-          this.tabtimetap(4);
-        });
+    //项目
+    trendtrendAnalysisProject(pamaet){
+       this.$api.http.trendtrendAnalysisProject(pamaet).then((res) => {
+         if(this.Confirmthecontrast==false){
+            let newlist=res.data.startList || [];
+            var newline=[];
+            var newline2=[];
+            newlist.map(item=>{
+              newline.push(item.fraction)
+              newline2.push(item.statDate.slice(5,10))
+            })
+            this.SwitchCARDS(newline,newline2)
+         }else{
+            let newlist=res.data.startList || [];
+            let newlist2=res.data.endList || [];
+            let hejilist=res.data.comparedList || [];
+            var newline=[];//起始数据
+            var newline2=[];//对比数据
+            var newline1=[];//时间
+
+            let arr=[];
+            newlist.map(item=>{
+              newline.push(item.fraction)
+            })
+            newlist2.map(item=>{
+              newline1.push(item.fraction)
+            })
+           newlist.forEach((item, sdf) => {
+							newlist2.forEach((child, zxc) => {
+								if (sdf == zxc) {
+                   newline2.push(item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10))
+                   arr.push({
+                     name:item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10),
+                     shiduan1:item.fraction,
+                     shiduan2:child.fraction,
+                   });
+								}
+							})
+						})
+            hejilist.forEach((acd,xdx)=>{
+              arr.forEach((che,ind)=>{
+                if(xdx==ind){
+                  che.heji=acd.fraction;
+                }
+              })
+            })
+            arr.unshift({
+              name:'项目合计',
+              shiduan1:res.data.startSum,
+              shiduan2:res.data.endSum,
+              heji:res.data.comparedSum,
+            })
+
+            this.SwitchCARDS2(newline,newline1,newline2)
+            this.tableData=arr;
+            console.log( this.tableData)
+         }
+      })
     },
-    houseChange() {},
+
+    //选项卡切换
+    tapChange(idx){
+      this.aliasclass=idx;
+      this.trendtrendAnalysis()
+    },
+    //时间tab切换
     tabtimetap(i) {
       this.timeType = i;
-      // this.getTableList()
       this.checked = false;
       this.selectTime = "";
       this.selectTime1 = "";
@@ -288,42 +325,30 @@ export default {
       if (this.timeType == 6) {
         num = 24 * 3600 * 1000 * 29;
       }
-
       this.customtime = [
         this.timestampToTime(new Date().getTime() - num),
         this.timestampToTime(new Date().getTime()),
       ];
       this.$set(this, "time", null);
-      // this.getTableList();
-      // this.getdetail();
+       this.Confirmthecontrast=false;
+      this.trendtrendAnalysis()
     },
+    // 对比时间选择弹框显示
     show() {
       this.$refs.time.pickerVisible = true;
     },
+    //选择对比时间
     timeChange(e) {
-      // console.log(e)
-      // this.selectTime=e
       //	对数据进行处理
       //	当当前选择的为自定义时间时
       this.selectTime = "";
       this.selectTime1 = "";
       this.timeSelect(e);
-      // this.getdetail();
-      // this.getcompare();
     },
     timeSelect(e) {
-      console.log(this.$refs.time);
       if (this.timeType == -1) {
-        //	将两者的时间戳相减，然后在在选择的自定义时间的时间戳想加
-        // 	console.log(e,this.page.openTime,this.page.closeTime)
-        // console.log(new Date(e).getTime(),new Date(this.page.openTime).getTime(),new Date(this.page.closeTime).getTime(),'时间戳')
-        // console.log(this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime()))
         this.selectTime = e;
-        this.selectTime1 = this.timestampToTime(
-          new Date(e).getTime() +
-            new Date(this.page.closeTime).getTime() -
-            new Date(this.page.openTime).getTime()
-        );
+        this.selectTime1 = this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime());
       } else {
         //	获取今天昨天近一周
         //	获取一天的时间戳
@@ -338,65 +363,122 @@ export default {
         if (this.timeType == 6) {
           num = 24 * 3600 * 1000 * 29;
         }
-        // 	console.log(-this.timeType*num)
-        // 	this.selectTime=this.timestampToTime(new Date().getTime()-this.timeType*num)
         this.selectTime = e;
         this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
       }
+        this.Confirmthecontrast=true;
+        this.page.openTime=this.customtime[0]
+        this.page.closeTime=this.customtime[1]
+        this.trendtrendAnalysis()
     },
     radioChange() {
       this.selectTime = "";
       this.selectTime1 = "";
-      // this.compareList = [];
       this.$set(this, "time", null);
     },
+    //选择自定义时间
     confirmtime(e) {
       this.timeType = "-1";
-      // if(this.customtime==''){ }else{
-      // 	const d = new Date(this.customtime[0])
-      // 	this.page.openTime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate())
-      // 	const c = new Date(this.customtime[1])
-      // 	this.page.closeTime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate())
-      // }
       this.checked = false;
       this.selectTime = "";
       this.selectTime1 = "";
       this.$set(this, "time", null);
-      console.log(e);
       if (!e) return;
       this.page.openTime = this.customtime[0];
       this.page.closeTime = this.customtime[1];
-      // this.getTableList()
-      // this.getdetail()
+      this.Confirmthecontrast=false;
+      this.trendtrendAnalysis()
     },
     timestampToTime(timestamp) {
       var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
-      // var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
-
       var yyyy = date.getFullYear() + "-";
+      var MM =(date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "-";
+      var dd =(date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
+      return yyyy + MM + dd;
+    },
 
-      var MM =
-        (date.getMonth() + 1 < 10
-          ? "0" + (date.getMonth() + 1)
-          : date.getMonth() + 1) + "-";
 
-      // var dd = date.getDate() + ' ';
-      var dd =
-        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
 
-      // var HH = date.getHours() + ':';
-      // var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
-      //
-      // // var mm = date.getMinutes() + ':';
-      // var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
-      //
-      // // var ss = date.getSeconds();
-      // var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
+    SwitchCARDS(newline,newline2) {
+      echarts.init(document.getElementById("main")).dispose();
+      var chartDom = document.getElementById("main");
+      var myChart = echarts.init(chartDom);
+      var option;
 
-      // return yyyy+MM+dd+HH+mm+ss;
-      return yyyy + MM + dd;
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["起始时间"],
+          bottom: "10",
+        },
+        grid: {
+          left: 10,
+          right: 10,
+
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: newline2,
+          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:newline,
+            type: "line",
+            smooth: true,
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
     },
-    SwitchCARDS() {
+    SwitchCARDS2(newline,newline1,newline2) {
+       echarts.init(document.getElementById("main")).dispose();
       var chartDom = document.getElementById("main");
       var myChart = echarts.init(chartDom);
       var option;
@@ -406,7 +488,7 @@ export default {
           trigger: "axis",
         },
         legend: {
-          data: ["来访人数/个"],
+          data: ["起始时间","对比时间"],
           bottom: "10",
         },
         grid: {
@@ -417,7 +499,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          data: newline2,
           axisLabel: {
             //重点在这一块，其余可以忽略
             textStyle: {
@@ -460,11 +542,17 @@ export default {
         },
         series: [
           {
-            name: "来访人数/个",
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            name: "起始时间",
+            data:newline,
             type: "line",
             smooth: true,
           },
+          {
+            name: "对比时间",
+            data:newline1,
+            type: "line",
+            smooth: true,
+          }
         ],
       };
 
@@ -556,7 +644,7 @@ export default {
       width: 100%;
       display: flex;
       .zuo {
-        flex: 1;
+        width: 50%;
         .text1 {
           font-size: 16px;
           font-weight: 400;
@@ -573,7 +661,7 @@ export default {
         }
       }
       .you {
-        flex: 2;
+        width:50%;
         display: flex;
         align-items: center;
         .youimg {

vue.config.js

@@ -5,9 +5,9 @@
 // const url = 'http://pigx-gateway'
 // const url = 'http://39.97.167.65:9999' //测试
 // const url = 'http://192.168.31.169:9999' //长龙
-// const url = 'http://192.168.31.133:9999' //嘉豪
+const url = 'http://192.168.31.134:9999' //嘉豪
 // const url = 'http://192.168.31.100:9999' //王笑
-const url = 'http://ea28ma.natappfree.cc' //王笑
+// const url = 'http://mrra2f.natappfree.cc' //王笑
 
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']