From f2f29f0e6bcfa042f2ba5d004ff9f4565960f926 Mon Sep 17 00:00:00 2001
From: wangxiaohua <1214073490@qq.com>
Date: Wed, 29 Sep 2021 15:20:33 +0800
Subject: [PATCH] init

---
 src/views/Statistics/BuildingContrast.vue | 409 ++++++++++++++++++++++
 1 file changed, 409 insertions(+)
 create mode 100644 src/views/Statistics/BuildingContrast.vue

diff --git a/src/views/Statistics/BuildingContrast.vue b/src/views/Statistics/BuildingContrast.vue
new file mode 100644
index 0000000..d11de18
--- /dev/null
+++ b/src/views/Statistics/BuildingContrast.vue
@@ -0,0 +1,409 @@
+<template>
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-titel">
+      <div class="titel-text">
+        楼盘选择：
+          <el-select v-model="houseId" placeholder="请选择">
+          <el-option
+            v-for="item in buildingoptions"
+            :key="item.value"
+            :label="item.propertyName"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </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 class="cen-tab">
+        <el-table
+          :data="tableData"
+          stripe
+          style="width: 100%">
+          <el-table-column
+            prop="batchId"
+            label="批次号"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="设备号"
+             align="center"
+           >
+            <template slot-scope="scope">
+                <p>{{scope.row.deviceNoStart}}:{{scope.row.deviceNoEnd}}</p>
+              </template>
+          </el-table-column>
+          <el-table-column
+            prop="realityEquipmentCount"
+            label="应收设备数量"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="receivableEquipmentCount"
+            label="实收设备数量"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="acceptanceNum"
+            label="已验收设备数量"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="createTime"
+            label="创建时间"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="remark"
+            label="备注"
+            align="center"
+          >
+          </el-table-column>
+         <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <div style="color: #2671E2;" @click="clickbianji(scope.row)">修改</div>
+            </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="currentPage4"
+              :page-sizes="[8, 16, 24, 32]"
+              :page-size="4"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+        </div>
+    </div>
+
+     <div class="app-box-san">
+        <div class="zuo">
+          <div class="title">
+            <div class="text1">接待量（TOP10）</div>
+            <div class="text2">
+               <el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+             </div>
+          </div>
+         	<div class="hejisan">
+            <div class="sanbox1" style="width: 35%;">
+              <div class="text1-1">合计</div>
+              <div class="text1-2">1</div>
+            </div>
+            <div  class="sanbox1" style="width: 40%;">
+              <div class="text1-1">顾问</div>
+              <div class="text1-2">1</div>
+            </div>
+            <div  class="sanbox1" style="width: 25%;">
+              <div class="text1-1">人均接待量</div>
+              <div class="text1-2">1</div>
+            </div>
+         </div>
+         <div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
+              <div  class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
+                  <div class="jinboxtit">{{item.name}}</div>
+                  <div class="jinbox-box">
+                      <div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
+                  </div>
+                  <div class="jinboxbott">{{item.avgZxl}}%</div>
+              </div>
+         </div>
+        </div>
+        <div class="you">
+          <div class="title">
+            <div class="text1">销讲执行率（TOP10）</div>
+             <div class="text2">
+               <el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+             </div>
+          </div>
+          	<div class="hejisan">
+            <div class="sanbox1" style="width: 35%;">
+              <div class="text1-1">合计</div>
+              <div class="text1-2">1</div>
+            </div>
+            <div  class="sanbox1" style="width: 40%;">
+              <div class="text1-1">顾问</div>
+              <div class="text1-2">1</div>
+            </div>
+            <div  class="sanbox1" style="width: 25%;">
+              <div class="text1-1">人均接待量</div>
+              <div class="text1-2">1</div>
+            </div>
+         </div>
+          <div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
+              <div  class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
+                  <div class="jinboxtit">{{item.name}}</div>
+                  <div class="jinbox-box">
+                      <div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
+                  </div>
+                  <div class="jinboxbott">{{item.avgZxl}}%</div>
+              </div>
+         </div>
+        </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      houseId: "",
+      buildingoptions:[],
+      TimetoAhoose: 2,
+      customtime: [],
+      currentPage4:1,
+      total:20,
+      options: [{
+          value: '1',
+          label: '排名'
+        }, {
+          value: '2',
+          label: '趋势'
+        }],
+      value:'1',
+      ceratelist:[
+            {name:'还是得',avgZxl:80},
+             {name:'大大奥德赛',avgZxl:90},
+              {name:'沙发和',avgZxl:20},
+               {name:'还是得',avgZxl:10},
+                {name:'还客户家客户是得',avgZxl:80},
+      ],
+
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleCurrentChange(){
+
+    },
+    handleSizeChange(){
+
+    },
+    //切换时间
+    tabtimetap(index) {
+      this.TimetoAhoose = index;
+
+    },
+
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab{
+  width: 100%;
+  padding: 15px;
+  background: #FFFFFF;
+  margin-top: 15px;
+}
+.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: 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: 30px;
+    cursor: pointer;
+  }
+  .toptimeqhuan div {
+    flex: 1;
+    text-align: center;
+    line-height: 32px;
+    font-size: 16px;
+  }
+}
+
+.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;
+        }
+  }
+</style>