1

src/components/Hotel/HotelRankingDetails.vue

+<style>
+  .restaurantList .clearfix:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+  }
+
+  .restaurantList .hotelResource {
+    width: 100%;
+    min-height: 500px;
+    margin-top: 20px;
+  }
+
+  .restaurantList .resourceList {
+    width: 215px;
+    height: 330px;
+    background-color: #fff;
+    border: 1px dashed #ededed;
+    border-radius: 4px;
+    margin: 0 20px 20px 0;
+    font-size: 12px;
+    color: #333333;
+    float: left;
+  }
+
+  .restaurantList .resourceList:hover {
+    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+    transition: all linear 0.5s;
+  }
+
+  .restaurantList .reTopInfo {
+    width: 100%;
+    height: 123px;
+    position: relative;
+  }
+
+  .restaurantList .reTopInfo img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  .restaurantList .resTypeList {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+
+  .restaurantList .resTypeList span {
+    display: inline-block;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: #fff;
+    margin-right: 10px;
+  }
+
+  .restaurantList .L1 {
+    background-color: #e95252;
+  }
+
+  .restaurantList .L2 {
+    background-color: #47bf8c;
+  }
+
+  .restaurantList .L3 {
+    background-color: #2aaef2;
+  }
+
+  .restaurantList .L4 {
+    background-color: #9cf;
+  }
+
+  .restaurantList .L5 {
+    background-color: #00c6ff;
+    margin-top: 5px;
+  }
+
+  .restaurantList .starSu {
+    position: absolute;
+    bottom: 8px;
+    right: 10px;
+  }
+
+  .restaurantList .sushe {
+    background-color: #ffc800;
+    display: inline-block;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: #fff;
+  }
+
+  .restaurantList .hotelTitle {
+    margin: 10px 16px 0 16px;
+    font-size: 14px;
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .restaurantList .brandList {
+    margin: 16px 0;
+  }
+
+  .restaurantList .brandList i {
+    position: relative;
+    top: 2px;
+  }
+
+  .restaurantList .brand {
+    float: left;
+    width: 49%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .restaurantList .dayNum {
+    float: right;
+    text-align: center;
+    width: 50%;
+  }
+
+  .restaurantList .iconfont {
+    margin-right: 5px;
+  }
+
+  .restaurantList .dieline {
+    color: #2aaef2;
+    font-size: 14px;
+    top: 1px !important;
+  }
+
+  .restaurantList .AddressInner {
+    float: right;
+    width: 160px;
+    height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .restaurantList .btnList {
+    text-align: center;
+  }
+
+  .restaurantList .hotelBtn {
+    width: 80px;
+    height: 28px;
+    background: #f76f6f;
+    border-radius: 14px;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .restaurantList .hotelBtn:first-child {
+    margin-right: 19px;
+  }
+
+  .restaurantList .w150 .el-input {
+    width: 150px !important;
+  }
+
+  .restaurantList .SupportCount {
+    color: #4bca81;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 5px 5px 0;
+    display: inline-block;
+  }
+
+  .restaurantList .dayNumber {
+    color: #2aaef2;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 5px 5px 5px;
+    display: inline-block;
+  }
+
+  .restaurantList .line {
+    float: left;
+    width: 1px;
+    height: 35px;
+    background-color: #ededed;
+    margin-top: 6px;
+  }
+
+  .restaurantList .foodList {
+    display: inline-block;
+    padding: 1px 5px;
+    background-color: #ff9c00;
+    color: #fff;
+    margin-right: 6px;
+    border-radius: 2px;
+  }
+
+  .restaurantList .foodList:last-child {
+    margin-right: 0;
+  }
+
+  .restaurantList .delScien {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: none;
+  }
+
+  .restaurantList .delScien:hover {
+    color: #f76f6f;
+    cursor: pointer;
+  }
+
+  .restaurantList .resourceList:hover .delScien {
+    display: block;
+  }
+
+  .restaurantList .comCursorUrl {
+    cursor: pointer;
+  }
+  .restaurantList .el-button{
+    width: 29px;
+}
+  /* 餐厅列表 */
+
+</style>
+<template>
+  <div class="flexOne restaurantList">
+   
+    <el-card class="box-card" style="margin-bottom:20px;">
+  
+    <p style="margin-bottom:5px;">酒店名称：<span style="color:#f56c6c">{{$route.query.NewHotelName}}</span> </p>
+    <p>酒店真实名称：<span style="color:#f56c6c">{{$route.query.NewHotelRealName}}</span></p>
+ 
+</el-card>
+    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%;min-height:450px;" v-loading="loading" >
+      <el-table-column prop="TCNUM" label="团号">
+        <template slot-scope="scope">
+          {{scope.row.TCNUM}}（ {{scope.row.TCID}}）
+        </template>
+      </el-table-column>
+      <el-table-column prop="DMCNum" label="地接团号">
+      </el-table-column>
+      <el-table-column prop="TeamTypeStr" label="团队类型">
+      </el-table-column>
+      <el-table-column prop="StartDate" label="出发日期">
+      </el-table-column>
+      <el-table-column prop="UseDate" label="使用日期">
+      </el-table-column>
+      <el-table-column prop="DNum" label="自然单间/标准间/大床间/三人间/司导间/不占床（间）">
+        <template slot-scope="scope">
+          <span style="text-decoration:underline;cursor:pointer;" type="info" @click="goUrl('roomReservationsDetails',scope.row)"> 
+            {{(scope.row.DJNum>0&&scope.row.DJUnitPrice>0)?scope.row.DJNum:0}}
+          /{{(scope.row.BZNum>0&&scope.row.BZUnitPrice>0)?scope.row.BZNum:0}}
+         /{{(scope.row.DCNum>0&&scope.row.DCUnitPrice>0)?scope.row.DCNum:0}}
+         /{{(scope.row.SRNum>0&&scope.row.SRUnitPrice>0)?scope.row.SRNum:0}}
+         /{{(scope.row.SDNum>0&&scope.row.SDUnitPrice>0)?scope.row.SDNum:0}}
+         /{{(scope.row.BZCNum>0&&scope.row.BZCUnitPrice>0)?scope.row.BZCNum:0}}
+        </span>
+         
+        </template>
+      </el-table-column>
+      <el-table-column prop="DUnitPrice" label="自然单间/标准间/大床间/三人间/司导间/不占床价格">
+        <template slot-scope="scope">
+          <span style="text-decoration:underline;cursor:pointer;" type="info"  @click="goUrl('roomReservationsDetails',scope.row)">
+          {{(scope.row.DJNum>0&&scope.row.DJUnitPrice>0)?scope.row.DJUnitPrice:0}}
+          /{{(scope.row.BZNum>0&&scope.row.BZUnitPrice>0)?scope.row.BZUnitPrice:0}}
+         /{{(scope.row.DCNum>0&&scope.row.DCUnitPrice>0)?scope.row.DCUnitPrice:0}}
+         /{{(scope.row.SRNum>0&&scope.row.SRUnitPrice>0)?scope.row.SRUnitPrice:0}}
+         /{{(scope.row.SDNum>0&&scope.row.SDUnitPrice>0)?scope.row.SDUnitPrice:0}}
+         /{{(scope.row.BZCNum>0&&scope.row.BZCUnitPrice>0)?scope.row.BZCUnitPrice:0}}
+        </span>
+        </template>
+      </el-table-column>
+     
+     
+    </el-table>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
+      :page-size="msg.pageSize" layout="total,prev, pager, next, jumper" :total="msg.total" v-if="tableData.length>0"></el-pagination>
+    <!-- <div v-if="tableData.length===0">{{$t('system.content_noData')}}</div> -->
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      
+        total: 0,
+        currentPage: 1,
+        provinceList: "",
+        tableData: [],
+        CompanyList: [], //出团公司
+        teamList: [],//团队类型
+        loading: true,
+        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
+        msg: {
+          pageIndex: 1,
+          pageSize: 10,
+          QStartDate: "",
+          QEndDate: "",
+          OutBranchId: -1,
+          PlaceID: 0,
+          TeamType: -1,
+          HotelId:0,
+        },
+        pickerBeginDateBefore: {
+          disabledDate: time => {
+            if (this.msg.QEndDate == null) {
+              return false;
+            } else {
+              let endTime = new Date(this.msg.QEndDate);
+              return endTime.getTime() < time.getTime();
+            }
+          }
+        },
+        pickerBeginDateAfter: {
+          disabledDate: time => {
+            let startTime = new Date(this.msg.QStartDate);
+            return startTime.getTime() >= time.getTime();
+          }
+        },
+      };
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.selectResource();
+      },
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      getTeamList() {
+        //出团公司
+        this.apipost(
+          "travel_GetTeamTypeEnumList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.teamList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      //根据省份获取城市
+      getProvinceList(ID, type) {
+        let msg = {
+          Id: ID
+        };
+        if (type == 1) {
+          this.msg.QProvince = "";
+          this.msg.QCity = "";
+          this.msg.QDistrict = "";
+        } else if (type == 2) {
+          this.msg.QCity = "";
+          this.msg.QDistrict = "";
+        } else if (type == 3) {
+          this.msg.QDistrict = "";
+        }
+        // if (this.msg.QCountry !== "") {
+          this.apipost(
+            "dict_post_Destination_GetChildList",
+            msg,
+            res => {
+              if (type == 1) {
+                this.provinceList = res.data.data;
+              } else if (type == 2) {
+                this.cityList = res.data.data;
+              } else if (type == 3) {
+                this.district = res.data.data;
+              }
+            },
+            err => {}
+          );
+        // }
+      },
+     
+      //获取餐厅使用排行列表
+      selectResource() {
+        this.loading = true;
+        this.apipost(
+          "journeyorder_post_GetHotelPageRankingDetailList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.total = res.data.data.count;
+              this.tableData = res.data.data.pageData;
+              this.msg.total = res.data.data.count;
+            }
+          },
+          null
+        );
+      },
+      //roomReservationsDetails?id=21252&TCNUM=KIXMU07240721D&flightTotal=22&GuestNum=24&NewCombinationNum=PIC-WH-0721&LeaderName=李明珠&GuideName=冯克松&IsCombine=false&NewTCIDs=21252&LineId=14&blank=y&tab=订房详情
+      goUrl(path, item) {
+        this.$router.push({
+          path: path,
+          query: {
+            id: item.TCID,
+            NewTCIDs: item.TCID,
+            TCNUM:item.TCNUM,
+            NewCombinationNum:item.DMCNum,
+            LeaderName:item.LeaderName,
+            GuideName:item.GuideName,
+            IsCombine:false,
+            LineId:item.LineId,
+            blank: 'y',
+            tab: '订房详情'
+          }
+        });
+      },
+     
+      getSellorCompany() {
+        //出团公司
+        this.apipost(
+          "sellorder_post_GetBranchList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.CompanyList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+    },
+    created() {
+      let userInfo = this.getLocalStorage();
+      this.EmployeeId = userInfo.EmployeeId;
+      if (this.$route.query.QStartDate) {
+        this.msg.QStartDate = this.$route.query.QStartDate;
+      }
+      if (this.$route.query.QEndDate) {
+        this.msg.QEndDate = this.$route.query.QEndDate;
+      }
+      if (this.$route.query.OutBranchId) {
+        this.msg.OutBranchId = this.$route.query.OutBranchId;
+      }
+      if (this.$route.query.PlaceID) {
+        this.msg.PlaceID = this.$route.query.PlaceID;
+      }
+      if (this.$route.query.TeamType) {
+        this.msg.TeamType = this.$route.query.TeamType;
+      }
+      if (this.$route.query.HotelID) {
+        this.msg.HotelId = this.$route.query.HotelID;
+      }
+     
+      // var myDate = new Date();
+      // var nowDate =  myDate.getFullYear() +  "-" +  parseInt(myDate.getMonth() ) + "-" +  myDate.getDate();
+      // var nowEDate =  myDate.getFullYear() +  "-" +  parseInt(myDate.getMonth() + 1) + "-" +  myDate.getDate();
+      // this.msg.QStartDate = nowDate;
+      // this.msg.QEndDate = nowEDate;
+    },
+    mounted() {
+      // this.getProvinceList(651,1);
+      // this.getTeamList();
+      // this.getSellorCompany();
+      this.selectResource();
+    }
+  };
+
+</script>

src/components/Hotel/HotelRankingList.vue

+<style>
+  .restaurantList .clearfix:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+  }
+
+  .restaurantList .hotelResource {
+    width: 100%;
+    min-height: 500px;
+    margin-top: 20px;
+  }
+
+  .restaurantList .resourceList {
+    width: 215px;
+    height: 330px;
+    background-color: #fff;
+    border: 1px dashed #ededed;
+    border-radius: 4px;
+    margin: 0 20px 20px 0;
+    font-size: 12px;
+    color: #333333;
+    float: left;
+  }
+
+  .restaurantList .resourceList:hover {
+    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+    transition: all linear 0.5s;
+  }
+
+  .restaurantList .reTopInfo {
+    width: 100%;
+    height: 123px;
+    position: relative;
+  }
+
+  .restaurantList .reTopInfo img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  .restaurantList .resTypeList {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+
+  .restaurantList .resTypeList span {
+    display: inline-block;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: #fff;
+    margin-right: 10px;
+  }
+
+  .restaurantList .L1 {
+    background-color: #e95252;
+  }
+
+  .restaurantList .L2 {
+    background-color: #47bf8c;
+  }
+
+  .restaurantList .L3 {
+    background-color: #2aaef2;
+  }
+
+  .restaurantList .L4 {
+    background-color: #9cf;
+  }
+
+  .restaurantList .L5 {
+    background-color: #00c6ff;
+    margin-top: 5px;
+  }
+
+  .restaurantList .starSu {
+    position: absolute;
+    bottom: 8px;
+    right: 10px;
+  }
+
+  .restaurantList .sushe {
+    background-color: #ffc800;
+    display: inline-block;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: #fff;
+  }
+
+  .restaurantList .hotelTitle {
+    margin: 10px 16px 0 16px;
+    font-size: 14px;
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .restaurantList .brandList {
+    margin: 16px 0;
+  }
+
+  .restaurantList .brandList i {
+    position: relative;
+    top: 2px;
+  }
+
+  .restaurantList .brand {
+    float: left;
+    width: 49%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .restaurantList .dayNum {
+    float: right;
+    text-align: center;
+    width: 50%;
+  }
+
+  .restaurantList .iconfont {
+    margin-right: 5px;
+  }
+
+  .restaurantList .dieline {
+    color: #2aaef2;
+    font-size: 14px;
+    top: 1px !important;
+  }
+
+  .restaurantList .AddressInner {
+    float: right;
+    width: 160px;
+    height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .restaurantList .btnList {
+    text-align: center;
+  }
+
+  .restaurantList .hotelBtn {
+    width: 80px;
+    height: 28px;
+    background: #f76f6f;
+    border-radius: 14px;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .restaurantList .hotelBtn:first-child {
+    margin-right: 19px;
+  }
+
+  .restaurantList .w150 .el-input {
+    width: 150px !important;
+  }
+
+  .restaurantList .SupportCount {
+    color: #4bca81;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 5px 5px 0;
+    display: inline-block;
+  }
+
+  .restaurantList .dayNumber {
+    color: #2aaef2;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 5px 5px 5px;
+    display: inline-block;
+  }
+
+  .restaurantList .line {
+    float: left;
+    width: 1px;
+    height: 35px;
+    background-color: #ededed;
+    margin-top: 6px;
+  }
+
+  .restaurantList .foodList {
+    display: inline-block;
+    padding: 1px 5px;
+    background-color: #ff9c00;
+    color: #fff;
+    margin-right: 6px;
+    border-radius: 2px;
+  }
+
+  .restaurantList .foodList:last-child {
+    margin-right: 0;
+  }
+
+  .restaurantList .delScien {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: none;
+  }
+
+  .restaurantList .delScien:hover {
+    color: #f76f6f;
+    cursor: pointer;
+  }
+
+  .restaurantList .resourceList:hover .delScien {
+    display: block;
+  }
+
+  .restaurantList .comCursorUrl {
+    cursor: pointer;
+  }
+
+  .restaurantList .el-button {
+    width: 29px;
+  }
+  
+  /* 餐厅列表 */
+
+</style>
+<template>
+  <div class="flexOne restaurantList">
+    <div class="query-box">
+      <ul>
+        <li>
+          <span>
+            <em>{{$t('system.quety_area')}}</em>
+            <el-select v-model="msg.PlaceID" class="w150" filterable :placeholder="$t('hotel.hotel_province')">
+              <el-option :label="$t('pub.unlimitedSel')" :value="0"> </el-option>
+              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+
+        <li>
+          <span>
+            <em>使用日期</em>
+            <el-date-picker class="w150" type="date" v-model="msg.QStartDate" :picker-options="pickerBeginDateBefore"
+              value-format="yyyy-MM-dd" placeholder></el-date-picker>
+            <el-date-picker class="w150" type="date" v-model="msg.QEndDate" :picker-options="pickerBeginDateAfter"
+              value-format="yyyy-MM-dd" placeholder></el-date-picker>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>团队类型</em>
+            <el-select class="multiple_input" v-model="msg.TeamType" filterable placeholder="请选择团队类型">
+              <el-option :label="$t('pub.unlimitedSel')" :value="-1"> </el-option>
+              <el-option v-for='item in teamList' :key="item.ID" :label="item.Name" :value="item.ID">
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>出团公司</em>
+            <el-select class=" multiple_input" placeholder="请选择团队类型" v-model="msg.OutBranchId">
+              <el-option :label="$t('pub.unlimitedSel')" :value="-1"> </el-option>
+              <el-option v-for="item in CompanyList" :key="item.id" :label="item.bName" :value="item.id"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <button class="hollowFixedBtn" type="button"
+            @click="resetPageIndex(),selectResource()">{{$t('pub.searchBtn')}}</button>
+        </li>
+      </ul>
+    </div>
+    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%;min-height:450px;" v-loading="loading">
+      <el-table-column prop="NewHotelName" label="酒店名称">
+        <template slot-scope="scope">
+          <template v-if="scope.row.URL&&scope.row.URL.length>5">
+            <a  style="text-decoration:underline;cursor:pointer;" :href="scope.row.URL" target="_blank"
+           >{{scope.row.NewHotelName}}</a>
+          </template>
+          <template v-else>
+            {{scope.row.NewHotelName}}
+          </template>
+        
+        </template>
+      </el-table-column>
+      <el-table-column prop="NewHotelRealName" label="酒店真实名称">
+        <template slot-scope="scope">
+          <template v-if="scope.row.URL&&scope.row.URL.length>5">
+            <a  style="text-decoration:underline;cursor:pointer;"
+            :href="scope.row.URL" target="_blank">{{scope.row.NewHotelRealName}}</a>
+          </template>
+          <template v-else>
+            {{scope.row.NewHotelRealName}}
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column width="150" prop="UserNum" label="使用次数">
+        <template slot-scope="scope">
+          <a style="color:blue;text-decoration:underline;cursor:pointer;"
+            @click="goToDetailsUrl(scope.row,0)">{{scope.row.UserNum}}</a>
+        </template>
+      </el-table-column>
+      <el-table-column width="150" prop="PriceNormalUseNum" label="常规团使用次数">
+        <template slot-scope="scope">
+          <a style="color:blue;text-decoration:underline;cursor:pointer;"
+            @click="goToDetailsUrl(scope.row,1)">{{scope.row.PriceNormalUseNum}}</a>
+        </template>
+      </el-table-column>
+      <el-table-column width="150" prop="PriceNormalPeopleNum" label="常规团使用人数">
+        <template slot-scope="scope">
+          <a style="color:blue;text-decoration:underline;cursor:pointer;"
+            @click="goToDetailsUrl(scope.row,1)">{{scope.row.PriceNormalPeopleNum}}</a>
+        </template>
+      </el-table-column>
+      <el-table-column width="150" prop="PricePacketGroupUseNum" label="小包团使用次数">
+        <template slot-scope="scope">
+          <a style="color:blue;text-decoration:underline;cursor:pointer;"
+            @click="goToDetailsUrl(scope.row,2)">{{scope.row.PricePacketGroupUseNum}}</a>
+        </template>
+      </el-table-column>
+      <el-table-column width="150" prop="PricePacketGroupPeopleNum" label="小包团使用人数">
+        <template slot-scope="scope">
+          <a style="color:blue;text-decoration:underline;cursor:pointer;"
+            @click="goToDetailsUrl(scope.row,2)">{{scope.row.PricePacketGroupPeopleNum}}</a>
+        </template>
+      </el-table-column>
+      <el-table-column width="150" prop="PriceOneDayTripUseNum" label="当地游团使用次数">
+        <template slot-scope="scope">
+          <a style="color:blue;text-decoration:underline;cursor:pointer;"
+            @click="goToDetailsUrl(scope.row,3)">{{scope.row.PriceOneDayTripUseNum}}</a>
+        </template>
+      </el-table-column>
+      <el-table-column width="150" prop="PriceOneDayTripPeopleNum" label="当地游团使用人数">
+        <template slot-scope="scope">
+          <a style="color:blue;text-decoration:underline;cursor:pointer;"
+            @click="goToDetailsUrl(scope.row,3)">{{scope.row.PriceOneDayTripPeopleNum}}</a>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
+      :page-size="msg.pageSize" layout="total,prev, pager, next, jumper" :total="msg.total" v-if="tableData.length>0">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        provinceList: "",
+        tableData: [],
+        CompanyList: [], //出团公司
+        teamList: [], //团队类型
+        loading: true,
+        msg: {
+          pageIndex: 1,
+          pageSize: 10,
+          QStartDate: "",
+          QEndDate: "",
+          OutBranchId: -1,
+          PlaceID: 0,
+          TeamType: -1,
+          DiningId: 0,
+          currentPage: 1,
+          total: 0,
+        },
+        pickerBeginDateBefore: {
+          disabledDate: time => {
+            if (this.msg.QEndDate == null) {
+              return false;
+            } else {
+              let endTime = new Date(this.msg.QEndDate);
+              return endTime.getTime() < time.getTime();
+            }
+          }
+        },
+        pickerBeginDateAfter: {
+          disabledDate: time => {
+            let startTime = new Date(this.msg.QStartDate);
+            return startTime.getTime() >= time.getTime();
+          }
+        },
+      };
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.selectResource();
+      },
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.msg.currentPage = 1;
+      },
+      getTeamList() {
+        //出团公司
+        this.apipost(
+          "travel_GetTeamTypeEnumList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.teamList = res.data.data;
+            }
+          });
+      },
+      //根据省份获取城市
+      getProvinceList(ID, type) {
+        let msg = {
+          Id: ID
+        };
+        if (type == 1) {
+          this.msg.QProvince = "";
+          this.msg.QCity = "";
+          this.msg.QDistrict = "";
+        }
+        this.apipost(
+          "dict_post_Destination_GetChildList",
+          msg,
+          res => {
+            if (type == 1) {
+              this.provinceList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      //获取餐厅使用排行列表
+      selectResource() {
+        this.loading = true;
+        this.apipost(
+          "journeyorder_post_GetHotelPageRankingList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.total = res.data.data.count;
+              this.tableData = res.data.data.pageData;
+              this.msg.total = res.data.data.count;
+            }
+          },
+          null
+        );
+      },
+      //跳转到详情
+      goToDetailsUrl(item, type) {
+        let path = 'HotelRankingDetails';
+        var qMsg = {
+          NewHotelName: item.NewHotelName,
+          NewHotelRealName: item.NewHotelRealName,
+          QStartDate: this.msg.QStartDate,
+          QEndDate: this.msg.QEndDate,
+          OutBranchId: this.msg.OutBranchId,
+          PlaceID: this.msg.PlaceID,
+          TeamType: -1,
+          HotelID: item.NewHotelID,
+          blank: 'y',
+          tab: '餐厅使用详情'
+        };
+        //总次数
+        if (type == 0) {
+          qMsg.TeamType = -1;
+        }
+        //常规团
+        else if (type == 1) {
+          qMsg.TeamType = 0;
+        }
+        //小包团
+        else if (type == 2) {
+          qMsg.TeamType = 1;
+        }
+        //当地游
+        else if (type == 3) {
+          qMsg.TeamType = 2;
+        }
+        this.$router.push({
+          path: path,
+          query: qMsg
+        });
+      },
+
+      goToGuWangUrl(url){
+        this.$router.push({
+          path: url,
+        });
+      },
+      getSellorCompany() {
+        //出团公司
+        this.apipost(
+          "sellorder_post_GetBranchList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.CompanyList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+    },
+    created() {
+      var myDate = new Date();
+      var nowDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth()) + "-" + myDate.getDate();
+      var nowEDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth() + 1) + "-" + myDate.getDate();
+      this.msg.QStartDate = nowDate;
+      this.msg.QEndDate = nowEDate;
+    },
+    mounted() {
+      this.getProvinceList(651, 1);
+      this.getTeamList();
+      this.getSellorCompany();
+      this.selectResource();
+    }
+  };
+
+</script>

src/router/config.js

@@ -1521,6 +1521,22 @@ export default {
                 title: '餐厅套餐查询'
               },
             },
+            {
+              path: '/HotelRankingDetails', //酒店排行详情
+              name: 'HotelRankingDetails',
+              component: resolve => require(['@/components/Hotel/HotelRankingDetails'], resolve),
+              meta: {
+                title: '酒店使用排行详情'
+              },
+            },
+            {
+              path: '/HotelRankingList', //酒店排行
+              name: 'HotelRankingList',
+              component: resolve => require(['@/components/Hotel/HotelRankingList'], resolve),
+              meta: {
+                title: '酒店使用排行'
+              },
+            },
             {
               path: '/restaurantRankingList', //餐厅使用排行
               name: 'restaurantRankingList',