Bläddra i källkod

更新备注,2019.10.21

zhuxinbo 5 år sedan
förälder
incheckning
aed1ceca4c
3 ändrade filer med 698 tillägg och 697 borttagningar
  1. 1 0
      src/views/dashboard/Analysis.vue
  2. 296 296
      src/views/modules/appad/AdAnalysis.vue
  3. 401 401
      src/views/modules/yard/YardList.vue

+ 1 - 0
src/views/dashboard/Analysis.vue

@@ -137,6 +137,7 @@
 </template>
 
 <script>
+
 import ChartCard from '@/components/ChartCard'
 import ACol from 'ant-design-vue/es/grid/Col'
 import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'

+ 296 - 296
src/views/modules/appad/AdAnalysis.vue

@@ -1,297 +1,297 @@
-<template>
-  <div class="page-header-index-wide">
-<!--    <a-row :gutter="24">-->
-<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-<!--        <chart-card :loading="loading" title="总销售额" total="¥126,560">-->
-<!--          <a-tooltip title="指标说明" slot="action">-->
-<!--            <a-icon type="info-circle-o"/>-->
-<!--          </a-tooltip>-->
-<!--          <div>-->
-<!--            <trend flag="up" style="margin-right: 16px;">-->
-<!--              <span slot="term">周同比</span>-->
-<!--              12%-->
-<!--            </trend>-->
-<!--            <trend flag="down">-->
-<!--              <span slot="term">日同比</span>-->
-<!--              11%-->
-<!--            </trend>-->
-<!--          </div>-->
-<!--          <template slot="footer">日均销售额<span>¥ 234.56</span></template>-->
-<!--        </chart-card>-->
-<!--      </a-col>-->
-<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-<!--        <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">-->
-<!--          <a-tooltip title="指标说明" slot="action">-->
-<!--            <a-icon type="info-circle-o"/>-->
-<!--          </a-tooltip>-->
-<!--          <div>-->
-<!--            <mini-area/>-->
-<!--          </div>-->
-<!--          <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>-->
-<!--        </chart-card>-->
-<!--      </a-col>-->
-<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-<!--        <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">-->
-<!--          <a-tooltip title="指标说明" slot="action">-->
-<!--            <a-icon type="info-circle-o"/>-->
-<!--          </a-tooltip>-->
-<!--          <div>-->
-<!--            <mini-bar :height="40"/>-->
-<!--          </div>-->
-<!--          <template slot="footer">转化率 <span>60%</span></template>-->
-<!--        </chart-card>-->
-<!--      </a-col>-->
-<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-<!--        <chart-card :loading="loading" title="运营活动效果" total="78%">-->
-<!--          <a-tooltip title="指标说明" slot="action">-->
-<!--            <a-icon type="info-circle-o"/>-->
-<!--          </a-tooltip>-->
-<!--          <div>-->
-<!--            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8"/>-->
-<!--          </div>-->
-<!--          <template slot="footer">-->
-<!--            <trend flag="down" style="margin-right: 16px;">-->
-<!--              <span slot="term">同周比</span>-->
-<!--              12%-->
-<!--            </trend>-->
-<!--            <trend flag="up">-->
-<!--              <span slot="term">日环比</span>-->
-<!--              80%-->
-<!--            </trend>-->
-<!--          </template>-->
-<!--        </chart-card>-->
-<!--      </a-col>-->
-<!--    </a-row>-->
-    <a-row>
-      <a-col :span="24">
-        <a-card :loading="loading" :bordered="false" title="今日新增" :style="{ marginTop: '24px' }">
-          <a-row>
-            <a-col :span="6">
-              <head-info title="广告主" :content="advertiserTodayCount"></head-info>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="广告封面" :content="adTodayCount"></head-info>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="广告视频" :content="videoTodayCount"></head-info>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="推广品" :content="productTodayCount"></head-info>
-            </a-col>
-          </a-row>
-        </a-card>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="24">
-        <a-card :loading="loading" :bordered="false" title="数据总量" :style="{ marginTop: '24px' }">
-          <a-row>
-            <a-col :span="6">
-              <head-info title="广告主" :content="advertiserAllCount"></head-info>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="广告封面" :content="adAllCount"></head-info>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="广告视频" :content="videoAllCount"></head-info>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="推广品" :content="productAllCount"></head-info>
-            </a-col>
-          </a-row>
-        </a-card>
-      </a-col>
-    </a-row>
-
-    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
-      <div class="salesCard">
-        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
-          <div class="extra-wrapper" slot="tabBarExtraContent">
-            <div class="extra-item">
-              <a>今日</a>
-              <a>本周</a>
-              <a>本月</a>
-              <a>本年</a>
-            </div>
-            <a-range-picker :style="{width: '256px'}"/>
-          </div>
-          <a-tab-pane loading="true" tab="行业" key="1">
-            <a-row>
-              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar title="展示排行" :dataSource="barData"/>
-              </a-col>
-              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <rank-list title="热门素材排行榜" :list="rankList"/>
-              </a-col>
-            </a-row>
-          </a-tab-pane>
-          <a-tab-pane tab="推广品" key="2">
-            <a-row>
-              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar title="展示排行" :dataSource="barData"/>
-              </a-col>
-              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <rank-list title="热门素材排行榜" :list="rankList"/>
-              </a-col>
-            </a-row>
-          </a-tab-pane>
-          <a-tab-pane tab="广告主" key="3">
-            <a-row>
-              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar title="展示排行" :dataSource="barData"/>
-              </a-col>
-              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <rank-list title="热门素材排行榜" :list="rankList"/>
-              </a-col>
-            </a-row>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
-    </a-card>
-
-
-  </div>
-</template>
-
-<script>
-  import ChartCard from '@/components/ChartCard'
-  import ACol from "ant-design-vue/es/grid/Col"
-  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
-  import MiniArea from '@/components/chart/MiniArea'
-  import MiniBar from '@/components/chart/MiniBar'
-  import MiniProgress from '@/components/chart/MiniProgress'
-  import RankList from '@/components/chart/RankList'
-  import Bar from '@/components/chart/Bar'
-  import LineChartMultid from '@/components/chart/LineChartMultid'
-  import HeadInfo from '@/components/tools/HeadInfo.vue'
-  import {httpAction,getAction} from '@/api/manage'
-  import Trend from '@/components/Trend'
-  import {getLoginfo, getVisitInfo} from '@/api/api'
-
-  const rankList = []
-  for (let i = 0; i < 7; i++) {
-    rankList.push({
-      name: '白鹭岛 ' + (i + 1) + ' 号店',
-      total: 1234.56 - i * 100
-    })
-  }
-  const barData = []
-  for (let i = 0; i < 12; i += 1) {
-    barData.push({
-      x: `${i + 1}月`,
-      y: Math.floor(Math.random() * 1000) + 200
-    })
-  }
-  export default {
-    name: "Analysis",
-    components: {
-      ATooltip,
-      ACol,
-      ChartCard,
-      MiniArea,
-      MiniBar,
-      MiniProgress,
-      RankList,
-      Bar,
-      Trend,
-      LineChartMultid,
-      HeadInfo
-    },
-    data() {
-      return {
-        loading: true,
-        center: null,
-        advertiserTodayCount:0,
-        productTodayCount:0,
-        adTodayCount:0,
-        videoTodayCount:0,
-        advertiserAllCount:0,
-        productAllCount:0,
-        adAllCount:0,
-        videoAllCount:0,
-        rankList:[],
-        barData:[],
-        url:{
-          summaryToday:"/ctop/adcover/summary/today",
-          summaryAll:"/ctop/adcover/summary/all"
-        }
-    }
-    },
-    created() {
-      setTimeout(() => {
-        this.loading = !this.loading
-      }, 1000)
-      this.initDataInfo();
-    },
-    methods: {
-      initDataInfo() {
-        this.barData=barData
-        this.rankList=rankList
-
-        getAction(this.url.summaryToday).then((res) => {
-          if (res.success) {
-            console.log(res.result)
-          }
-        })
-        getAction(this.url.summaryAll).then(res => {
-          if (res.success) {
-            console.log(res.result)
-          }
-        })
-      },
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .circle-cust {
-    position: relative;
-    top: 28px;
-    left: -100%;
-  }
-
-  .extra-wrapper {
-    line-height: 55px;
-    padding-right: 24px;
-
-    .extra-item {
-      display: inline-block;
-      margin-right: 24px;
-
-      a {
-        margin-left: 24px;
-      }
-    }
-  }
-
-  /* 首页访问量统计 */
-  .head-info {
-    position: relative;
-    text-align: left;
-    padding: 0 32px 0 0;
-    min-width: 125px;
-
-    &.center {
-      text-align: center;
-      padding: 0 32px;
-    }
-
-    span {
-      color: rgba(0, 0, 0, .45);
-      display: inline-block;
-      font-size: .95rem;
-      line-height: 42px;
-      margin-bottom: 4px;
-    }
-
-    p {
-      line-height: 42px;
-      margin: 0;
-
-      a {
-        font-weight: 600;
-        font-size: 1rem;
-      }
-    }
-  }
+<template>
+  <div class="page-header-index-wide">
+<!--    <a-row :gutter="24">-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="总销售额" total="¥126,560">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <trend flag="up" style="margin-right: 16px;">-->
+<!--              <span slot="term">周同比</span>-->
+<!--              12%-->
+<!--            </trend>-->
+<!--            <trend flag="down">-->
+<!--              <span slot="term">日同比</span>-->
+<!--              11%-->
+<!--            </trend>-->
+<!--          </div>-->
+<!--          <template slot="footer">日均销售额<span>¥ 234.56</span></template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <mini-area/>-->
+<!--          </div>-->
+<!--          <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <mini-bar :height="40"/>-->
+<!--          </div>-->
+<!--          <template slot="footer">转化率 <span>60%</span></template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="运营活动效果" total="78%">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8"/>-->
+<!--          </div>-->
+<!--          <template slot="footer">-->
+<!--            <trend flag="down" style="margin-right: 16px;">-->
+<!--              <span slot="term">同周比</span>-->
+<!--              12%-->
+<!--            </trend>-->
+<!--            <trend flag="up">-->
+<!--              <span slot="term">日环比</span>-->
+<!--              80%-->
+<!--            </trend>-->
+<!--          </template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--    </a-row>-->
+    <a-row>
+      <a-col :span="24">
+        <a-card :loading="loading" :bordered="false" title="今日新增" :style="{ marginTop: '24px' }">
+          <a-row>
+            <a-col :span="6">
+              <head-info title="广告主" :content="advertiserTodayCount" bordered></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告封面" :content="adTodayCount" bordered></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告视频" :content="videoTodayCount" bordered></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="推广品" :content="productTodayCount" bordered></head-info>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card :loading="loading" :bordered="false" title="数据总量" :style="{ marginTop: '24px' }">
+          <a-row>
+            <a-col :span="6">
+              <head-info title="广告主" :content="advertiserAllCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告封面" :content="adAllCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告视频" :content="videoAllCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="推广品" :content="productAllCount"></head-info>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
+      <div class="salesCard">
+        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrapper" slot="tabBarExtraContent">
+            <div class="extra-item">
+              <a>今日</a>
+              <a>本周</a>
+              <a>本月</a>
+              <a>本年</a>
+            </div>
+            <a-range-picker :style="{width: '256px'}"/>
+          </div>
+          <a-tab-pane loading="true" tab="行业" key="1">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar title="展示排行" :dataSource="barData"/>
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                <rank-list title="热门素材排行榜" :list="rankList"/>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane tab="推广品" key="2">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar title="展示排行" :dataSource="barData"/>
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                <rank-list title="热门素材排行榜" :list="rankList"/>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane tab="广告主" key="3">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar title="展示排行" :dataSource="barData"/>
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                <rank-list title="热门素材排行榜" :list="rankList"/>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
+
+
+  </div>
+</template>
+
+<script>
+  import ChartCard from '@/components/ChartCard'
+  import ACol from "ant-design-vue/es/grid/Col"
+  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
+  import MiniArea from '@/components/chart/MiniArea'
+  import MiniBar from '@/components/chart/MiniBar'
+  import MiniProgress from '@/components/chart/MiniProgress'
+  import RankList from '@/components/chart/RankList'
+  import Bar from '@/components/chart/Bar'
+  import LineChartMultid from '@/components/chart/LineChartMultid'
+  import HeadInfo from '@/components/tools/HeadInfo.vue'
+  import {httpAction,getAction} from '@/api/manage'
+  import Trend from '@/components/Trend'
+  import {getLoginfo, getVisitInfo} from '@/api/api'
+
+  const rankList = []
+  for (let i = 0; i < 7; i++) {
+    rankList.push({
+      name: '白鹭岛 ' + (i + 1) + ' 号店',
+      total: 1234.56 - i * 100
+    })
+  }
+  const barData = []
+  for (let i = 0; i < 12; i += 1) {
+    barData.push({
+      x: `${i + 1}月`,
+      y: Math.floor(Math.random() * 1000) + 200
+    })
+  }
+  export default {
+    name: "Analysis",
+    components: {
+      ATooltip,
+      ACol,
+      ChartCard,
+      MiniArea,
+      MiniBar,
+      MiniProgress,
+      RankList,
+      Bar,
+      Trend,
+      LineChartMultid,
+      HeadInfo
+    },
+    data() {
+      return {
+        loading: true,
+        center: null,
+        advertiserTodayCount:0,
+        productTodayCount:0,
+        adTodayCount:0,
+        videoTodayCount:0,
+        advertiserAllCount:0,
+        productAllCount:0,
+        adAllCount:0,
+        videoAllCount:0,
+        rankList:[],
+        barData:[],
+        url:{
+          summaryToday:"/ctop/adcover/summary/today",
+          summaryAll:"/ctop/adcover/summary/all"
+        }
+    }
+    },
+    created() {
+      setTimeout(() => {
+        this.loading = !this.loading
+      }, 1000)
+      this.initDataInfo();
+    },
+    methods: {
+      initDataInfo() {
+        this.barData=barData
+        this.rankList=rankList
+
+        getAction(this.url.summaryToday).then((res) => {
+          if (res.success) {
+            console.log(res.result)
+          }
+        })
+        getAction(this.url.summaryAll).then(res => {
+          if (res.success) {
+            console.log(res.result)
+          }
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .circle-cust {
+    position: relative;
+    top: 28px;
+    left: -100%;
+  }
+
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+
+  /* 首页访问量统计 */
+  .head-info {
+    position: relative;
+    text-align: left;
+    padding: 0 32px 0 0;
+    min-width: 125px;
+
+    &.center {
+      text-align: center;
+      padding: 0 32px;
+    }
+
+    span {
+      color: rgba(0, 0, 0, .45);
+      display: inline-block;
+      font-size: .95rem;
+      line-height: 42px;
+      margin-bottom: 4px;
+    }
+
+    p {
+      line-height: 42px;
+      margin: 0;
+
+      a {
+        font-weight: 600;
+        font-size: 1rem;
+      }
+    }
+  }
 </style>

+ 401 - 401
src/views/modules/yard/YardList.vue

@@ -1,402 +1,402 @@
-<style>
-.ping .ant-modal-content .ant-modal-footer {
-  display: none !important;
-}
-.ant-modal-body {
-  padding-top: 0px;
-}
-li {
-  list-style-type: none;
-}
-</style>
-<style lang="scss" scoped>
-.actor-photo-list {
-  display: flex;
-  padding-left: 0;
-  li {
-    width: 25%;
-    margin: 10px;
-    position: relative;
-    height: 250px;
-    border: 1px solid #f2f2f2;
-    img,
-    video {
-      width: 100%;
-      margin-top: auto;
-      margin-bottom: auto;
-      top: 0;
-      bottom: 0;
-      position: absolute;
-      max-height: 250px;
-    }
-  }
-}
-</style>
-<template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="24">
-          <a-col :md="6" :sm="8">
-            <a-form-item label="场地名称">
-              <a-input placeholder="请输入场地名称" v-model="queryParam.buildingName"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button
-                type="primary"
-                @click="searchReset"
-                icon="reload"
-                style="margin-left: 8px"
-              >重置</a-button>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
-    </div>
-
-    <!-- table区域-begin -->
-    <div>
-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-      >
-        <!-- 字符串超长截取省略号显示-->
-        <span slot="esContent" slot-scope="text">
-          <j-ellipsis :value="text" :length="10" />
-        </span>
-
-        <span slot="action" slot-scope="text, record">
-          <a href="javascript:;" @click="handleDetail(record)">详情</a>
-          <a-divider type="vertical" />
-          <a-dropdown>
-            <a class="ant-dropdown-link">
-              更多
-              <a-icon type="down" />
-            </a>
-            <a-menu slot="overlay">
-              <a-menu-item v-show="show">
-                <a @click="handleEdit(record)">编辑</a>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
-          <a-divider type="vertical" />
-          <a href="javascript:;" @click="showDetail(record)">场地信息</a>
-        </span>
-      </a-table>
-    </div>
-    <!-- table区域-end -->
-
-    <!-- 表单区域 -->
-    <a-modal title="详情" v-model="detail" class="ping" :width="800">
-      <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
-        <a-tab-pane tab="场地图集" key="1" forceRender>
-          <div>
-            <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
-            <ul class="actor-photo-list">
-              <li v-for="(item,index) of photoList" :key="index">
-                <a-icon
-                  type="close-circle"
-                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
-                  @click="deteleImg(item.id)"
-                />
-                <img :src="item.photoUrl" alt />
-              </li>
-            </ul>
-          </div>
-          <div style="text-align:right">
-            <a-pagination
-              showQuickJumper
-              :total="total"
-              @change="pageChange"
-              :pageSize.sync="pageSize"
-            />
-          </div>
-        </a-tab-pane>
-        <a-tab-pane tab="场地视频" key="2">
-          <div>
-            <a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
-            <ul class="actor-photo-list">
-              <li v-for="(item,index) of videoList" :key="index">
-                <a-icon
-                  type="close-circle"
-                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
-                  @click="deteleVideo(item.id)"
-                />
-                <video
-                  class="video"
-                  :src="item.videoUrl"
-                  controls="controls"
-                  style="min-height:160px"
-                >您的浏览器不支持 video 标签。</video>
-              </li>
-            </ul>
-          </div>
-          <div style="text-align:right">
-            <a-pagination
-              showQuickJumper
-              :total="videoTotal"
-              @change="pageChange"
-              :pageSize.sync="pageSize"
-            />
-          </div>
-        </a-tab-pane>
-      </a-tabs>
-    </a-modal>
-
-    <!-- 新增图集 -->
-    <a-modal
-      v-model="addPhoto"
-      title="新增图集"
-      @ok="handleOk('photo')"
-      @cancel="handleCancel('photo')"
-    >
-      <upload-to-ali
-        style="margin:10px"
-        v-model="imageUrl"
-        :customDomain="customDomain"
-        preview
-        :region="region"
-        :bucket="bucket"
-        :accept="acceptImage"
-        :max="1"
-        :size="1024000"
-        :accessKeyId="accessKeyId"
-        :accessKeySecret="accessKeySecret"
-      ></upload-to-ali>
-    </a-modal>
-    <!-- 新增作品 -->
-    <a-modal
-      v-model="addVideo"
-      title="新增作品"
-      @ok="handleOk('video')"
-      @cancel="handleCancel('video')"
-    >
-      <upload-to-ali
-        style="margin:10px"
-        v-model="videoUrl"
-        :customDomain="customDomain"
-        preview
-        :region="region"
-        :bucket="bucket"
-        :accept="acceptVideo"
-        :max="1"
-        :size="1024000"
-        :accessKeyId="accessKeyId"
-        :accessKeySecret="accessKeySecret"
-      ></upload-to-ali>
-    </a-modal>
-
-    <yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
-  </a-card>
-</template>
-
-<script>
-import YardModal from './modules/YardModal'
-import yardDetail from './modules/yardDetail'
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import JEllipsis from '@/components/jeecg/JEllipsis'
-import UploadToAli from '@femessage/upload-to-ali'
-import { yardPhotoList, yardVideoList, yardPhotoDelete, yardVideoDelete, yardPhotoAdd, yardVideoAdd } from '@/api/yard'
-export default {
-  name: 'YardList',
-  mixins: [JeecgListMixin],
-  components: {
-    JEllipsis,
-    YardModal,
-    UploadToAli
-  },
-  data() {
-    return {
-      queryParam: {},
-      description: '场地管理',
-      // 新增修改按钮是否显示
-      show: true,
-      // 表头
-      columns: [
-        {
-          title: 'ID',
-          align: 'center',
-          dataIndex: 'id'
-        },
-        {
-          title: '场地名称',
-          align: 'center',
-          dataIndex: 'buildingName'
-        },
-        {
-          title: '地址',
-          align: 'center',
-          dataIndex: 'address'
-        },
-        {
-          title: '联系人',
-          align: 'center',
-          dataIndex: 'contactName'
-        },
-        {
-          title: '联系电话',
-          align: 'center',
-          dataIndex: 'contactMobile'
-        },
-        {
-          title: '创建时间',
-          align: 'center',
-          dataIndex: 'createTime'
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          align: 'center',
-          scopedSlots: { customRender: 'action' }
-        }
-      ],
-      url: {
-        list: '/ctop/yard/list'
-      },
-      detail: false,
-      indexDetail: '1',
-      currentPage: 0,
-      pageSize: 4,
-      videoTotal: 0,
-      photoTotal: 0,
-      total: 0,
-      videoList: [],
-      photoList: [],
-      imageUrl: '',
-      videoUrl: '',
-      customDomain: '',
-      region: 'oss-cn-beijing',
-      bucket: 'ctop-media',
-      acceptVideo: 'video/mpeg,video/mp4',
-      acceptImage: 'image/jpeg,image/jpg,image/png',
-      accessKeyId: 'LTAIbNbqWzSOklQV',
-      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
-      addPhoto: false,
-      addVideo: false,
-      confirmLoading:true
-    }
-  },
-
-  methods: {
-    showDetail(item) {
-      console.log(item)
-      this.detail = true
-      this.id = item.id
-      this.getPhoto()
-    },
-    callback(key) {
-      console.log(key)
-      if (key == '1') {
-        this.currentPage = 1
-        this.getPhoto()
-      } else if (key == '2') {
-        this.currentPage = 1
-        this.getVideo()
-      }
-    },
-    pageChange: function(page) {
-      console.log(page)
-      this.currentPage = page
-      if (this.indexDetail == '1') {
-        this.getPhoto()
-      } else if (this.indexDetail == '2') {
-        this.getVideo()
-      }
-    },
-    getPhoto() {
-      yardPhotoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
-        if (res.code == 0) {
-          console.log(res)
-          this.photoList = res.result.records
-          this.total = res.result.total
-        }
-      })
-    },
-    getVideo() {
-      yardVideoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
-        if (res.code == 0) {
-          console.log(res)
-          this.videoList = res.result.records
-          this.videoTotal = res.result.total
-        }
-      })
-    },
-    handleOk(type) {
-      const that = this
-      if (type == 'photo') {
-        yardPhotoAdd({ yardId: that.id, photoUrl: that.imageUrl })
-          .then(res => {
-            if (res.success) {
-              this.getPhoto()
-              this.handleCancel('photo')
-            } else {
-              that.$message.warning(res.message)
-            }
-          })
-          .finally(() => {
-            that.confirmLoading = false
-            that.handleCancel('photo')
-          })
-      } else {
-        yardVideoAdd({ yardId: that.id, videoUrl: that.videoUrl })
-          .then(res => {
-            if (res.success) {
-              this.getVideo()
-              this.handleCancel('video')
-            } else {
-              that.$message.warning(res.message)
-            }
-          })
-          .finally(() => {
-            that.confirmLoading = false
-            that.handleCancel('video')
-          })
-      }
-    },
-    handleCancel(type) {
-      if (type == 'photo') {
-        this.imageUrl = ''
-        this.addPhoto = false
-      } else {
-        this.videoUrl = ''
-        this.addVideo = false
-      }
-    },
-    deteleImg(id) {
-      yardPhotoDelete({ id: id }).then(res => {
-        if (res.code == 200) {
-          console.log(res)
-          this.getPhoto()
-        }
-      })
-    },
-    deteleVideo(id) {
-      yardVideoDelete({ id: id }).then(res => {
-        if (res.code == 200) {
-          console.log(res)
-          this.getVideo()
-        }
-      })
-    }
-  }
-}
-</script>
-<style  scoped>
-@import '~@assets/less/common.less';
+<style>
+.ping .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.ant-modal-body {
+  padding-top: 0px;
+}
+li {
+  list-style-type: none;
+}
+</style>
+<style lang="scss" scoped>
+.actor-photo-list {
+  display: flex;
+  padding-left: 0;
+  li {
+    width: 25%;
+    margin: 10px;
+    position: relative;
+    height: 250px;
+    border: 1px solid #f2f2f2;
+    img,
+    video {
+      width: 100%;
+      margin-top: auto;
+      margin-bottom: auto;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      max-height: 250px;
+    }
+  }
+}
+</style>
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="场地名称">
+              <a-input placeholder="请输入场地名称" v-model="queryParam.buildingName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+      >
+        <!-- 字符串超长截取省略号显示-->
+        <span slot="esContent" slot-scope="text">
+          <j-ellipsis :value="text" :length="10" />
+        </span>
+
+        <span slot="action" slot-scope="text, record">
+          <a href="javascript:;" @click="handleDetail(record)">详情</a>
+          <a-divider type="vertical" />
+          <a-dropdown>
+            <a class="ant-dropdown-link">
+              更多
+              <a-icon type="down" />
+            </a>
+            <a-menu slot="overlay">
+              <a-menu-item v-show="show">
+                <a @click="handleEdit(record)">编辑</a>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+          <a-divider type="vertical" />
+          <a href="javascript:;" @click="showDetail(record)">场地信息</a>
+        </span>
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <a-modal title="详情" v-model="detail" class="ping" :width="800">
+      <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
+        <a-tab-pane tab="场地图集" key="1" forceRender>
+          <div>
+            <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
+            <ul class="actor-photo-list">
+              <li v-for="(item,index) of photoList" :key="index">
+                <a-icon
+                  type="close-circle"
+                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
+                  @click="deteleImg(item.id)"
+                />
+                <img :src="item.photoUrl" alt />
+              </li>
+            </ul>
+          </div>
+          <div style="text-align:right">
+            <a-pagination
+              showQuickJumper
+              :total="total"
+              @change="pageChange"
+              :pageSize.sync="pageSize"
+            />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane tab="场地视频" key="2">
+          <div>
+            <a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
+            <ul class="actor-photo-list">
+              <li v-for="(item,index) of videoList" :key="index">
+                <a-icon
+                  type="close-circle"
+                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
+                  @click="deteleVideo(item.id)"
+                />
+                <video
+                  class="video"
+                  :src="item.videoUrl"
+                  controls="controls"
+                  style="min-height:160px"
+                >您的浏览器不支持 video 标签。</video>
+              </li>
+            </ul>
+          </div>
+          <div style="text-align:right">
+            <a-pagination
+              showQuickJumper
+              :total="videoTotal"
+              @change="pageChange"
+              :pageSize.sync="pageSize"
+            />
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </a-modal>
+
+    <!-- 新增图集 -->
+    <a-modal
+      v-model="addPhoto"
+      title="新增图集"
+      @ok="handleOk('photo')"
+      @cancel="handleCancel('photo')"
+    >
+      <upload-to-ali
+        style="margin:10px"
+        v-model="imageUrl"
+        :customDomain="customDomain"
+        preview
+        :region="region"
+        :bucket="bucket"
+        :accept="acceptImage"
+        :max="1"
+        :size="1024000"
+        :accessKeyId="accessKeyId"
+        :accessKeySecret="accessKeySecret"
+      ></upload-to-ali>
+    </a-modal>
+    <!-- 新增作品 -->
+    <a-modal
+      v-model="addVideo"
+      title="新增作品"
+      @ok="handleOk('video')"
+      @cancel="handleCancel('video')"
+    >
+      <upload-to-ali
+        style="margin:10px"
+        v-model="videoUrl"
+        :customDomain="customDomain"
+        preview
+        :region="region"
+        :bucket="bucket"
+        :accept="acceptVideo"
+        :max="1"
+        :size="1024000"
+        :accessKeyId="accessKeyId"
+        :accessKeySecret="accessKeySecret"
+      ></upload-to-ali>
+    </a-modal>
+
+    <yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
+  </a-card>
+</template>
+
+<script>
+import YardModal from './modules/YardModal'
+import yardDetail from './modules/yardDetail'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import UploadToAli from '@femessage/upload-to-ali'
+import { yardPhotoList, yardVideoList, yardPhotoDelete, yardVideoDelete, yardPhotoAdd, yardVideoAdd } from '@/api/yard'
+export default {
+  name: 'YardList',
+  mixins: [JeecgListMixin],
+  components: {
+    JEllipsis,
+    YardModal,
+    UploadToAli
+  },
+  data() {
+    return {
+      queryParam: {},
+      description: '场地管理',
+      // 新增修改按钮是否显示
+      show: true,
+      // 表头
+      columns: [
+        {
+          title: 'ID',
+          align: 'center',
+          dataIndex: 'id'
+        },
+        {
+          title: '场地名称',
+          align: 'center',
+          dataIndex: 'buildingName'
+        },
+        {
+          title: '地址',
+          align: 'center',
+          dataIndex: 'address'
+        },
+        {
+          title: '联系人',
+          align: 'center',
+          dataIndex: 'contactName'
+        },
+        {
+          title: '联系电话',
+          align: 'center',
+          dataIndex: 'contactMobile'
+        },
+        {
+          title: '创建时间',
+          align: 'center',
+          dataIndex: 'createTime'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/ctop/yard/list'
+      },
+      detail: false,
+      indexDetail: '1',
+      currentPage: 0,
+      pageSize: 4,
+      videoTotal: 0,
+      photoTotal: 0,
+      total: 0,
+      videoList: [],
+      photoList: [],
+      imageUrl: '',
+      videoUrl: '',
+      customDomain: '',
+      region: 'oss-cn-beijing',
+      bucket: 'ctop-media',
+      acceptVideo: 'video/mpeg,video/mp4',
+      acceptImage: 'image/jpeg,image/jpg,image/png',
+      accessKeyId: 'LTAIbNbqWzSOklQV',
+      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+      addPhoto: false,
+      addVideo: false,
+      confirmLoading:true
+    }
+  },
+
+  methods: {
+    showDetail(item) {
+      console.log(item)
+      this.detail = true
+      this.id = item.id
+      this.getPhoto()
+    },
+    callback(key) {
+      console.log(key)
+      if (key == '1') {
+        this.currentPage = 1
+        this.getPhoto()
+      } else if (key == '2') {
+        this.currentPage = 1
+        this.getVideo()
+      }
+    },
+    pageChange: function(page) {
+      console.log(page)
+      this.currentPage = page
+      if (this.indexDetail == '1') {
+        this.getPhoto()
+      } else if (this.indexDetail == '2') {
+        this.getVideo()
+      }
+    },
+    getPhoto() {
+      yardPhotoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
+        if (res.code == 0) {
+          console.log(res)
+          this.photoList = res.result.records
+          this.total = res.result.total
+        }
+      })
+    },
+    getVideo() {
+      yardVideoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
+        if (res.code == 0) {
+          console.log(res)
+          this.videoList = res.result.records
+          this.videoTotal = res.result.total
+        }
+      })
+    },
+    handleOk(type) {
+      const that = this
+      if (type == 'photo') {
+        yardPhotoAdd({ yardId: that.id, photoUrl: that.imageUrl })
+          .then(res => {
+            if (res.success) {
+              this.getPhoto()
+              this.handleCancel('photo')
+            } else {
+              that.$message.warning(res.message)
+            }
+          })
+          .finally(() => {
+            that.confirmLoading = false
+            that.handleCancel('photo')
+          })
+      } else {
+        yardVideoAdd({ yardId: that.id, videoUrl: that.videoUrl })
+          .then(res => {
+            if (res.success) {
+              this.getVideo()
+              this.handleCancel('video')
+            } else {
+              that.$message.warning(res.message)
+            }
+          })
+          .finally(() => {
+            that.confirmLoading = false
+            that.handleCancel('video')
+          })
+      }
+    },
+    handleCancel(type) {
+      if (type == 'photo') {
+        this.imageUrl = ''
+        this.addPhoto = false
+      } else {
+        this.videoUrl = ''
+        this.addVideo = false
+      }
+    },
+    deteleImg(id) {
+      yardPhotoDelete({ id: id }).then(res => {
+        if (res.code == 200) {
+          console.log(res)
+          this.getPhoto()
+        }
+      })
+    },
+    deteleVideo(id) {
+      yardVideoDelete({ id: id }).then(res => {
+        if (res.code == 200) {
+          console.log(res)
+          this.getVideo()
+        }
+      })
+    }
+  }
+}
+</script>
+<style  scoped>
+@import '~@assets/less/common.less';
 </style>