zfire-newmall-admin/src/views/bigViews/dataView1/components/mapDataStatistics.vue

<template>
  <div class="heat-lay">
    <div class="heat-lay-flex">
      <div class="heat-lay-item" style="width: 190%">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">今日新增安装单</div>
          <div class="duplicatelay">
            <div
              id="lingshou1"
              style="cursor: pointer"
              @click="
                openPopUp($event, 'lingshou1', '今日新增安装单-零售（台/单）')
              "
            >
              <div class="heat-item-style1-num1-2">零售</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.machineTotalR || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 台 </span>
              </div>
              <div class="heat-item-style1-num2">
                <span class="heat-item-style1-num2-1 c2">
                  {{ info.orderTotalR || 0 }}
                </span>
                <span class="heat-item-style1-num2-2">单</span>
              </div>
            </div>
            <div
              id="gongcheng1"
              style="cursor: pointer"
              @click="
                openPopUp($event, 'gongcheng1', '今日新增安装单-工程（台/单）')
              "
            >
              <div class="heat-item-style1-num1-2">工程</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.machineTotalP || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 台 </span>
              </div>
              <div class="heat-item-style1-num2">
                <span class="heat-item-style1-num2-1 c2">
                  {{ info.orderTotalP || 0 }}
                </span>
                <span class="heat-item-style1-num2-2">单</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="averticalBart"></div>
      <div class="heat-lay-item" style="width: 190%">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">今日完工安装单</div>
          <div class="duplicatelay">
            <div
              id="lingshou2"
              style="cursor: pointer"
              @click="
                openPopUp($event, 'lingshou2', '今日完工安装单-零售（台/单）')
              "
            >
              <div class="heat-item-style1-num1-2">零售</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.machineCompleteR || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 台 </span>
              </div>
              <div class="heat-item-style1-num2">
                <span class="heat-item-style1-num2-1 c2">
                  {{ info.orderCompleteR || 0 }}
                </span>
                <span class="heat-item-style1-num2-2">单</span>
              </div>
            </div>
            <div
              id="gongcheng2"
              style="cursor: pointer"
              @click="
                openPopUp($event, 'gongcheng2', '今日完工安装单-工程（台/单）')
              "
            >
              <div class="heat-item-style1-num1-2">工程</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.machineCompleteP || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 台 </span>
              </div>
              <div class="heat-item-style1-num2">
                <span class="heat-item-style1-num2-1 c2">
                  {{ info.orderCompleteP || 0 }}
                </span>
                <span class="heat-item-style1-num2-2">单</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="averticalBart"></div>
      <div class="heat-lay-item" style="width: 190%">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">安装未完工累计</div>
          <div class="duplicatelay">
            <div
              id="lingshou3"
              style="cursor: pointer"
              @click="
                openPopUp($event, 'lingshou3', '安装未完工累计-零售（台/单）')
              "
            >
              <div class="heat-item-style1-num1-2">零售</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c4">
                  {{ info.machineOpenR || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 台 </span>
              </div>
              <div class="heat-item-style1-num2">
                <span class="heat-item-style1-num2-1 c3">
                  {{ info.orderOpenR || 0 }}
                </span>
                <span class="heat-item-style1-num2-2">单</span>
              </div>
            </div>
            <div
              id="gongcheng3"
              style="cursor: pointer"
              @click="
                openPopUp($event, 'gongcheng3', '安装未完工累计-工程（台/单）')
              "
            >
              <div class="heat-item-style1-num1-2">工程</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c4">
                  {{ info.machineOpenP || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 台 </span>
              </div>
              <div class="heat-item-style1-num2">
                <span class="heat-item-style1-num2-1 c3">
                  {{ info.orderOpenP || 0 }}
                </span>
                <span class="heat-item-style1-num2-2">单</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="averticalBart"></div>
      <div class="heat-lay-item">
        <div
          id="jinrshifucq"
          class="heat-item-style1"
          style="cursor: pointer"
          @click="openPopUp($event, 'jinrshifucq', '今日出勤师傅')"
        >
          <div class="heat-item-style1-title">今日出勤师傅</div>
          <br />
          <div class="heat-item-style1-num1">
            <span class="heat-item-style1-num1-1 c2">
              {{ info.cqry || 0 }}
            </span>
            <span class="heat-item-style1-num1-2"> 人 </span>
          </div>
        </div>
      </div>
      <div class="averticalBart"></div>
      <div class="heat-lay-item" style="cursor: pointer" @click="jinrhaop(0)">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">今日差评数</div>
          <br />
          <div class="heat-item-style1-num1">
            <span class="heat-item-style1-num1-1 c4">
              {{ info.badNum || 0 }}
            </span>
            <span class="heat-item-style1-num1-2"> 单 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="horizontalLine"></div>
    <div class="heat-lay-flex">
      <div class="heat-lay-item" style="width: 190%">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">今日新增维修单</div>
          <div class="duplicatelay">
            <div
              id="weixiu1"
              style="cursor: pointer"
              @click="openPopUp($event, 'weixiu1', '今日新增维修单-维修（单）')"
            >
              <div class="heat-item-style1-num1-2">维修</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.newwx || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 单 </span>
              </div>
            </div>
            <div
              id="qingxi1"
              style="cursor: pointer"
              @click="openPopUp($event, 'qingxi1', '今日新增清洗单-清洗（单）')"
            >
              <div class="heat-item-style1-num1-2">清洗</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.newqx || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 单 </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="averticalBarb"></div>
      <div class="heat-lay-item" style="width: 190%">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">今日完工维修单</div>
          <div class="duplicatelay">
            <div
              id="weixiu2"
              style="cursor: pointer"
              @click="openPopUp($event, 'weixiu2', '今日完工维修单-维修（单）')"
            >
              <div class="heat-item-style1-num1-2">维修</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.completewx || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 单 </span>
              </div>
            </div>
            <div
              id="qingxi2"
              style="cursor: pointer"
              @click="openPopUp($event, 'qingxi2', '今日完工清洗单-清洗（单）')"
            >
              <div class="heat-item-style1-num1-2">清洗</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c1">
                  {{ info.completeqx || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 单 </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="averticalBarb"></div>
      <div class="heat-lay-item" style="width: 190%">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">维修未完工累计</div>
          <div class="duplicatelay">
            <div
              id="weixiu3"
              style="cursor: pointer"
              @click="openPopUp($event, 'weixiu3', '维修未完工累计-维修（单）')"
            >
              <div class="heat-item-style1-num1-2">维修</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c4">
                  {{ info.openwx || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 单 </span>
              </div>
            </div>
            <div
              id="qingxi3"
              style="cursor: pointer"
              @click="openPopUp($event, 'qingxi3', '清洗未完工累计-清洗（单）')"
            >
              <div class="heat-item-style1-num1-2">清洗</div>
              <div class="heat-item-style1-num1">
                <span class="heat-item-style1-num1-1 c4">
                  {{ info.openqx || 0 }}
                </span>
                <span class="heat-item-style1-num1-2"> 单 </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="averticalBarb"></div>
      <div class="heat-lay-item">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">今日回收工单</div>
          <br />
          <div class="heat-item-style1-num1">
            <span class="heat-item-style1-num1-1 c1">
              {{ info.hsgd || 0 }}
            </span>
            <span class="heat-item-style1-num1-2"> 单 </span>
          </div>
        </div>
      </div>
      <div class="averticalBarb"></div>
      <!-- style="cursor: pointer" @click="jinrhaop(1)" -->
      <div class="heat-lay-item">
        <div class="heat-item-style1">
          <div class="heat-item-style1-title">今日好评率</div>
          <br />
          <div class="heat-item-style1-num1">
            <span class="heat-item-style1-num1-1 c2">
              {{ info.goodRate || 0 }}
            </span>
            <span class="heat-item-style1-num1-2"> % </span>
          </div>
        </div>
      </div>
    </div>
    <Teleport to="body">
      <popUp
        :show="show"
        :top="top"
        :left="left"
        :title="title"
        :item="item"
        :style="style"
        @col="
          (bool) => {
            show = bool;
            if (!bool) {
              style = {};
              item = [];
              renshu = false;
              timeId2 && timeId2();
            }
          }
        "
      >
        <div v-if="renshu">
          <div v-for="(item, index) in renshuliev" :key="index">
            <br />
            <div style="display: flex; justify-content: space-between">
              <span class="subheading">{{ item.typeName }}:</span
              ><span class="jinge">{{ item.numbers }}人</span>
            </div>
          </div>
        </div>
      </popUp>
      <el-dialog
        width="70%"
        v-model="dialogVisible"
        :before-close="handleClose"
        style="z-index: 10000000000"
      >
        <table border="1" style="width: 100%">
          <thead>
            <tr>
              <th>类型</th>
              <th>工单号</th>
              <th>网点名称</th>
              <th>主服务人员编号</th>
              <th>主服务人员名称</th>
              <th>评价述</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in cplie" :key="index">
              <td class="xiaolie">{{ item.type }}</td>
              <td class="xiaolie300">{{ item.workerOrderNo }}</td>
              <td class="xiaolie320">{{ item.websitName }}</td>
              <td class="xiaolie150">{{ item.wonumber }}</td>
              <td class="xiaolie120">{{ item.woname }}</td>
              <td>{{ item.tips }}</td>
            </tr>
          </tbody>
        </table>
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="pageNum"
          :total="total"
          @current-change="currentChange"
        />
      </el-dialog>
    </Teleport>
  </div>
</template>

<script>
import {
  getCommonly,
  getQuery15,
  getQuery22,
  getQuery23_1,
} from '@/api/bigView.js';
import popUp from '@/components/pop-up.vue';
import bus from '@/utils/eventBus.js';
export default {
  components: { popUp },
  data() {
    return {
      info: {},
      show: false,
      top: 0,
      left: 0,
      title: '',
      item: [],
      timeId2: null,
      renshu: false,
      style: {},
      renshuliev: [],
      dialogVisible: false,
      cplie: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      typenum: null,
    };
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible) {
        bus.emit('autoplay', false);
      } else {
        bus.emit('autoplay', true);
      }
    },
  },
  mounted() {
    this.timeId = getCommonly((res) => {
      this.info = res.data;
    }, 60000);
  },
  beforeUnmount() {
    this.timeId();
  },
  methods: {
    currentChange(a) {
      this.pageNum = a;
      this.jinrhaop();
    },
    jinrhaop() {
      getQuery23_1({
        params: {
          typeCode: 0,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        if (!this.dialogVisible) {
          this.dialogVisible = true;
        }
        this.total = res.data.total;
        this.cplie = res.data.records;
      });
    },
    handleClose() {
      this.pageNum = 1;
      this.dialogVisible = false;
    },
    openPopUp(e, id, title) {
      if (id === 'jinrshifucq') {
        getQuery22((res) => {
          var { height, top, left } = document
            .getElementById(id)
            .getBoundingClientRect();
          this.renshuliev = res.data;
          this.title = title;
          this.top = top + height;
          this.left = left;
          this.show = true;
          this.renshu = true;
          this.style = {
            width: 'auto',
          };
        });
      } else {
        this.timeId2 = getQuery15((res) => {
          var list = [
            { city: '广州公司' },
            { city: '佛山公司' },
            { city: '天猫优品' },
          ];
          var keys = [];
          var gz = [];
          var fs = [];
          res.data.map((item) => {
            var { city, ...obj } = item;
            var ind = ~['广州市', '清远市', '韶关市'].indexOf(city)
              ? 0
              : ~['佛山市', '肇庆市', '云浮市'].indexOf(city)
              ? 1
              : 2;
            if (ind === 0) {
              gz.push(item);
            }
            if (ind === 1) {
              fs.push(item);
            }
            keys = Object.keys(obj);
            keys.map((key) => {
              if (list[ind][key] === undefined) {
                list[ind][key] = 0;
              }
              list[ind][key] += obj[key];
            });
          });
          list.map((obj) => {
            if (Object.keys(obj).length === 1) {
              keys.map((key) => {
                obj[key] = 0;
              });
            }
          });
          gz.sort((a, b) => {
            return (
              ['广州市', '清远市', '韶关市'].indexOf(a.city) -
              ['广州市', '清远市', '韶关市'].indexOf(b.city)
            );
          });
          fs.sort((a, b) => {
            return (
              ['佛山市', '肇庆市', '云浮市'].indexOf(a.city) -
              ['佛山市', '肇庆市', '云浮市'].indexOf(b.city)
            );
          });
          this.item = [list[0], ...gz, list[1], ...fs, list[2]].map((item) => {
            var obj = {
              area: item.city,
            };
            if (id === 'lingshou1') {
              obj.amount = item.insMacNewR;
              obj.bills = item.insNewR;
            } else if (id === 'lingshou2') {
              obj.amount = item.insMacFinishR;
              obj.bills = item.insFinishR;
            } else if (id === 'lingshou3') {
              obj.amount = item.insMacOpenR;
              obj.bills = item.insOpenR;
            } else if (id === 'gongcheng1') {
              obj.amount = item.insMacNewP;
              obj.bills = item.insNewP;
            } else if (id === 'gongcheng2') {
              obj.amount = item.insMacFinishP;
              obj.bills = item.insFinishP;
            } else if (id === 'gongcheng3') {
              obj.amount = item.insMacOpenP;
              obj.bills = item.insOpenP;
            } else if (id === 'weixiu1') {
              obj.amount = item.repNew;
            } else if (id === 'weixiu2') {
              obj.amount = item.repFinish;
            } else if (id === 'weixiu3') {
              obj.amount = item.repOpen;
            } else if (id === 'qingxi1') {
              obj.amount = item.repNewqx;
            } else if (id === 'qingxi2') {
              obj.amount = item.repFinishqx;
            } else if (id === 'qingxi3') {
              obj.amount = item.repOpenqx;
            }
            return obj;
          });
          var { height, top, left } = document
            .getElementById(id)
            .getBoundingClientRect();
          this.title = title;
          this.top = top + height;
          this.left = left;
          this.show = true;
        }, 100000000000000);
      }
    },
  },
};
</script>

<style scoped lang="scss">
table {
  width: 100%;
  border-collapse: collapse;
}

table caption {
  font-size: 2em;
  font-weight: bold;
  margin: 1em 0;
}

th,
td {
  border: 1px solid #ddd;
  text-align: center;
  padding: 6px 6px;
}

table thead tr {
  background-color: #008c8c;
  color: #fff;
}

table tbody tr:nth-child(odd) {
  background-color: #eee;
}

table tbody tr:hover {
  background-color: #ccc;
}
table tfoot tr td {
  text-align: right;
  padding-right: 20px;
}
.xiaolie {
  width: 80px;
}
.xiaolie300 {
  width: 220px;
}
.xiaolie320 {
  width: 280px;
}
.xiaolie150 {
  width: 150px;
}
.xiaolie120 {
  width: 100px;
}
.heat-lay {
  width: 100%;
  height: 220px;
  & > div:nth-child(1) {
    height: 128px;
  }
  & > div:nth-child(3) {
    height: 82px;
  }
  .horizontalLine {
    width: 100%;
    height: 1px;
    border-radius: 2px;
    background: linear-gradient(to right, #082570, #156ccf, #156ccf, #082570);
  }
  .averticalBart {
    height: 100%;
    min-width: 1px;
    border-radius: 2px;
    background: linear-gradient(#082570, #156ccf);
  }

  .averticalBarb {
    height: 100%;
    min-width: 1px;
    border-radius: 2px;
    background: linear-gradient(#156ccf, #082570);
  }
  .heat-lay-item {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px;
  }
  .heat-lay-flex {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .heat-item-style1-num1-2 {
    font-size: 16px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    // margin-left: 10px;
    color: #8ab1dc;
  }
  .heat-item-style1 {
    width: 100%;
    height: 100%;
    .heat-item-style1-title {
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      // text-align: center;
      color: #8ab1dc;
      margin-bottom: 5px;
    }
    .heat-item-style1-num1,
    .heat-item-style1-num2 {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: flex-end;
      .heat-item-style1-num1-1 {
        font-size: 22px;
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 500;
      }

      .heat-item-style1-num2-1 {
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
      }
      .heat-item-style1-num2-2 {
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #8ab1dc;
      }
      .c1 {
        color: #3be9ff;
      }
      .c2 {
        color: #3ce783;
      }
      .c3 {
        color: #e15960;
      }
      .c4 {
        color: #ff9900;
      }
    }
  }
  .duplicatelay {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    & > div {
      width: 100%;
    }
  }
}
.subheading {
  font-size: 18px;
  font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  font-weight: 500;
  color: #93b0d8;
  line-height: 25px;
  text-align: right;
}
.jinge {
  font-size: 18px;
  font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  font-weight: 500;
  color: #ffffff;
  line-height: 25px;
  text-align: right;
}
</style>