focus

package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "@surely-vue/table": "^4.1.13",
     "@vue-office/pdf": "^1.5.4",
     "@yangxuy/pdf-reader": "^1.0.8",
     "ant-design-vue": "4.x",
@@ -16,8 +18,10 @@
     "dayjs": "^1.11.10",
     "dy-vite-vue-pdf": "^1.1.2",
     "echarts": "^5.4.3",
+    "element-plus": "^2.4.1",
     "moment": "^2.29.4",
     "pdfobject": "^2.2.12",
+    "sortablejs": "^1.15.0",
     "vue": "^3.3.4",
     "vue-pdf": "^4.3.0",
     "vue-pdf-embed": "^1.2.1",
@@ -27,6 +31,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "babel-plugin-component": "^1.1.1",
+    "less": "^4.2.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "vite": "^4.4.5"

src/api/index.js

@@ -2,6 +2,7 @@ import fetch from './fetch.js'
 const DEBUG = process.env.NODE_ENV === 'development' ? true : false
 
 const ajaxUrl = DEBUG ? '/test' : ''; //
+const curriculumUrl = DEBUG ? '/curriculum' : ''; //
 const AJAXREQUEST = (o) => {
   let {
     method,
@@ -19,7 +20,23 @@ const AJAXREQUEST = (o) => {
     check,
   })
 }
+const curriculAJAXREQUEST = (o) => {
+  let {
+    method,
+    path,
+    data,
+    check = 1,
+  } = o
+
+  let url = curriculumUrl + path
 
+  return fetch({
+    url,
+    data,
+    method,
+    check,
+  })
+}
 
 // 获取七牛云token
 const getQiniuToken = json => {
@@ -33,5 +50,6 @@ const getQiniuToken = json => {
 export {
   ajaxUrl,
   AJAXREQUEST,
-  getQiniuToken
+  getQiniuToken,
+  curriculAJAXREQUEST
 }

src/api/path.js

@@ -28,6 +28,12 @@ const AJAXPATH = {
   // 项目
   'projectHandle': {
     'path': '/master/project',
+  },
+  // 洞见 start
+  // 焦点图管理
+  'bannerList':{
+    'path':'/master/banner',
+    'method': 'get'
   }
 }
 

src/config/aside.js

@@ -63,6 +63,20 @@ const SIDEBAR = [{
   icon: 'SettingOutlined',
   children: []
 },
-
+{
+  name: "洞见",
+  id: '2-1',
+  path: '/curriculum',
+  icon: 'CloudUploadOutlined',
+  children: [
+    {
+      name: "焦点图管理",
+      id: '2-1-0',
+      path: '/curriculum/focus',
+      icon: '',
+      children: []
+    },
+  ]
+},
 ]
 export default SIDEBAR

src/main.js

@@ -8,7 +8,13 @@ import * as antIcons from "@ant-design/icons-vue";
 import './assets/css/reset.css'
 import './assets/css/index.scss'
 
-const app = createApp(App).use(store).use(Antd).use(router)
+import STable from '@surely-vue/table';
+import '@surely-vue/table/dist/index.less';
+
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css'
+
+const app = createApp(App).use(store).use(Antd).use(STable).use(ElementPlus).use(router)
 
 // 注册组件
 Object.keys(antIcons).forEach(key => {

src/router/index.js

@@ -21,7 +21,8 @@ import aicheck from '../views/ai/list.vue'
 import aiadd from '../views/ai/add.vue'
 // 登录
 import login from '../views/login.vue'
-
+//焦点图管理
+import focus from '../views/curriculum/focus.vue'
 const router = createRouter({
   history: createWebHashHistory('/'),
   routes: [{
@@ -90,7 +91,12 @@ const router = createRouter({
     path: '/login',
     name: 'AI遥感碳监测',
     component: login,
-  }
+  },
+  {
+    path: '/curriculum/focus',
+    name: '首页焦点图维护',
+    component: focus,
+  },
   ]
 })
 

src/views/admin/index.vue

@@ -233,8 +233,7 @@ const pageChange = (page, pageSize) => {
   searchData.value.page = page;
   getData();
 };
-const addData = ref({
-  auth: [
+const originAddAuth = [
     {
       id: 1,
       name: "首页控制台",
@@ -275,7 +274,19 @@ const addData = ref({
       name: "用户管理",
       select: false,
     },
-  ],
+    {
+      id: 8,
+      name: "洞见",
+      select: false,
+      list: ["焦点图管理", "订单管理","课程管理"],
+      index: 2,
+      checkAll: false,
+      indeterminate: false,
+      child: [],
+    },
+  ]
+const addData = ref({
+  auth: JSON.parse(JSON.stringify(originAddAuth))
 });
 
 const onCheckAllChange = (item) => {
@@ -337,48 +348,7 @@ const rules = {
 };
 const add = () => {
   addData.value = {
-    auth: [
-      {
-        id: 1,
-        name: "首页控制台",
-        select: false,
-      },
-      {
-        id: 7,
-        name: "AI遥感审定核证",
-        select: false,
-      },
-      {
-        id: 2,
-        name: "样本数据库",
-        select: false,
-      },
-      {
-        id: 3,
-        name: "咨询中心",
-        select: false,
-        list: ["联系我们", "预约咨询"],
-        indeterminate: false,
-        index: 2,
-        checkAll: false,
-        child: [],
-      },
-      {
-        id: 4,
-        name: "服务中心",
-        select: false,
-      },
-      {
-        id: 5,
-        name: "商家中心",
-        select: false,
-      },
-      {
-        id: 6,
-        name: "用户管理",
-        select: false,
-      },
-    ],
+    auth: JSON.parse(JSON.stringify(originAddAuth))
   };
   addPop.value = true;
 };

src/views/curriculum/focus.vue

@@ -0,0 +1,441 @@
+<template>
+  <div class="page demo">
+    <div class="search_nav">
+      <h1>焦点图管理</h1>
+      <!-- 页面搜索 -->
+      <div>
+        <a-form :model="searchData" layout="inline" >
+          <a-form-item>
+            <a-button type="primary" @click="add">新焦点图</a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div class="table-wrapper">
+      <!--表格 -->
+      <a-table 
+        class="tabel"
+        :columns="columns"
+        :data-source="dataList"
+        bordered
+        :pagination="false"
+        :loading="loading"
+        ref="shopTable"
+        >
+        <!-- 图片样式 -->
+        <template #img="{record}">
+           <a-image
+              :width="40"
+              :height="40"
+              :src="record.img"
+              />
+        </template>
+        <!-- 任务状态 -->
+        <template #switch="{record}">
+          <a-switch v-model:checked='record.Status' :checkedValue="1" :unCheckedValue="0"
+         @change="switchChange(record.Id,record.Status)"></a-switch>
+        </template>
+        <!-- 操作 -->
+        <template #operation="{record}">
+          <a-button type="link" @click="edit(record)">编辑</a-button>
+          <a-popconfirm
+            title="是否确定删除？删除后不可恢复，请谨慎操作！"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="delSubmit(record.id)"
+          >
+            <a-button type="link" style="color:#FF4D4F">删除</a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+      <!-- 页码-->
+      <!-- <a-pagination 
+        v-model:current="paginationData.current" 
+        pageSize="20"
+        :total="paginationData.total"
+        :show-total="(total, range) => `第${range[0]}-${range[1]} 条，共 ${total} 条`"
+        @change="changePage"
+        show-less-items 
+      /> -->
+      <!-- 新增--编辑弹窗 -->
+      <a-modal   v-model:visible="addPop" :title="addData.id ? '编辑焦点图' :'新增焦点图'" @ok="submit" okText="确定" cancelText="取消"  >
+        <a-form :model="addData"  :labelCol="{ style: 'width:120px' }"  ref="formRef" :rules="rules">
+          <a-form-item label="首页头图名称" name="title">
+          <!-- 首页头图名称 -->
+            <a-input class="tasktype"  placeholder="请输入名称" v-model:value="addData.title"></a-input>
+          </a-form-item>
+          <a-form-item label="链接地址" name="address">
+           <!-- 门店地址 -->
+            <a-input class="tasktype" placeholder="请输入链接地址" v-model:value="addData.address"></a-input>
+          </a-form-item>
+          <a-form-item label="上传图片" name="img">
+             <ul class="upImg">
+                  <li>{{addData.coverimg}}</li>
+                  <li class="img_icon" v-if="addData.coverimg">
+                    <CloseCircleTwoTone class="icon_del"  @click="delAdCover()"/>
+                    <img :src="addData.coverimg" >
+                  </li>
+                    <li class="upload" v-else >
+                      <uploadImg path="cms/admin/img"
+                        class="upload-img"
+                        @imgSuccess="(url) => adCoverSuccess(url)" :imgUrl="addData.img" />
+                    </li>
+                  <li class="warn">*请上传尺寸295px*170px,png格式的图片</li>
+              </ul>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent,onMounted,ref } from 'vue'
+
+import uploadImg from "../../components/upload-img.vue";
+// import {getempower,updateempower,addempower,delempower, shop_train} from '@/api'
+import { curriculAJAXREQUEST } from "@/api";
+import AJAXPATH from "@/api/path";
+
+import { message } from 'ant-design-vue'
+import { CloseCircleTwoTone,CloseCircleOutlined } from '@ant-design/icons-vue';
+import Sortable from "sortablejs";
+
+export default defineComponent({
+  components: {
+    uploadImg,
+    CloseCircleTwoTone
+  },
+  setup() {
+    const formRef = ref();
+    // 搜索数据
+    const searchData = ref({
+      // 请求数据时需要带页码，默认1
+    })
+    // 新增/编辑表单数据
+    const addData = ref({})
+    //弹窗显示开关
+    const addPop = ref(false)
+    // 表格数据
+    const dataList = ref([])
+    //分页数据
+    const paginationData = ref({
+      current:1,
+      total:0,
+    })
+    //拖拽
+    const mokeDataList= ref([])
+    // 加载中
+    const loading = ref(false)
+    //获取请求列表
+    const getData = async(e) =>{ 
+      const { code, data ,count} = await curriculAJAXREQUEST({
+          path: AJAXPATH.bannerList.path,
+          method: AJAXPATH.bannerList.method,
+          data: {},
+        });
+        if(code == 0){
+        dataList.value = data
+        console.log(132,data,count);
+        if(count){
+          paginationData.value.total=count
+        }
+        mokeDataList.value =  JSON.parse(JSON.stringify(dataList.value))
+      }
+    }
+   //新增数据
+    const add = () =>{
+      // 将addData置空
+      addData.value = {}
+      addPop.value = true
+    }
+    //编辑数据
+    const edit = (item) =>{
+      // 获取当前点击的行数据
+      addData.value = {
+        id:item.id,
+        address: item.address,
+        phone: item.phone,
+        title: item.title,
+        img: item.img,
+        coverimg: item.img,
+        longitude: item.longitude,
+        latitude: item.latitude,
+        created_at: item.created_at
+      }
+      addPop.value = true
+    }
+    //删除数据
+    const delSubmit = (id) =>{ 
+       delempower(id)
+       getData()
+    }
+    //搜索数据
+    const search = () =>{
+      searchData.value.page= 1
+      getData()
+    }
+    //置空搜索
+    const reset = () => {
+      searchData.value = {
+        page:1,
+      }
+      paginationData.value.current = 1
+      getData()
+    }
+       // 上传图片
+    const addimg = ref({})
+    // const imgData = ref()
+  
+    const adCoverSuccess = (imgUrl)=>{
+      addData.value.img = imgUrl
+      console.log(addData.value.img,'图片')
+      addData.value.coverimg = imgUrl
+    }
+    // 删除图片
+    const delAdCover = () => {
+      addData.value.img='',
+      addData.value.coverimg = ''
+    }
+      //数据提交
+    const submit = async() =>{
+      formRef.value.validate().then(async() => {
+        //console.log('values', addData.value, toRaw(addData.value));
+       if(addData.value.id){
+         const {status} = await updateempower(
+          addData.value.id,
+          addData.value
+         )
+         if(!status){
+           message.success('修改成功');
+         }else{
+           message.error('修改失败');
+         }
+      }else{
+        const {status} = await addempower(
+          addData.value
+         )
+         if(!status){
+           message.success('新增成功');
+         }else{
+           message.error('新增失败');
+         }
+      }
+       addPop.value = false
+       getData()
+      
+      }).catch(error => {
+        console.log('error', error);
+      });
+   
+    }
+    // 改变状态
+    const switchChange =(id,status) =>{
+      //
+      console.log(id,status); 
+    }  
+    // 验证规则
+    const rules = {
+       title:[
+            {
+              required: true,
+              message: '请填写内容',
+              trigger: 'blur',
+            },
+       ],
+       img:[
+            {
+              required: true,
+              message: '请填写内容',
+               trigger: 'blur',
+            },
+       ],
+       address:[
+            {
+              required: true,
+              message: '请填写内容',
+               trigger: 'blur',
+            },
+       ],
+       longitude:[
+            {
+              required: true,
+              message: '请填写内容',
+               trigger: 'blur',
+
+            },
+       ],
+       latitude:[
+            {
+              required: true,
+              message: '请填写内容',
+               trigger: 'blur',
+            },
+       ],
+       
+    }
+    const shopTable = ref(null);
+
+    //行拖拽
+    const rowDrop = () => {
+      const tabel = shopTable.value.$el;
+      Sortable.create(tabel.querySelector("tbody"), {
+        animation: 150,
+        async onEnd({ newIndex, oldIndex }) {
+          console.log(mokeDataList.value)
+          const currRow = mokeDataList.value.splice(oldIndex, 1)[0];
+          mokeDataList.value.splice(newIndex, 0, currRow);
+          const list = mokeDataList.value.map((item) => item.id);
+          let softs = list;
+          sortFocus(softs);
+        },
+      });
+    };
+    const sortFocus = async (sort1) => {
+      const data = await shop_train({
+        list:sort1,
+      });
+      console.log( "排序");
+    };
+    //页面加载
+    onMounted(() =>{
+      getData()
+      rowDrop()
+    })
+
+    return{
+      shopTable,
+      formRef,
+      rules,
+      columns:[
+          {
+            title: "序号",
+            dataIndex: "key",
+            key: "key",
+            customRender: ({ text, record, index }) => {
+              return `${index + 1}`;
+            },
+            rowDrag: true,
+          },
+          {
+            title: "首页头图名称",
+            key: "name",
+            dataIndex: "name",
+          },
+          {
+            title: "图片地址",
+            key: "img",
+            dataIndex: "img",
+          },
+          {
+            title: "链接地址",
+            key: "href",
+            dataIndex: "href",
+          },
+          { title: "状态",
+            key: "status",
+            dataIndex: "status",
+          },
+          {
+            title: "创建时间",
+            key: "createdAt",
+            dataIndex: "createdAt",
+          },
+          {
+            title: "修改时间",
+            key: "updatedAt",
+            dataIndex: "updatedAt",
+          },
+          {
+            title: "操作",
+            key: "handle",
+            dataIndex: "handle",
+          },
+        ],
+      searchData,
+      addData,
+      addPop,
+      dataList,
+      paginationData,
+      loading,
+      getData,
+      add,
+      edit,
+      search,
+      reset,
+      submit,
+      delSubmit,
+      switchChange,
+      adCoverSuccess,
+      delAdCover,
+      rowDrop
+
+    }
+  },
+
+})
+</script>
+<style lang="scss" scoped>
+  .search_nav{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .reset{
+      margin-right: 10px;
+    }
+  }
+  h1 {
+    font-size: 18px;
+    color: #333;
+    font-weight: bold;
+  }
+  .select{
+    margin-right:20px;
+  }
+  .table-wrapper{
+    margin-top: 20px;
+    background: #fff;
+    /* padding: 20px; */
+    box-sizing: border-box;
+  }
+  .tasktype{
+    min-width: 300px;
+  }
+  .add_btn{
+    margin-right: 20px;
+  }
+  .upImg{
+  height: 120px;
+  .img_icon{
+    // display: flex;
+    // flex-wrap: wrap;
+    padding: 20px 10px 10px 0;
+    position: relative;
+    width: 100px;
+    height: 100px;
+    .icon_del{
+      position: absolute;
+      right: 0;
+      top: 0;
+      }
+    }
+  }
+  .add_btn{
+    margin-right: 20px;
+  }
+  .ant-modal-title{
+    font-weight: bold;
+  }
+  .ant-modal-footer{
+    padding: 20px;
+  }
+  .ant-modal-body{
+    padding: 20px;
+  }
+  .warn{
+    font-size: 12px;
+    color: rgb(255, 77, 79);
+    margin-left: 120px;
+    margin-top: -50px;
+  }
+</style>

src/views/curriculum/focus_ele.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="page">
+    <el-form :inline="true" :model="searchData" class="demo-form-inline">
+      <!-- <div class="flex-1">
+        <el-form-item label="搜索">
+          <el-input v-model="searchData.title" placeholder="BANNER名称" clearable @keyup.native.enter="onSubmit"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
+          <el-button @click="onReset">清空</el-button>
+        </el-form-item>
+      </div> -->
+      <el-form-item>
+        <el-button type="success" @click="add" icon="el-icon-plus">添加</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      :data="dataList"
+      border
+      v-loading="loading"
+      >
+      <el-table-column
+        prop="name"
+        label="首页头图名称"
+        align="center">
+        <template slot-scope="scope">
+          <div class="content">
+            {{scope.row.name}}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="img"
+        label="首页头图"
+        align="center">
+        <template slot-scope="scope">
+          <el-image 
+          style="width: 60px; height: 60px"
+          :src="`${scope.row.img}!200`" 
+          >
+        </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="href"
+        label="跳转路径"
+        align="center">
+        <template slot-scope="scope">
+          <div class="content">
+            {{scope.row.href}}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="createDate"
+        label="添加日期"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="展示状态"
+        align="center">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            @change="switchStatus(scope.row)"
+            >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="操作"
+        align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="pagination"
+      layout="prev, pager, next"
+      @current-change="handleCurrentChange"
+      :page-size="20"
+      :page-count="total">
+    </el-pagination>
+
+
+    <el-dialog :title="`${addData.id ? '编辑' : '添加'}首页头图`" :visible.sync="addPop" width="500px">
+      <el-form :model="addData" class="dialog-form">
+        <el-form-item label="首页头图标题" label-width="100px">
+          <el-input v-model="addData.name" ></el-input>
+        </el-form-item>
+        <el-form-item label="首页头图上传" label-width="100px">
+          <div class="upload-box">
+            <uploadImg
+                path="cms/admin/img"
+                :imgUrl="addData.img"
+                @imgSuccess="
+                  (url) => handleAvatarSuccess(url, 'boundary', 'monitor')
+                "
+                class="upload-img"
+                title="首页头图上传"
+            ></uploadImg>
+            <p class="text-px" v-if="!addData.img">750*568像素</p>  
+          </div>
+        </el-form-item>
+        <el-form-item label="跳转路径" label-width="100px">
+          <el-input v-model="addData.href" ></el-input>
+        </el-form-item>
+        <el-form-item label="展示状态" label-width="100px">
+          <el-switch
+            v-model="addData.status"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </el-switch>
+      </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addPop = false">取 消</el-button>
+        <el-button type="primary" @click="addSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import uploadImg from "../../components/upload-img.vue";
+// import {
+//   getBannerList,
+//   upgradeBanner,
+//   addBanner
+//   } from '@/api'
+import {
+  elIconPlus
+} from '@element-plus/icons-vue'
+import { curriculAJAXREQUEST } from "@/api";
+import AJAXPATH from "@/api/path";
+  export default {
+    components: {
+      uploadImg,
+      elIconPlus
+    },
+    data() {
+      return {
+        // 请求信息
+        searchData: {
+          page: 1
+          // user: '',
+          // region: ''
+        },
+        // 数据列表
+        dataList:[],
+        // 总数据量
+        total:2,
+        // 添加 || 编辑数据
+        addData:{},
+        // 是否显示编辑 || 添加弹层
+        addPop: false,
+        // 加载中
+        loading:false,
+        // 跳转链接
+        radio: 'hrefIn'
+      }
+    },
+    created(){
+      this.getDataList()
+    },
+    methods: {
+      // 获取焦点图列表
+      async getDataList(){
+        this.loading=true
+        // const { status, data } = await getBannerList(this.searchData)
+        const { code, data } = await curriculAJAXREQUEST({
+          path: AJAXPATH.bannerList.path,
+          method: AJAXPATH.bannerList.method,
+          data: {},
+        });
+        if(code == 0){
+          if(this.searchData.page == 1){
+            this.dataList = data
+            this.total = Math.ceil(data.count/20)
+          }else{
+            this.dataList = data
+          }
+          this.loading = false
+        }
+      },
+      // 最终提交
+      async addSubmit(){
+        // let { status, data, errMsg } = this.addData.id ? await upgradeBanner(this.addData) : await addBanner(this.addData)
+        // console.log(status, data)
+        // if(!status){
+        //   this.$message.success('操作成功')
+        //   if(this.searchData.page > 1){
+        //     this.searchData.page -= 1
+        //   }
+        //   this.addData = {
+        //     status: 1
+        //   }
+        //   this.getDataList()
+        // }else {
+        //   this.$message.error(errMsg)
+        // }
+        this.addPop = false
+      },
+
+      onSubmit() {
+        this.searchData.page = 1
+        this.getDataList()
+      },
+      onReset (){
+        this.searchData = {
+          page: 1
+        }
+        this.getDataList()
+      },
+      // 切换页数
+      handleCurrentChange(page) {
+        this.searchData.page = page
+        this.getDataList()
+      },
+      add(){
+        if(this.editable){
+          this.editable = false
+          this.addData = {
+            status: 1
+          }
+        }else{
+          this.addData.status = 1
+        }
+        this.addPop = true
+      },
+      // 编辑
+      edit(editData){
+        this.editable = true
+        this.addData = editData
+        this.addPop = true
+      },
+      async switchStatus (o){
+        let { id, status } = o
+        this.addData = {
+          id,
+          status
+        }
+        await this.addSubmit()
+      },
+      handleAvatarSuccess(img){
+        this.$set(this.addData, 'img', img)
+        // this.focusImg.push(img)
+      },
+      removeImg(index){
+        this.focusImg.splice(index, 1)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.dialog-form{
+  .el-input{
+    width:300px;
+  }
+}
+.upload-box{
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  position: relative;
+}
+.text-px{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  color: #909399;
+}
+.banner-header{
+  display: flex;
+  .banner-title{
+    flex: 1;
+    font-weight: 700;
+  }
+}
+.content{
+  max-height:  23px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.demo-form-inline{
+  display: flex;
+  .flex-1{
+    flex: 1
+  }
+}
+</style>

src/views/curriculum/focus_stable.vue

@@ -0,0 +1,297 @@
+<template>
+  <div  class="page">
+    <a-form :inline="true" :model="searchData" class="demo-form-inline">
+      <a-form-item>
+        <a-button type="primary" @click="add">
+          <template #icon>
+            <PlusCircleOutlined />
+          </template>
+          添加
+        </a-button>
+      </a-form-item>
+    </a-form>
+
+    <a-table
+      :data-source="dataList"
+      :columns="columns"
+      border
+      :loading="loading"
+      rowKey="id"
+      :scroll="{ y: '100%' }"
+      >
+    </a-table>
+    <a-pagination
+      class="pagination"
+      layout="prev, pager, next"
+      @current-change="handleCurrentChange"
+      :page-size="20"
+      :page-count="total">
+    </a-pagination>
+    <a-modal :title="`${addData.id ? '编辑' : '添加'}首页头图`" v-model:open="addPop" width="500px">
+      <a-form :model="addData" class="dialog-form">
+        <a-form-item label="首页头图标题" label-width="100px">
+          <a-input v-model="addData.title" ></a-input>
+        </a-form-item>
+        <a-form-item label="首页头图上传" label-width="100px">
+          <div class="upload-box">
+            <uploadImg
+                path="cms/admin/img"
+                :imgUrl="addData.figure"
+                @imgSuccess="
+                  (url) => handleAvatarSuccess(url, 'boundary', 'monitor')
+                "
+                class="upload-img"
+                title="首页头图上传"
+            ></uploadImg>
+            <p class="text-px" v-if="!addData.figure">750*568像素</p>  
+          </div>
+        </a-form-item>
+        <a-form-item label="跳转路径" label-width="100px">
+          <a-input v-model="addData.href" ></a-input>
+        </a-form-item>
+        <a-form-item label="展示状态" label-width="100px">
+          <a-switch
+            v-model="addData.status"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </a-switch>
+      </a-form-item>
+      </a-form>
+      <!-- <div slot="footer" class="dialog-footer">
+        <a-button @click="addPop = false">取 消</a-button>
+        <a-button type="primary" @click="addSubmit">确 定</a-button>
+      </div> -->
+    </a-modal>
+
+  </div>
+</template>
+<script >
+import uploadImg from "../../components/upload-img.vue";
+// import {
+//   getBannerList,
+//   upgradeBanner,
+//   addBanner
+//   } from '@/api'
+import { curriculAJAXREQUEST } from "@/api";
+import AJAXPATH from "@/api/path";
+import { PlusCircleOutlined }from '@ant-design/icons-vue';
+import { setLicenseKey } from '@surely-vue/table';
+setLicenseKey('fdafefdaffklfjajuiefhrdbfdnsafjkasyegwfpqfldfd45f48ew468fr5ds');
+
+  export default {
+    components: {
+      uploadImg,
+      PlusCircleOutlined
+    },
+    data() {
+      return {
+        columns:[
+          {
+            title: "序号",
+            dataIndex: "key",
+            key: "key",
+            customRender: ({ text, record, index }) => {
+              return `${index + 1}`;
+            },
+            rowDrag: true,
+          },
+          {
+            title: "首页头图名称",
+            key: "name",
+            dataIndex: "name",
+          },
+          {
+            title: "图片地址",
+            key: "img",
+            dataIndex: "img",
+          },
+          {
+            title: "链接地址",
+            key: "href",
+            dataIndex: "href",
+          },
+          { title: "状态",
+            key: "status",
+            dataIndex: "status",
+          },
+          {
+            title: "创建时间",
+            key: "createdAt",
+            dataIndex: "createdAt",
+          },
+          {
+            title: "修改时间",
+            key: "updatedAt",
+            dataIndex: "updatedAt",
+          },
+          {
+            title: "操作",
+            key: "handle",
+            dataIndex: "handle",
+          },
+        ],
+        // 请求信息
+        searchData: {
+          page: 1
+          // user: '',
+          // region: ''
+        },
+        // 数据列表
+        dataList:[],
+        // 总数据量
+        total:2,
+        // 添加 || 编辑数据
+        addData:{},
+        // 是否显示编辑 || 添加弹层
+        addPop: false,
+        // 加载中
+        loading:false,
+        // 跳转链接
+        radio: 'hrefIn'
+      }
+    },
+    created(){
+      this.getDataList()
+    },
+    methods: {
+      // 获取焦点图列表
+      async getDataList(){
+        this.loading=true
+        const { code, data } = await curriculAJAXREQUEST({
+          path: AJAXPATH.bannerList.path,
+          method: AJAXPATH.bannerList.method,
+          data: {},
+        });
+        if(code == 0){
+          if(this.searchData.page == 1){
+            this.dataList = data
+            this.total = Math.ceil(data.count/20)
+          }else{
+            this.dataList = data
+          }
+          this.loading = false
+        }
+      },
+      // 最终提交
+      async addSubmit(){
+        // let { status, data, errMsg } = this.addData.id ? await upgradeBanner(this.addData) : await addBanner(this.addData)
+        // console.log(status, data)
+        // if(!status){
+        //   this.$message.success('操作成功')
+        //   if(this.searchData.page > 1){
+        //     this.searchData.page -= 1
+        //   }
+        //   this.addData = {
+        //     status: 1
+        //   }
+        //   this.getDataList()
+        // }else {
+        //   this.$message.error(errMsg)
+        // }
+        this.addPop = false
+      },
+
+      onSubmit() {
+        this.searchData.page = 1
+        this.getDataList()
+      },
+      onReset (){
+        this.searchData = {
+          page: 1
+        }
+        this.getDataList()
+      },
+      // 切换页数
+      handleCurrentChange(page) {
+        this.searchData.page = page
+        this.getDataList()
+      },
+      add(){
+        if(this.editable){
+          this.editable = false
+          this.addData = {
+            status: 1
+          }
+        }else{
+          this.addData.status = 1
+        }
+        this.addPop = true
+      },
+      // 编辑
+      edit(editData){
+        this.editable = true
+        this.addData = editData
+        this.addPop = true
+      },
+      async switchStatus (o){
+        let { id, status } = o
+        this.addData = {
+          id,
+          status
+        }
+        await this.addSubmit()
+      },
+      handleAvatarSuccess(img){
+        this.$set(this.addData, 'figure', img)
+        // this.focusImg.push(img)
+      },
+      removeImg(index){
+        this.focusImg.splice(index, 1)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.dialog-form{
+  .a-input{
+    width:300px;
+  }
+}
+.upload-box{
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  position: relative;
+}
+.text-px{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  color: #909399;
+}
+.banner-header{
+  display: flex;
+  .banner-title{
+    flex: 1;
+    font-weight: 700;
+  }
+}
+.content{
+  max-height:  23px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.demo-form-inline{
+  display: flex;
+  .flex-1{
+    flex: 1
+  }
+}
+</style>
+<style >
+.surely-table{
+  background: #FFF;
+}
+.surely-table-wrapper{
+  background: #FFF;
+}
+</style>

vite.config.js

@@ -10,6 +10,13 @@ export default defineConfig({
       'Timor': path.resolve(__dirname, '../Timor')
     },
   },
+  css:{
+    preprocessorOptions:{
+      less:{
+        javascriptEnabled: true
+      }
+    }
+  },
   build:{
     assetsDir:"public"
   },
@@ -35,6 +42,12 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/test/, '')
       },
+      '/curriculum': {
+        secure: false,
+        target: 'https://insight.fuxicarbon.com', // http://10.199.40.73:8080
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/curriculum/, '')
+      },
     }
   }
 })