样式更改

src/components/byTable/index.vue

@@ -1,31 +1,16 @@
 <template>
   <div class="header-actions" v-if="getActionList.length != 0">
     <div class="overflow-box">
-      <el-button
-        v-for="(item, index) in getActionList"
-        :key="index"
-        :type="item.type || 'primary'"
-        :plain="item.plain ? item.plain : index != 0"
-        v-bind="getHeaderActions(item)"
-        @click="item.action"
-        :disabled="item.disabled || false"
-      >
+      <el-button v-for="(item, index) in getActionList" :key="index" :type="item.type || 'primary'" :plain="item.plain ? item.plain : index != 0"
+                 v-bind="getHeaderActions(item)" @click="item.action" :disabled="item.disabled || false">
         {{ item.text }}
       </el-button>
     </div>
   </div>
   <!-- statWarpHeight > 200 &&  -->
-  <div
-    class="stat-warp"
-    v-if="statConfig.length != 0"
-    :class="isMore ? 'show-more' : ''"
-  >
+  <div class="stat-warp" v-if="statConfig.length != 0" :class="isMore ? 'show-more' : ''">
     <div class="title">
-      <select
-        v-model="statSelectVal"
-        v-if="statConfig.length > 1"
-        @change="changeStatData"
-      >
+      <select v-model="statSelectVal" v-if="statConfig.length > 1" @change="changeStatData">
         <option :value="index" v-for="(i, index) in statConfig" :key="index">
           {{ i.label }}
         </option>
@@ -33,34 +18,21 @@
       <div v-if="statConfig.length === 1">{{ statConfig[0].label }}</div>
     </div>
     <!-- v-if="statWarpHeight > 200" -->
-    <div class="more-btn"  @click="isMore = !isMore" >
+    <div class="more-btn" @click="isMore = !isMore">
       <span>
         <i v-if="!isMore" class="iconfont icon-btn_xiala22"></i>
         <i v-else class="iconfont icon-btn_shouqi22"></i>
-        
+
       </span>
     </div>
     <ul id="statWarp">
-      <li
-        v-show="!i.data"
-        :class="'theme' + i.type"
-        v-for="(i, index) in statConfig[statSelectVal].data"
-        :key="index"
-        @click="i.click ? i.click(i, index) : ''"
-        :style="i.click ? 'cursor: pointer' : ''"
-      >
+      <li v-show="!i.data" :class="'theme' + i.type" v-for="(i, index) in statConfig[statSelectVal].data" :key="index"
+          @click="i.click ? i.click(i, index) : ''" :style="i.click ? 'cursor: pointer' : ''">
         <div class="label">{{ i.label }}</div>
         <div class="num">{{ i.num }}</div>
       </li>
-      <li
-        v-show="i.data"
-        v-for="(i, index) in statConfig[statSelectVal].data"
-        :key="index"
-        class="multi-data"
-        :class="'theme' + i.type"
-        @click="i.click ? i.click(i, index) : ''"
-        :style="i.click ? 'cursor: pointer' : ''"
-      >
+      <li v-show="i.data" v-for="(i, index) in statConfig[statSelectVal].data" :key="index" class="multi-data" :class="'theme' + i.type"
+          @click="i.click ? i.click(i, index) : ''" :style="i.click ? 'cursor: pointer' : ''">
         <div class="label">{{ i.label }}</div>
         <div class="num-warp">
           <div class="num-box" v-for="(j, jindex) in i.data" :key="jindex">
@@ -80,12 +52,7 @@
     </header>
     <div class="by-search" v-if="!hideSearch">
       <div style="display: flex">
-        <div
-          class="by-dropdown"
-          v-for="(i, index) in selectConfigCopy"
-          :key="i.prop"
-          style="margin-right: 10px"
-        >
+        <div class="by-dropdown" v-for="(i, index) in selectConfigCopy" :key="i.prop" style="margin-right: 10px">
           <div class="by-dropdown-title">
             {{
               pagination[i.prop]
@@ -98,19 +65,10 @@
             <i style="margin-left: 5px" class="iconfont icon-iconm_xialan1"></i>
           </div>
           <ul class="by-dropdown-lists">
-            <li
-              @click="searchItemSelct('all', i, index)"
-              v-if="i.isShowAll === false ? i.isShowAll : true"
-              style=""
-            >
+            <li @click="searchItemSelct('all', i, index)" v-if="i.isShowAll === false ? i.isShowAll : true" style="">
               {{ $t("common.all") }}
             </li>
-            <li
-              v-for="j in i.data"
-              :key="j.value"
-              @click="searchItemSelct(j, i)"
-              style=""
-            >
+            <li v-for="j in i.data" :key="j.value" @click="searchItemSelct(j, i)" style="">
               {{ j.label }}
             </li>
           </ul>
@@ -118,26 +76,11 @@
       </div>
 
       <div style="display: flex">
-        <el-input
-          :placeholder="$t('common.pleaseEnterKeywords')"
-          suffix-icon="search"
-          size="mini"
-          v-model="pagination.keyword"
-          @keyup.enter="searchFn"
-        >
+        <el-input :placeholder="$t('common.pleaseEnterKeywords')" suffix-icon="search" size="mini" v-model="pagination.keyword"
+                  @keyup.enter="searchFn">
         </el-input>
-        <el-button
-          type="primary"
-          style="margin-left: 10px"
-          size="default"
-          v-no-double-click="searchFn"
-          >{{ $t("common.search") }}</el-button
-        >
-        <div
-          class="more-icon"
-          @click="retrievalModalFn"
-          v-if="$attrs.onMoreSearch"
-        >
+        <el-button type="primary" style="margin-left: 10px" size="default" v-no-double-click="searchFn">{{ $t("common.search") }}</el-button>
+        <div class="more-icon" @click="retrievalModalFn" v-if="$attrs.onMoreSearch">
           <i class="iconfont icon-iconx_saixuan"></i>
         </div>
       </div>
@@ -147,52 +90,25 @@
         <slot />
       </div>
 
-      <el-table
-        ref="hocElTable"
-        
-        :data="source"
-        v-if="!hideTable"
-        style="width: 100%"
-        v-bind="$attrs"
-        v-on="tableEvents"
-        row-key="id"
-        lazy
-        :load="load"
-        :tree-props="{
+      <el-table ref="hocElTable" :data="source" v-if="!hideTable" style="width: 100%" v-bind="$attrs" v-on="tableEvents" row-key="id" lazy
+                :load="load" :tree-props="{
           children: 'children',
           hasChildren: 'hasChildren',
-        }"
-        :height="tableHeight"
-      >
-        <el-table-column
-          v-for="(item, index) in config"
-          :key="index"
-          v-bind="getAttrsValue(item)"
-          :type="item.type || ''"
-          :selectable="
+        }" :height="tableHeight">
+        <el-table-column v-for="(item, index) in config" :key="index" v-bind="getAttrsValue(item)" :type="item.type || ''" :selectable="
             (rowData, rowIndex) => isSelectable(rowData, rowIndex, item)
-          "
-        >
+          ">
           <template #default="scope" v-if="!item.type">
-            <slot
-              :name="item.attrs.slot"
-              :item="scope.row"
-              v-if="item.attrs.slot"
-            >
+            <slot :name="item.attrs.slot" :item="scope.row" v-if="item.attrs.slot">
               插槽占位符
             </slot>
             <div v-else-if="isFunction(getValue(scope, item))">
-              <component
-                :is="renderTypeList[getMatchRenderFunction(item)].target"
-                :cell-list="getValue(scope, item)()"
-                :row="scope.row"
-                :parent="getParent"
-                @click="
+              <component :is="renderTypeList[getMatchRenderFunction(item)].target" :cell-list="getValue(scope, item)()" :row="scope.row"
+                         :parent="getParent" @click="
                   ($event) => {
                     handleNativeClick(getAttrsValue(item), $event, item);
                   }
-                "
-              />
+                " />
             </div>
             <div v-else>
               {{ getValue(scope, item) }}
@@ -201,21 +117,10 @@
         </el-table-column>
       </el-table>
 
-      <el-row
-        v-if="!hidePagination"
-        class="table-pagination"
-        justify="end"
-        type="flex"
-      >
-        <el-pagination
-          background
-          layout="total, sizes, prev, pager, next, jumper"
-          :current-page="getPagination.pageNum"
-          :page-size="getPagination.pageSize"
-          :total="getPagination.total"
-          @size-change="handleSizeChange"
-          @current-change="handlePageChange"
-        />
+      <el-row v-if="!hidePagination" class="table-pagination" justify="end" type="flex">
+        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="getPagination.pageNum"
+                       :page-size="getPagination.pageSize" :total="getPagination.total" @size-change="handleSizeChange"
+                       @current-change="handlePageChange" />
       </el-row>
     </component>
   </div>
@@ -360,7 +265,7 @@ export default defineComponent({
     const changeStatData = () => {
       statWarpHeight.value = document.getElementById("statWarp").offsetHeight;
     };
-    
+
     let statWarpHeight = ref(0);
     watch(
       proxy.statConfig,
@@ -370,7 +275,7 @@ export default defineComponent({
           statWarpHeight.value =
             document.getElementById("statWarp").offsetHeight;
         }, 500);
-      }, 
+      },
       { immediate: true }
     );
     let statSelectVal = ref(0);
@@ -449,7 +354,7 @@ export default defineComponent({
       return isFn(fn);
     };
     const searchFn = (val) => {
-      if(props.loading) return;
+      if (props.loading) return;
       proxy.$emit(
         "getList",
         Object.assign(props.filterParams, {
@@ -597,9 +502,13 @@ export default defineComponent({
     font-size: 12px;
     line-height: 30px;
     text-align: center;
-    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
-    i{
-      color:#999;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.8) 100%
+    );
+    i {
+      color: #999;
     }
   }
   .title {

src/views/XMHJC/browsing/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="background-color: white;margin-top: 15px;margin-bottom: 15px;height: 50px">
+  <!-- <div style="background-color: white;margin-top: 15px;margin-bottom: 15px;height: 50px">
     <el-row :gutter="20">
       <el-col :span="6">
         <div style="margin-left: 30px">
@@ -17,24 +17,17 @@
         </div>
       </el-col>
     </el-row>
-  </div>
-  <div class="carousel">
+  </div> -->
+  <div class="carousel" style="padding:15px">
     <!-- <Banner /> -->
     <div class="content">
-      <byTable
-        :source="sourceList.data"
-        :pagination="sourceList.pagination"
-        :config="config"
-        :loading="loading"
-        highlight-current-row
-        :action-list="[
+      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :statConfig="statConfig" :config="config" :loading="loading"
+               highlight-current-row :action-list="[
           // {
           //   text: '添加轮播图',
           //   action: () => openModal('add'),
           // },
-        ]"
-        @moreSearch="moreSearch"
-        @get-list="getList">
+        ]" @moreSearch="moreSearch" @get-list="getList">
         <template #slotName="{ item }">
           {{ item.createTime }}
         </template>
@@ -45,15 +38,9 @@
         <template #dateRangeCreateTime>
           <el-row style="width: 100%">
             <el-col :span="8">
-              <el-date-picker
-                v-model="dateRange"
-                value-format="YYYY-MM-DD"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-              ></el-date-picker>
+              <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期"
+                              end-placeholder="结束日期"
+                              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
             </el-col>
           </el-row>
         </template>
@@ -73,8 +60,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import byTable from "@/components/byTable/index.vue";
 import byForm from "@/components/byForm/index.vue";
 import { computed, ref } from "vue";
-import {getDictOneByXmhjc, getFileList, getFileStr} from "@/api/XMHJC/common";
-import {findColumnArticleList, findMenuListByOpen} from "@/api/XMHJC/column";
+import { getDictOneByXmhjc, getFileList, getFileStr } from "@/api/XMHJC/common";
+import { findColumnArticleList, findMenuListByOpen } from "@/api/XMHJC/column";
 const loading = ref(false);
 const submitLoading = ref(false);
 const enableStatus = ref([]);
@@ -101,6 +88,30 @@ const statistic = ref({
   month: 3,
 });
 
+const statConfig = computed(() => [
+  {
+    label: "统计",
+    data: [
+      //一个卡牌多数据配置
+      {
+        label: "本日浏览量",
+        type: 2,
+        num: statistic.value.today,
+      },
+      {
+        label: "本周浏览量",
+        type: 1,
+        num: statistic.value.week,
+      },
+      {
+        label: "本月浏览量",
+        type: 3,
+        num: statistic.value.month,
+      },
+    ],
+  },
+]);
+
 let rules = ref({
   modules: [{ required: true, message: "请选择所属模块" }],
   title: [{ required: true, message: "请输入标题" }],
@@ -113,10 +124,10 @@ const { proxy } = getCurrentInstance();
 const config = computed(() => {
   return [
     {
-        attrs: {
-            label: "模块名称",
-            prop: "name",
-        },
+      attrs: {
+        label: "模块名称",
+        prop: "name",
+      },
       // render(type) {
       //   return proxy.dictValueLabel(type, carouselModules.value);
       // },
@@ -184,7 +195,7 @@ const config = computed(() => {
 let formData = reactive({
   data: {},
   treeData: [],
-  carouselUrlList:[],
+  carouselUrlList: [],
 });
 const formOption = reactive({
   inline: true,
@@ -205,15 +216,17 @@ const formSearchConfig = computed(() => {
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
-    proxy.post("/browsingHistory/classifiedList", sourceList.value.pagination).then((message) => {
-    console.log(message);
-    sourceList.value.data = message.rows;
-    sourceList.value.pagination.total = message.total;
-    setTimeout(() => {
-      loading.value = false;
-    }, 200);
+  proxy
+    .post("/browsingHistory/classifiedList", sourceList.value.pagination)
+    .then((message) => {
+      console.log(message);
+      sourceList.value.data = message.rows;
+      sourceList.value.pagination.total = message.total;
+      setTimeout(() => {
+        loading.value = false;
+      }, 200);
       getStatistic();
-  });
+    });
 };
 const openModal = () => {
   dialogVisible.value = true;
@@ -221,13 +234,12 @@ const openModal = () => {
   formData.data = {};
 };
 
-
 //编辑详情
 const getDetail = (row) => {
   modalType.value = "edit";
   proxy.post("/carouselManager/detail", { id: row.id }).then((res) => {
     formData.data = res;
-    getFileList({businessIdList: [res.id], fileType: 1}).then((resFile) => {
+    getFileList({ businessIdList: [res.id], fileType: 1 }).then((resFile) => {
       formData.data.carouselUrlList = resFile.data[res.id];
       formData.data.carouselUrl = resFile.data[res.id];
       dialogVisible.value = true;
@@ -244,12 +256,12 @@ const del = (row) => {
     type: "warning",
   }).then(() => {
     proxy.post("/carouselManager/delete", { id: row.id }).then((res) => {
-        ElMessage({
-          message: "操作成功",
-          type: "success",
-        });
-        getList();
+      ElMessage({
+        message: "操作成功",
+        type: "success",
       });
+      getList();
+    });
   });
 };
 
@@ -261,7 +273,6 @@ const cancelSearch = () => {
   openSearch.value = false;
 };
 
-
 const submitSearch = () => {
   if (dateRange.value.length !== 0) {
     sourceList.value.pagination.beginTime = dateRange.value[0];
@@ -271,8 +282,6 @@ const submitSearch = () => {
   getList();
 };
 
-
-
 const getStatistic = async (req) => {
   proxy.post("/browsingHistory/getStatistic", {}).then((message) => {
     console.log(message);