add

src/api/app.ts

@@ -6,8 +6,8 @@ export function getConfig() {
 }
 
 // 工作台主页
-export function getWorkbench() {
+export function getWorkbench(params: any) {
-    return request.get({ url: '/workbench/index' })
+    return request.get({ url: '/workbench/index', params })
 }
 
 //字典数据

src/views/article/lists/detail.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="detail-popup">
+        <popup ref="popupRef" title="文章详情" :async="true" width="60vw" @confirm="handleSubmit" @close="handleClose">
+            <h1 style="font-size:32px; margin-bottom: 20px;font-weight:700"> {{ formData.title }} </h1>
+            <h4 style="margin:20px 0"> {{ formData.desc }} </h4>
+            <div v-html="formData.content"> </div>
+            <div style="text-align: right;margin-top: 20px">
+                本文由{{ formData.author }}于{{ (formData.create_time) }}发布
+            </div>
+
+            <!-- {{ formData }} -->
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="customdetail">
+
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { timeFormat } from '@/utils/util'
+import type { PropType } from 'vue'
+
+const emit = defineEmits(['success', 'close'])
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+
+
+// 表单数据
+const formData = ref({
+
+})
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    popupRef.value?.close()
+
+}
+
+//打开弹窗
+const open = (data) => {
+    popupRef.value?.open()
+    formData.value = data
+}
+
+// 关闭回调
+const handleClose = () => {
+    emit('close')
+}
+
+
+defineExpose({
+    open,
+})
+</script>
+
+<style lang="scss" scoped>
+.tit {
+    font-size: 1.2em;
+    margin-bottom: 10px;
+}
+
+:deep(.my-label) {
+    width: 150px;
+}
+</style>

src/views/article/lists/index.vue

@@ -3,22 +3,13 @@
         <el-card class="!border-none" shadow="never">
             <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                 <el-form-item label="文章标题">
-                    <el-input
+                    <el-input class="w-[280px]" v-model="queryParams.title" clearable @keyup.enter="resetPage" />
-                        class="w-[280px]"
-                        v-model="queryParams.title"
-                        clearable
-                        @keyup.enter="resetPage"
-                    />
                 </el-form-item>
                 <el-form-item label="栏目名称">
                     <el-select class="w-[280px]" v-model="queryParams.cid">
                         <el-option label="全部" value />
-                        <el-option
+                        <el-option v-for="item in optionsData.article_cate" :key="item.id" :label="item.name"
-                            v-for="item in optionsData.article_cate"
+                            :value="item.id" />
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="文章状态">
@@ -36,12 +27,9 @@
         </el-card>
         <el-card class="!border-none mt-4" shadow="never">
             <div>
-                <router-link
+                <router-link v-perms="['article.article/add', 'article.article/add:edit']" :to="{
-                    v-perms="['article.article/add', 'article.article/add:edit']"
+                    path: getRoutePath('article.article/add:edit')
-                    :to="{
+                }">
-                        path: getRoutePath('article.article/add:edit')
-                    }"
-                >
                     <el-button type="primary" class="mb-4">
                         <template #icon>
                             <icon name="el-icon-Plus" />
@@ -54,65 +42,40 @@
                 <el-table-column label="ID" prop="id" min-width="80" />
                 <el-table-column label="封面" min-width="100">
                     <template #default="{ row }">
-                        <image-contain
+                        <image-contain v-if="row.image" :src="row.image" :width="60" :height="45"
-                            v-if="row.image"
+                            :preview-src-list="[row.image]" preview-teleported fit="contain" />
-                            :src="row.image"
-                            :width="60"
-                            :height="45"
-                            :preview-src-list="[row.image]"
-                            preview-teleported
-                            fit="contain"
-                        />
                     </template>
                 </el-table-column>
-                <el-table-column
+                <el-table-column label="标题" prop="title" min-width="160" show-tooltip-when-overflow />
-                    label="标题"
-                    prop="title"
-                    min-width="160"
-                    show-tooltip-when-overflow
-                />
                 <el-table-column label="栏目" prop="cate_name" min-width="100" />
                 <el-table-column label="作者" prop="author" min-width="120" />
                 <el-table-column label="浏览量" prop="click" min-width="100" />
                 <el-table-column label="状态" min-width="100">
                     <template #default="{ row }">
-                        <el-switch
+                        <el-switch v-perms="['article.article/updateStatus']" v-model="row.is_show" :active-value="1"
-                            v-perms="['article.article/updateStatus']"
+                            :inactive-value="0" @change="changeStatus($event, row.id)" />
-                            v-model="row.is_show"
-                            :active-value="1"
-                            :inactive-value="0"
-                            @change="changeStatus($event, row.id)"
-                        />
                     </template>
                 </el-table-column>
                 <el-table-column label="排序" prop="sort" min-width="100" />
                 <el-table-column label="发布时间" prop="create_time" min-width="120" />
-                <el-table-column label="操作" width="120" fixed="right">
+                <el-table-column label="操作" width="170" fixed="right">
                     <template #default="{ row }">
-                        <el-button
+                        <el-button v-perms="['article.article/edit', 'article.article/add:edit']" type="primary" link>
-                            v-perms="['article.article/edit', 'article.article/add:edit']"
+                            <router-link :to="{
-                            type="primary"
+                                path: getRoutePath('article.article/add:edit'),
-                            link
+                                query: {
-                        >
+                                    id: row.id
-                            <router-link
+                                }
-                                :to="{
+                            }">
-                                    path: getRoutePath('article.article/add:edit'),
-                                    query: {
-                                        id: row.id
-                                    }
-                                }"
-                            >
                                 编辑
                             </router-link>
                         </el-button>
-                        <el-button
+                        <el-button v-perms="['article.article/delete']" type="danger" link @click="handleDelete(row.id)">
-                            v-perms="['article.article/delete']"
-                            type="danger"
-                            link
-                            @click="handleDelete(row.id)"
-                        >
                             删除
                         </el-button>
+                        <el-button v-perms="['article.article/detail']" link @click="handleDetail(row.id)">
+                            详情
+                        </el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -120,14 +83,19 @@
                 <pagination v-model="pager" @change="getLists" />
             </div>
         </el-card>
+        <detail-popup v-if="showDtail" ref="detailRef" @close="showDtail = false" />
+
     </div>
 </template>
 <script lang="ts" setup name="articleLists">
-import { articleLists, articleDelete, articleStatus, articleCateAll } from '@/api/article'
+import { articleLists, articleDelete, articleStatus, articleCateAll, articleDetail } from '@/api/article'
 import { useDictOptions } from '@/hooks/useDictOptions'
 import { usePaging } from '@/hooks/usePaging'
 import { getRoutePath } from '@/router'
 import feedback from '@/utils/feedback'
+import DetailPopup from './detail.vue'
+
+
 const queryParams = reactive({
     title: '',
     cid: '',
@@ -147,6 +115,8 @@ const { optionsData } = useDictOptions<{
     }
 })
 
+
+
 const changeStatus = async (is_show: any, id: number) => {
     try {
         await articleStatus({ id, is_show })
@@ -162,6 +132,20 @@ const handleDelete = async (id: number) => {
     getLists()
 }
 
+const detailRef = shallowRef<InstanceType<typeof DetailPopup>>()
+const showDtail = ref(false)
+
+
+const handleDetail = async (id: number) => {
+    let res = await articleDetail({ id })
+    showDtail.value = true
+    await nextTick()
+    detailRef.value?.open(res)
+}
+
+
+
+
 onActivated(() => {
     getLists()
 })

src/views/statistic_cw/index.vue

@@ -75,7 +75,8 @@ const visitorOption: any = reactive({
         color: 'red'
     },
     tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        confine: true,
     },
     series: [
         {

src/views/statistic_gc/index.vue

@@ -95,7 +95,9 @@ const visitorOption: any = reactive({
         color: 'red'
     },
     tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        confine: true,
+
     },
     series: [
         {

src/views/statistic_sc/index.vue

@@ -79,7 +79,9 @@ const visitorOption: any = reactive({
         color: 'red'
     },
     tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        confine: true,
+
     },
     series: [
         {

src/views/statistic_xm/index.vue

@@ -102,7 +102,9 @@ const visitorOption: any = reactive({
         color: 'red'
     },
     tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        confine: true,
+
     },
     series: [
         {

src/views/statistic_zj/index.vue

@@ -74,7 +74,9 @@ const visitorOption: any = reactive({
         color: 'red'
     },
     tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        confine: true,
+
     },
 
 

src/views/statistic_zx/index.vue

@@ -76,7 +76,9 @@ const visitorOption: any = reactive({
         color: 'red'
     },
     tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        confine: true,
+
     },
     series: [
         {

src/views/workbench/index.vue

@@ -2,6 +2,17 @@
 <template>
     <div class="workbench">
         <el-card shadow="never" class=" !border-none">
+            <div class="mb-6 flex justify-between items-center">
+                <span class="text-2xl">概况</span>
+                <div class="flex items-center text-sm">
+                    <span class="mr-4">时间筛选: </span>
+                    <el-date-picker v-model="startEndTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
+                        end-placeholder="结束日期" unlink-panels @change="getData2" />
+                    <el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
+                    <el-button type="primary" class="ml-4"
+                        @click="startEndTime2 = getLastMonthRange(), getData2()">重置</el-button>
+                </div>
+            </div>
             <div class="flex flex-wrap">
                 <div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
                     <div class="mr-2">
@@ -22,6 +33,7 @@
             <div>
                 <div class="mb-6 flex justify-between items-center">
                     <span class="text-2xl">趋势</span>
+
                 </div>
                 <v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
             </div>
@@ -80,92 +92,7 @@ const visitorOption: any = reactive({
 // 颜色
 const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
 // 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
-const basicList = reactive([
+const basicList = reactive([])
-    // {
-    //     name: '访客数',
-    //     type: 'people',
-    //     icon: 'RectangleCopy',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '浏览量',
-    //     type: 'browse',
-    //     icon: 'RectangleCopy49',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '新增用户数',
-    //     type: 'newUser',
-    //     icon: 'RectangleCopy53',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '成交用户数',
-    //     type: 'payPeople',
-    //     icon: 'RectangleCopy5',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '访客-支付转换率',
-    //     type: 'payPercent',
-    //     icon: 'RectangleCopy4',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '激活付费会员数',
-    //     type: 'payUser',
-    //     icon: 'RectangleCopy7',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '充值用户数',
-    //     type: 'rechargePeople',
-    //     icon: 'RectangleCopy59',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '客单价',
-    //     type: 'payPrice',
-    //     icon: 'RectangleCopy15',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '累计用户',
-    //     type: 'cumulativeUser',
-    //     icon: 'RectangleCopy54',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '累计付费会员数',
-    //     type: 'cumulativePayUser',
-    //     icon: 'RectangleCopy7',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '累计充值用户数',
-    //     type: 'cumulativeRechargePeople',
-    //     icon: 'RectangleCopy6',
-    //     num: 0,
-    //     percent: 0
-    // },
-    // {
-    //     name: '累计成交用户数',
-    //     type: 'cumulativePayPeople',
-    //     icon: 'RectangleCopy9',
-    //     num: 0,
-    //     percent: 0
-    // }
-])
 function getLastMonthRange() {
     // 获取今天的日期
     let today = new Date();