新增酒店统计

src/components/Hotel/roomStatic.vue

+<style>
+  /* 日期样式开始 */
+  .roomStatic .month ul {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    background: #e95252;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  .roomStatic .year-month {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .roomStatic .year-month>input {
+    width: 100px;
+    float: left;
+  }
+
+  .roomStatic .arrow {
+    padding: 10px;
+    font-style: normal;
+    cursor: pointer;
+  }
+
+  .roomStatic .monthminus {
+    position: absolute;
+    left: 0px;
+    top: 15px;
+  }
+
+  .roomStatic .monthadd {
+    position: absolute;
+    right: 21px;
+    top: 15px;
+  }
+
+  .roomStatic .month ul li {
+    font-size: 18px;
+    color: #fff;
+    position: relative;
+    display: inline-block;
+    letter-spacing: 3px;
+  }
+
+  .roomStatic .month ul li i {
+    font-size: 22px;
+    color: #ff7e7e;
+    cursor: pointer;
+  }
+
+  .roomStatic .month ul li>input {
+    text-align: center;
+  }
+
+  .roomStatic .weekdays {
+    margin: 0;
+    padding: 3px 0;
+    background-color: #3fa783;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    color: #fff;
+    justify-content: space-around;
+  }
+
+  .roomStatic .weekdays li {
+    display: inline-block;
+    width: 14.2857%;
+    text-align: center;
+  }
+
+  .roomStatic .days {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border-left: 1px solid #dddddd;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    justify-content: space-around;
+  }
+
+  .roomStatic .days>li {
+    list-style-type: none;
+    width: 14.2857%;
+    height: 100px;
+    text-align: center;
+    position: relative;
+    font-size: 12px;
+    float: left;
+    color: #000;
+    box-sizing: border-box;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .roomStatic .days li>div {
+    height: 112px;
+    width: 100%;
+    overflow-y: auto;
+    text-align: left;
+  }
+
+  .roomStatic .days li>div>p {
+    border-bottom: 1px dashed #ccc;
+    min-height: 28px;
+    line-height: 28px;
+    width: 100%;
+    text-indent: 10px;
+  }
+
+  .roomStatic .currentInput {
+    width: 120px;
+    height: 30px;
+    border-radius: 17px;
+    outline: none;
+    border: none;
+    color: #fff;
+    background: transparent;
+    font-size: 18px;
+  }
+
+  .roomStatic .days li .other-month {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 24px;
+    height: 17px;
+    font-size: 12px;
+    line-height: 17px;
+    background-color: #cccccc;
+    color: #fff;
+  }
+
+  .roomStatic .ckStyle {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    background: #ccc;
+    color: #000;
+  }
+
+  .roomStatic .ckStyleOther {
+    background: #dddddd !important;
+    font-weight: normal !important;
+    color: #999;
+  }
+
+  .roomStatic .Owe_Room {
+    color: #e95252;
+  }
+
+  .roomStatic .Used_room {
+    color: #13b0ae;
+  }
+
+  .roomStatic .otherMoth {
+    background: #f2f2f2;
+  }
+
+  .roomStatic .title {
+    height: 14px;
+    line-height: 14px;
+    border-left: 3px solid #e95252;
+    font-size: 16px;
+    color: #333;
+    text-indent: 10px;
+    margin: 20px 0;
+  }
+
+  .roomStatic .hasStock_1 {
+    color: #FFFFFF;
+    background-color: #ff3737;
+  }
+
+  .roomStatic .hasStock_2 {
+    background-color: #ff99cc;
+  }
+
+  .roomStatic .hasStock_3 {
+    background-color: #bcd6ee;
+
+  }
+
+  .roomStatic .hasStock_4 {
+    background-color: #DDDDDD;
+  }
+
+  .roomStatic .hasStock_5 {
+    background-color: #02F78E;
+  }
+
+  .roomStatic .hasStock_6 {
+    background-color: #808000;
+  }
+
+  .roomStatic .stock1 {
+    color: red;
+  }
+
+  .roomStatic .stock2 {
+    color: green;
+  }
+
+  /* 日期样式结束*/
+
+</style>
+<template>
+  <div class="flexOne roomStatic">
+    <div class="query-box Plan_Query">
+      <ul>
+        <li>
+          <span><em>{{$t('admin.admin_company')}}</em>
+            <el-select filterable v-model='msg.OutBranchId' :placeholder="$t('pub.unlimitedSel')">
+              <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
+              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li style="margin-right:10px;">
+          <button class="normalBtn" type="button" @click="GetHoltelInventory()">{{$t('pub.searchBtn')}}</button>
+          <input type="button" class="normalBtn" :value="$t('ground.xiazaidangejiud')" @click="DownLoadroomStatic()" />
+        </li>
+      </ul>
+    </div>
+    <div class="title">
+      {{$t('ground.jiudiantjg')}}
+      <span class="Owe_Room">{{TotalInventory}}</span> {{$t('ground.jiandangqsy')}}
+      <span class="Owe_Room">{{UseInventory}}</span> {{$t('ground.jianzhanbi')}}
+      <span class="Owe_Room">
+        <template v-if="TotalInventory>0">
+          {{ ((UseInventory/TotalInventory)*100).toFixed(2)}}
+        </template>
+        <template v-else>
+          0
+        </template>
+      </span> %.
+      &nbsp;&nbsp;
+      <span class="hasStock_1" style="padding:2px 4px;border-radius:5px">{{$t('ground.hongri')}}</span>
+      <span class="hasStock_2" style="padding:2px 4px;border-radius:5px">{{$t('ground.wangji')}}</span>
+      <span class="hasStock_3" style="padding:2px 4px;border-radius:5px">{{$t('ground.pingji')}}</span>
+      <span class="hasStock_4" style="padding:2px 4px;border-radius:5px">{{$t('ground.danji')}}</span>
+      <span class="hasStock_5" style="padding:2px 4px;border-radius:5px">{{$t('ground.tebiejia')}}</span>
+      <span class="hasStock_6" style="padding:2px 4px;border-radius:5px">{{$t('objFill.xingqianri')}}</span>
+    </div>
+    <div class="month">
+      <ul>
+        <li>
+          <i class="el-icon-caret-left monthminus" @click="currentYear-=1,getDateString(),initCalendar(dateString)"></i>
+          <input type="text" disabled="disabled" v-model="currentYear" class="currentInput"
+            @input="getDateString(),initCalendar(dateString)">{{$t('pub.year')}}
+          <i class="el-icon-caret-right monthadd" @click="currentYear+=1,getDateString(),initCalendar(dateString)"></i>
+        </li>
+        <li>
+          <i class="el-icon-caret-left monthminus" @click="pickPre(currentYear,currentMonth)"></i>
+          <input type="text" disabled="disabled" v-model="currentMonth" class="currentInput"
+            @input="getDateString(),initCalendar(dateString)">{{$t('pub.month')}}
+          <i class="el-icon-caret-right monthadd" @click="pickNext(currentYear,currentMonth)"></i>
+        </li>
+      </ul>
+    </div>
+
+    <ul class="weekdays">
+      <li>{{$t('hotel.hotel_Monday')}}</li>
+      <li>{{$t('hotel.hotel_Tuesday')}}</li>
+      <li>{{$t('hotel.hotel_Wednesday')}}</li>
+      <li>{{$t('hotel.hotel_Thursday')}}</li>
+      <li>{{$t('hotel.hotel_Friday')}}</li>
+      <li>{{$t('hotel.hotel_Saturday')}}</li>
+      <li>{{$t('hotel.hotel_Sunday')}}</li>
+    </ul>
+    <ul class="days clearfix" v-loading="msg.loading">
+      <li v-for="(dayItem,index) in days" :key="`d_`+index">
+        <p class="ckStyle" :class="{ckStyleOther:dayItem.day.getMonth()+1 != currentMonth}">{{dayItem.day.getDate()}}
+        </p>
+        <div v-if="dayItem.dayValue">
+          <p style="word-break:breakall;" :class="stockColor(subItem.InventoryType)"
+            v-for="(subItem,subIndex) in dayItem.dayValue" :key="`d_`+index+`s_`+subIndex">{{subItem.HotelName}}
+            ({{$t('op.Zong')}}: {{subItem.Inventory}} &nbsp;&nbsp;
+            <a :title="$t('objFill.v101.hote.dianjtzddfgl')" v-if="subItem.UseInventory>0"
+              @click="goUrl('roomSure',subItem,dayItem.DayStr,'订房管理')"
+              style="cursor:pointer;text-decoration:underline;"
+              :class="subItem.InventoryType==4 ? 'stock1' : 'stock2'">{{$t('hotel.hotel_roomUsed')}}:
+              {{subItem.UseInventory}}</a>
+            <span v-else>{{$t('hotel.hotel_roomUsed')}}: {{subItem.UseInventory}}</span>
+            )
+          </p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        msg: {
+          Year: 0,
+          Month: 0,
+          HotelId: 10200,
+          //只查询日本
+          Country: "0",
+          Province: 0,
+          City: 0,
+          loading: false,
+          OutBranchId: -1,
+          //供应商编号
+          Supplier: 0,
+        },
+        //分公司列表
+        companyList: [],
+        currentDay: 1,
+        currentMonth: 1,
+        currentYear: 1970,
+        currentWeek: 1,
+        days: [],
+        //每天的机位库存
+        DayData: [],
+        //总库存
+        TotalInventory: 0,
+        //使用库存
+        UseInventory: 0,
+      };
+    },
+    methods: {
+      getBranchList() {
+        let userInfo = this.getLocalStorage();
+        this.apipost('admin_get_BranchGetList', {
+          RB_Group_Id: userInfo.RB_Group_id,
+          Status: 0,
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.companyList = res.data.data;
+          }
+        })
+      },
+      stockColor: function (type) {
+        //红日
+        if (type === 1) {
+          return 'hasStock_1'
+        }
+        //旺季
+        else if (type === 2) {
+          return 'hasStock_2'
+        }
+        //平季
+        else if (type === 3) {
+          return 'hasStock_3'
+        } //淡季
+        else if (type === 4) {
+          return 'hasStock_4'
+        }
+        //特别价
+        else if (type === 5) {
+          return 'hasStock_5'
+        }
+      },
+      //调整到订房管理
+      goUrl(path, obj, dateStr, name) {
+        this.$router.push({
+          path: path,
+          query: {
+            hotelId: obj.HotelId,
+            dateStr: dateStr,
+            blank: "y",
+            tab: name
+          }
+        });
+      },
+      //格式化日期
+      getDateString: function () {
+        this.dateString = this.$calendarUtils.formatDate(
+          this.currentYear,
+          this.currentMonth,
+          1
+        );
+        this.GetHoltelInventory();
+      },
+      initCalendar: function (cur) {
+        var newDays = this.$calendarUtils.createCalendar(cur);
+        this.currentDay = newDays.CurrentDay;
+        this.currentYear = newDays.CurrentYear;
+        this.currentMonth = newDays.CurrentMonth;
+        this.currentWeek = newDays.CurrentWeek;
+        this.days.length = 0;
+        var dateArray = newDays.DayArray;
+        for (var i = 0; i < dateArray.length; i++) {
+          var d = dateArray[i].day;
+          var dayobject = {};
+          dayobject.day = d;
+          this.days.push(dayobject);
+        }
+      },
+      //点击左箭头切换年月
+      pickPre: function (year, month) {
+        var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
+        d.setDate(0);
+        this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
+        this.initCalendar(
+          this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
+        );
+        this.GetHoltelInventory();
+      },
+      //点击右箭头切换年月
+      pickNext: function (year, month) {
+        var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
+        d.setDate(35);
+        this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
+        this.initCalendar(
+          this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
+        );
+        this.GetHoltelInventory();
+      },
+      //点击获取酒店库存数据
+      GetHoltelInventory() {
+        this.msg.loading = true;
+        this.msg.Year = this.currentYear;
+        this.msg.Month = this.currentMonth;
+        this.DayData = [];
+        this.apipost(
+          "hotelreport_get_GetHotelPriceMonthStatisticsExt",
+          this.msg,
+          res => {
+            this.msg.loading = false;
+            this.DayData = res.data.data;
+            this.UseInventory = 0;
+            this.TotalInventory = 0;
+            this.days.forEach(dayItem => {
+              let d = dayItem.day;
+              dayItem.dayValue = [];
+              let myDate = this.$calendarUtils.formatDate(
+                d.getFullYear(),
+                d.getMonth() + 1,
+                d.getDate()
+              );
+              for (var j = 0; j < this.DayData.length; j++) {
+                if (this.DayData[j].DayStr == myDate) {
+                  dayItem.dayValue = this.DayData[j].SubList;
+                  dayItem.DayStr = this.DayData[j].DayStr;
+                  this.DayData[j].SubList.forEach(subItem => {
+                    this.TotalInventory = parseFloat(this.TotalInventory) + parseFloat(subItem.Inventory);
+                    this.UseInventory = parseFloat(this.UseInventory) + parseFloat(subItem.UseInventory);
+                  });
+                }
+              }
+            });
+            this.$forceUpdate();
+          },
+          err => {}
+        );
+      },
+      //Excel下载
+      DownLoadroomStatic() {
+        if (this.msg.HotelId > 0) {
+          this.msg.loading = true;
+          let qMsg = {
+            queryMsg: this.msg,
+            uid: this.getLocalStorage().EmployeeId
+          };
+          let fileName = this.$t('objFill.v101.hote.jiudiantj') + this.$commonUtils.getCurrentDate() + ".xls";
+          this.GetLocalFile("hotel_get_downloadHotelSalesBoard", qMsg, fileName,
+            res => {
+              this.msg.loading = false;
+            });
+        } else {
+          this.Info(this.$t('objFill.v101.hote.qingxzyxzdjd'));
+        }
+      },
+    },
+    created() {
+      this.getBranchList();
+    },
+    mounted() {
+      let myDate = new Date();
+      this.currentYear = myDate.getFullYear();
+      this.currentMonth = myDate.getMonth() + 1;
+      this.msg.Year = this.currentYear;
+      this.msg.Month = this.currentDay;
+      this.initCalendar();
+      this.GetHoltelInventory();
+    }
+  };
+</script>
\ No newline at end of file

src/components/Hotel/roomSure.vue

@@ -109,7 +109,11 @@
 
         <el-table-column :label="$t('leader.leader_Guide')" prop="GuideName" width="150">
           <template #default="{row}">
-            <span v-if="row.isFirst">{{row.parent.GuideName}}({{row.parent.GuideSpareTel}})</span>
+            <span v-if="row.isFirst">{{row.parent.GuideName}}
+              <template v-if="row.parent.GuideSpareTel&&row.parent.GuideSpareTel!=''">
+                ({{row.parent.GuideSpareTel}})
+              </template>
+            </span>
           </template>
         </el-table-column>
 
@@ -284,7 +288,7 @@
         // 需要合并的列（根据上面 el-table-column 的顺序）：0..8 以及最后一列动作 (共 10 列)
         // 我们只按列属性判断，合并那些基于父级显示的列
         const mergeCols = ['DMCNum', 'TCNUM', 'OutBranchName', 'LeaderName', 'GuideName', 'LtName', 'seat', 'UseTime',
-          'NewHotelName', 'actions','StartDate'
+          'NewHotelName', 'actions', 'StartDate'
         ];
         if (row.isFirst && mergeCols.includes(column.property)) {
           return [span, 1];
@@ -458,14 +462,10 @@
         parseInt(myDate.getMonth() + 1) +
         "-" +
         myDate.getDate();
-      if (this.$route.query.hotelId) {
-        this.msg.HotelId = this.$route.query.hotelId;
-      }
-      if (this.$route.query.dateStr) {
-        this.msg.DateStr = this.$route.query.dateStr;
-      }
-      if (this.$route.query.hotelId || this.$route.query.dateStr) {
-        this.msg.StartDate = "";
+
+      if (this.$route.query.dateStr && this.$route.query.dateStr != '') {
+        this.msg.StartDate = this.$route.query.dateStr;
+        this.msg.EndDate = this.$route.query.dateStr
       } else {
         this.msg.StartDate = nowDate;
       }
@@ -473,7 +473,6 @@
         this.msg.LineId = 14;
         this.getLineTeamList();
       }
-      //this.GetHotelList();
       this.getList();
     },
   }

src/router/config.js

@@ -1476,6 +1476,14 @@ export default {
               meta: {
                 title: '房型确认'
               },
+            },
+                     {
+              path: '/roomStatic', //订房统计
+              name: 'roomStatic',
+              component: resolve => require(['@/components/Hotel/roomStatic'], resolve),
+              meta: {
+                title: '订房统计'
+              },
             },
             {
               path: '/roomSure', //订房确认