file-type

Next.js分页示例教程：基础创建与API应用

ZIP文件

JavaScript
下载需积分: 9 | 100KB | 更新于2025-09-13 | 141 浏览量 | 0 下载量 举报 收藏
download 立即下载
创建基于Next.js的应用程序通常是前端开发人员在使用React.js框架构建服务器端渲染或静态生成网站时的一个重要步骤。Next.js是一个轻量级的React框架，提供了许多特性，例如服务器端渲染、静态网站生成、路由系统以及改进的性能优化。而"create-next-app-example-basic"这个标题很可能指向了一个具体的创建Next.js应用程序的示例项目，其中可能包括了分页功能和调用外部API的例子。 根据给定的描述，我们可以引申出以下知识点： 1. **Next.js框架**： Next.js是React的一个框架，它内置了路由系统，能够自动处理页面之间的导航。使用Next.js可以轻松创建静态网站或单页应用程序（SPA）。它允许开发者在服务器端渲染页面，这有助于SEO（搜索引擎优化）和提高性能。 2. **分页的基本示例**： 分页是一种将数据集分割成多个小部分以提高性能和用户体验的方法。在Next.js应用中实现分页可能涉及到创建分页组件、处理API请求以及管理当前页面状态的逻辑。通过分页可以有效减少初次加载的数据量，并提供用户界面以翻阅更多数据。 3. **API omdb**： 描述中提到的“omdbapi”指的是OMDb API，这是一个用于电影信息的开放API，允许用户根据电影名称或其他参数查询电影详情。这对于构建一个电影信息网站非常有用，尤其是当需要显示与“蝙蝠侠”相关的电影信息时。 4. **axios调用API的库**： axios是一个基于Promise的HTTP客户端，用于浏览器和node.js，它可以用来发送HTTP请求到API。它具备拦截请求和响应、转换JSON数据、取消请求、自动转换JSON数据等特性。在Next.js项目中，开发者通常会使用axios来调用后端API。 5. **运行本地主机**： 在开发过程中，通常需要在本地主机上运行应用程序以便于测试和调试。描述中提到使用npm或yarn的开发命令来启动本地服务器。npm run dev（或yarn dev）是一个常见的命令来启动Next.js应用程序的开发服务器。 6. **JavaScript标签**： JavaScript是一种高级的编程语言，通常用于网页开发，也是Next.js框架的基础。JavaScript标签意味着这个示例项目或相关知识点适用于那些熟悉JavaScript的开发者。 7. **压缩包子文件的文件名称列表**： 压缩包子文件名列表中的"create-next-app-example-basic-master"可能指的是一个包含示例代码的GitHub仓库名称。GitHub是程序员常用的代码托管平台，而"master"在这里指的是默认的分支名称。这个命名可能表明该仓库中存放了基于"create-next-app"创建的Next.js项目的基础示例，并且是项目的主分支。 总体来看，"create-next-app-example-basic"可能是一个旨在指导开发者如何使用Next.js创建一个带有分页功能的应用程序的教程或模板项目。它可能包括了如何使用axios来调用外部API（例如omdbapi）以及如何在本地服务器上运行和测试应用的知识点。这样的示例对于初学者学习Next.js和构建现代的React应用是非常有价值的。

相关推荐

filetype

BASIC4Android的数据库范例源代码

While cursor.Next Debug.Log("ID: " & cursor.GetInt(0) & ", Name: " & cursor.GetString(1) & ", Age: " & cursor.GetInt(2)) Wend cursor.Close End Sub ``` 更新数据使用`ExecuteNonQuery`，通过WHERE子句...
filetype

ICS delphixe10源码版

ICS - Internet Component Suite - V8 - Delphi 7 to RAD Studio 10 Seattle ======================================================================= (Aka FPIETTE's Components) Revised: March 3, 2016 ...
filetype

Unity AI Game Programming - Second Edition

efficient artificial flocks and crowds, Create a basic behavior tree to drive a character's actions, Make your characters more engaging by implementing fuzzy logic concepts in your AI's decision-...
filetype

微软内部资料-SQL性能优化2

By leveraging the Address Windowing Extensions API, an application can create a fixed-size window into the additional physical memory. This allows a process to access any portion of the physical ...
filetype

Getting Started with QT: How to Create a Basic QT Project

In this chapter, we will introduce the entire process of creating a basic QT project. First, we will understand what the QT framework is, along with its advantages and features. Next, we will discuss ...
filetype

Visual Basic中的报表生成和打印技巧

Visual Basic报表生成基础 ## 1.1 Visual Basic中报表生成的概述 在这一节中，我们将介绍Visual Basic中报表生成的基础概念和原理。我们将探讨报表的定义、作用以及为什么在软件开发中使用报表生成功能。此外，...
filetype

The Basic Principle Analysis of File Stream Preview in kkfileview

Basic Concepts of File Stream Preview File stream preview refers to the rapid display of file contents through streaming technology. In Web and mobile app development, file stream preview plays a ...
filetype

Basic Qt Interface Design: Beautifying Table Styles and Colors

# 1. Introduction ## 1.1 The Importance of QT Interface Design In software development, interface design is a crucial aspect. A good interface design can enhance user experience, increase user ...
filetype

Getting Started with Mobile App Development Using Visual Studio

Getting Started with Mobile App Development in Visual Studio ## Chapter 1: Preparation In this chapter, we will discuss the prerequisites for mobile app development, including downloading and ...
filetype

提升仓库管理效率：Visual Basic仓库系统高级优化技巧

本文探讨了Visual Basic在仓库系统设计中的应用，涵盖数据管理优化、自动化流程编写、性能监控与故障排查，以及系统集成与扩展性优化等方面。重点分析了数据库结构与查询效率的提升方法，如索引优化和SQL性能分析，...
filetype

Detailed Example of Button Beautification in Qt Style Sheets: Styling Buttons with QSS

# 1. Introduction ## 1.1 Introduction to Qt Style Sheets Qt Style Sheets are a powerful tool for beautifying Qt interfaces. Based on the CSS syntax, they allow for customizing the style of interface...
filetype

Detailed Example of Beautifying Input Boxes in Qt Style Sheets: Styling Input Boxes with QSS

# 1. Introduction ### 1.1 Concept of Qt Style Sheets Qt Style Sheets are a technique used to define and modify the appearance of Qt interface controls. Based on the syntax of Cascading Style Sheets ...
filetype

Nextcloud Office Online文档管理诀窍：高效组织与检索技巧

Nextcloud Office Online 是一款强大的云办公套件，提供了文档管理、共享和高级管理技巧，以及与第三方应用和服务的集成能力。本文首先介绍了Nextcloud Office Online的基本概念与安装流程，接着深入探讨了文档的...
filetype

【海康威视iVMS-8700平台SDKV2.6速成课】：0基础入门HTTP-OpenAPI

!... # 摘要 ...接着，详细讲解了接口调用的代码实现、数据处理、自动化测试，以及高级应用中的安全策略、性能优化与监控。最后，文章通过对海康威视iVMS-8700平台SDK特有功能的探讨，以及实战案例分析
filetype

Detailed Explanation of Sub-Controls Styling in Qt Style Sheets: Defining Different Styles for Sub-...

# Introduction ## 1.1 What are Qt Style Sheets? Qt Style Sheets are a mechanism for customizing the look and feel of Qt interfaces. By applying style sheets to Qt widgets, developers can easily ...
filetype

构建DCOM-HTTPS应用程序

在当今的网络应用开发中，构建安全且高效的分布式应用程序是一项重要任务。... #### 1....要创建此应用程序的服务器对象，需按以下步骤操作： ...在本示例中，将项目命名为`ExampleServer`，初始类命名为`clsServer`
filetype

Exploring the Application and Advantages of kkfileview in Cross-platform Development

# 1. Overview of Cross-Platform Development ### 1.1 What is Cross-Platform Development? Cross-platform development refers to the process of creating applications that run on different operating ...
filetype

同样的解释对下面代码，尽可能详细且解释语法：<template>
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="任务" name="task"></el-tab-pane> <el-tab-pane label="工程" name="engineering"></el-tab-pane> </el-tabs>
<el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="taskSearch"> </el-input>
<el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="engineeringSearch"> </el-input>
<el-tree class="treeLine" :data="tree_data" show-checkbox :node-key="activeName == 'engineering'?'projectId':'taskId'" @check="check" :default-expand-all="false" :props="defaultProps" @node-click="handleNodeClick" ref="treeRefImg" :highlight-current="true" filterable :key="treeKey" :filter-node-method="filterNode"> </el-tree>
<label>专业</label> <el-select @change="taskMajorChange" filterable placeholder="专业" clearable v-model="params.taskMajor"> <el-option v-for="item in MajorList" :key="item.majorType" :label="item.majorTypeName" :value="item.majorType"></el-option> </el-select>
<label>电压等级</label> <el-select @change="dydjListChange" filterable placeholder="电压等级" clearable v-model="params.dydj"> <el-option v-for="item in dydjList" :key="item.typeValue" :label="item.typeName" :value="item.typeValue"></el-option> </el-select>
<label>工程名称</label> <el-select class="selectCss" clearable filterable @change="gcxxListChange" v-model="params.lineName" placeholder="工程名称"> <el-option v-for="item in gcxxList" :key="item.basicId" :label="item.basicName" :value="item.basicId"></el-option> </el-select>
<label>杆塔/间隔名称</label> <el-select multiple collapse-tags class="selectCss selectCssList" clearable filterable v-model="gtbhList" placeholder="杆塔/间隔名称" @change="handleGtbhChange"> <el-option v-for="item in gcgtList" :key="item.keyId" :label="item.towerName" :value="item.keyId"></el-option> </el-select>
<label>上传时间</label> <el-date-picker v-model="timeValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
<label>处理时间</label> <el-date-picker v-model="timeValue1" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
<label>是否有问题</label> <el-select class="selectCss" clearable filterable v-model="params.isMark" placeholder="是否有问题"> <el-option label="否" value="0"></el-option> <el-option label="是" value="1"></el-option> </el-select>
<label>图片类型</label> <el-select class="selectCss" clearable filterable v-model="params.picType" placeholder="图片类型"> <el-option label="可见光巡检照片" value="1"></el-option> <el-option label="红外巡检照片" value="2"></el-option> </el-select>
<label>数据来源</label> <el-select class="selectCss" clearable filterable v-model="params.uploadtype" placeholder="数据来源"> <el-option label="app上传" value="1"></el-option> <el-option label="离线上传" value="2"></el-option> </el-select>
<label>是否归档</label> <el-select class="selectCss" clearable filterable v-model="params.isArc" placeholder="是否归档"> <el-option label="否" value="0"></el-option> <el-option label="是" value="1"></el-option> </el-select>
<label>处理状态</label> <el-select class="selectCss" clearable filterable v-model="params.handleFlag" placeholder="处理状态"> <el-option label="已处理" value="1"></el-option> <el-option label="未处理" value="2"></el-option> </el-select>
<label>处理人</label> <el-input v-model="params.handleUser" placeholder="处理人"></el-input>
<el-button v-if="this.$menu.getMenuBus('查询')" v-on:click="getPicFun">查询</el-button>
<el-button v-if="this.$menu.getMenuBus('批量下载')" :loading="loading" v-on:click="downloadC()">批量下载</el-button> <el-button v-if="this.$menu.getMenuBus('导出')" v-on:click="exportDronePic()">导出</el-button> <el-button v-if="this.$menu.getMenuBus('数据统计')" v-on:click="getWorkCount()">数据统计</el-button>
<el-image v-on:click="viewimg(item,index)" :key="item.sourceUrl" :src="getImgUrl(item)"> </el-image>
{{ item.taskType }}
{{ item.isArcName }}
{{ item.handleName }} 发现 {{ item.defectNum?item.defectNum:0 }} 个问题
  • {{ item.picName ? item.picName : "" }}
  • 采集时间：{{ parseTime(item.photoTime) }}
  • 标注 >>
    • 共 {{ total }} 条数据 <el-pagination background :current-page.sync="page.pageNum" layout="prev, pager, next, jumper, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
    <manually-annotated ref="examineInitMap" @getPicFun="getPicFun" @pre="pre" @next="next" v-if="dialogUploadObj.isShow" :dialogUploadObj="dialogUploadObj" :AnnotatedRow="AnnotatedRow" :imageObj="imageObj"></manually-annotated> <view-img @closeImgBox="closeImgBox" v-if="view.isShow" :view="view"></view-img> <el-dialog title="数据统计" :visible.sync="dataStatisticsObj.isShow" :modal-append-to-body="false" :append-to-body="false" :close-on-click-modal="false" top="12vh" width="70%" class="dialogBox data-statistics-dialog" custom-class="data-statistics-dialog">
    <el-button v-on:click="getWorkCount">查询</el-button>
    <label>任务名称</label> <el-input placeholder="请输入任务名称" v-model="params.taskName" clearable></el-input>
    <label>工程名称</label> <el-select class="selectCss" clearable filterable v-model="params.lineName" placeholder="工程名称"> <el-option v-for="item in gcxxList" :key="item.basicId" :label="item.basicName" :value="item.basicId"></el-option> </el-select>
    <label>处理时间</label> <el-date-picker v-model="timeValue1" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    <el-row :gutter="3"> <el-col v-for="(tag, index) in filterTags" :key="index" :span="1.5"> <el-tag color="#0C53CF" closable @close="removeFilterTag(index)"> {{ tag.label }}: {{ tag.value }} </el-tag> </el-col> </el-row>
    <vxe-table :data="dataStatisticsObj.tableData" style="width: 100%; height: 100%" border ref="table" :filter-config="{ remote: true }" @filter-change="handleFilterChange" :custom-config="{ placement: 'top-left', storage: true }" :column-config="columnConfig, columnDragConfig" :toolbar-config="toolbarConfig" auto-resize > <vxe-column title="序号" type="seq" align="center" :width="80 * scale"></vxe-column> <vxe-column field="handleUser" align="center" title="标注人员" show-header-overflow show-overflow="title" show-footer-overflow :filters="[{ data: '' }]" sortable> <template #filter="{ column }"> <FuzzySearch ref="fuzzySearch" type="input" @reset="handleReset" @filter="(value) => handleColumnFilter(column, value)" label="标注人员" @changeTab="changeTab" /> </template> </vxe-column> <vxe-column field="towerNum" align="center" title="杆塔数量" show-header-overflow show-overflow="title" show-footer-overflow :filters="[{ data: '' }]" sortable> <template #filter="{ column }"> <FuzzySearch ref="fuzzySearch" type="input" @reset="handleReset" @filter="(value) => handleColumnFilter(column, value)" label="杆塔数量" @changeTab="changeTab" /> </template> </vxe-column> <vxe-column field="markNum" align="center" title="缺陷数据" show-header-overflow show-overflow="title" show-footer-overflow :filters="[{ data: '' }]" sortable> <template #filter="{ column }"> <FuzzySearch ref="fuzzySearch" type="input" @reset="handleReset" @filter="(value) => handleColumnFilter(column, value)" label="缺陷标注" @changeTab="changeTab" /> </template> </vxe-column> <vxe-column field="allNum" align="center" title="处理数据" show-header-overflow show-overflow="title" show-footer-overflow :filters="[{ data: '' }]" sortable> <template #filter="{ column }"> <FuzzySearch ref="fuzzySearch" type="input" @reset="handleReset" @filter="(value) => handleColumnFilter(column, value)" label="处理数据" @changeTab="changeTab" /> </template> </vxe-column> </vxe-table>
    共 {{ dataStatisticsObj.total }} 条数据 <el-pagination background :page-sizes="[10, 20, 50, 100]" :page-size="dataStatisticsObj.page.pageSize" :total="dataStatisticsObj.total" :current-page="dataStatisticsObj.page.pageNum" layout="prev, pager, next, jumper, sizes" @current-change="handleCurrentChangeStats" @size-change="handleSizeChangeStats" > </el-pagination>
    </el-dialog>
    </template> <script> import { getProject, getProjectTower, } from "@/api/jobManagement/jobManagementUrl"; import { getCommonReadFile } from '@/api/common' // import dataStatistics from './dataStatistics' //隐藏 import { deletePic, downloadPic, exportDronePic, getPicFun, getSampleEngineerTree, getSampleTaskTree, getWorkCount } from '@/api/dataManageMent' import moment from "moment"; import { getMajorType, getSysDictionary } from "@/api/publicUrl"; import viewImg from "./viewImg"; import manuallyAnnotated from "./manuallyAnnotated"; import { requestParams, resetAddress } from '@/api/url' import { Loading } from 'element-ui' import FuzzySearch from "@/views/FuzzySearch.vue" export default { name: "annotationTable", components: { viewImg, manuallyAnnotated, // dataStatistics, //隐藏 FuzzySearch }, data() { return { view: { isShow: false, obj: {}, }, activeName: "task", treeKey: 0, loading: false, tree_data: [], listIndex: 0, srcList: [], defaultProps: { children: "child", label: "title", }, uro: require("../../../../../assets/images/operation/example.jpg"), gtbhList:[], params: { gtbh: "", //杆塔id companyId: "", //单位id lineName: "", //线路id dydj: "", //电压等级 taskMajor: "", //专业 startTime: "", //开始时间 endTime: "", //结束时间 handleStartTime:'', handleEndTime:'', isMark: "", //是否标注 isArc: "", //是否标注 picType: "", //图片类型 uploadtype: "", //数据来源 taskIds: "", //任务id projectIds: "", //工程id handleFlag: '2', // handleUser: '', // taskName: "", // 新增任务名称参数 }, AnnotatedRow: {}, timeValue: [], timeValue1: [], tableData: [], imageObj: {}, MajorList: [], dydjList: [], gcxxList: [],//左侧工程树与右侧工程名称下拉框联动（左侧树有选中节点时下拉框显示选中的内容，如果没有选中的显示初始化查询的所有工程名称） gcxxListAll: [],//初始化查询的所有工程名称 gcgtList: [], page: { pageNum: 1, pageSize: 10, }, total: 0, upDialogObj: { isShow: false, title: "上传", width: "50%", top: "11vh", "modal-append-to-body": false, "close-on-click-modal": false, "append-to-body": false, }, dataStatisticsObj:{ isShow: false, tableData: [], // 新增：以下 total: 0, page: { pageNum: 1, pageSize: 10 }, }, dialogUploadObj: { isShow: false, title: "图像标注", width: "99%", // width: "96%", // top: "11vh", top: "1vh", "modal-append-to-body": false, "close-on-click-modal": false, "append-to-body": true, }, taskSearch:'',//任务搜索 engineeringSearch:'',//工程搜索 scale: document.documentElement.clientWidth / 1920, // 新增：从子组件移入 // 新增数据统计表格的筛选条件 columnFilters: { handleUser: '', towerNum: '', markNum: '', allNum: '' }, //新增：当前筛选条件 filters: {}, // 新增：字段设置的工具栏配置项 toolbarConfig: { custom: true, // 启用自定义列功能 customStorage: true, // 启用自定义列的本地存储 }, // 相关配置项 columnConfig: { drag: true, // 启用表头左右拖拽排序功能 resizable: true, // 启用拖拽列宽功能 }, columnDragConfig: { trigger: 'cell', showIcon: false, showGuidesStatus: true }, filterTags: [], // 新增：tag标签用于存储筛选条件的标签 }; }, watch: { taskSearch(val) { this.$refs.treeRefImg.filter(val); }, engineeringSearch(val) { this.$refs.treeRefImg.filter(val); }, // 新增： dataStatisticsObj: { handler(newVal) { // 从子组件移入的watch }, deep: true, immediate: true } }, mounted() { this.getPicFun(); this.getMajorType(); this.getSysDictionary(0); this.handleClick(); this.getProject() // 新增：连接vxe-toolbar和vxe-table const $table = this.$refs.table; const $toolbar = this.$refs.toolbarRef; if ($table && $toolbar) { $table.connect($toolbar); } }, methods: { filterNode(value, data) { if (!value) return true; if(!data.title) return true; return data.title.indexOf(value) !== -1; }, handleNodeClick(val){ var _this = this; _this.params.projectIds = ""; _this.params.taskIds = ""; _this.params.lineName = ""; var data = this.$refs.treeRefImg.getCheckedNodes(); var Index = data.findIndex((item) => { return item == val; }); if(Index== -1){ data.push(val) }else { data.splice(Index, 1) } if (_this.activeName == "task") { data.forEach((res) => { if(res.taskId){ _this.params.taskIds += res.taskId + ","; } }); } else { if(data.length > 0){ let arr = [] data.forEach((res) => { if(res.projectId){ if(res.projectId) _this.params.projectIds += res.projectId + ","; } arr.push({basicld:res.projectId,basicName:res.projectName}) }); this.gcxxList = arr }else{ _this.gcxxList = _this.gcxxListAll; } } _this.getPicFun(); this.$refs.treeRefImg.setCheckedNodes(data); }, // handleNodeClick(data){ // var _this = this; // _this.params.projectIds = ""; // _this.params.taskIds = ""; // if (_this.activeName == "task") { // _this.params.taskIds = data.taskId || ''; // } else { // _this.params.projectIds += data.projectId || ""; // } // _this.getPicFun(); // // }, // 隐藏原代码 // check(val, node) { // var _this = this; // _this.params.projectIds = ""; // _this.params.taskIds = ""; // if (_this.activeName == "task") { // node.checkedNodes.forEach((res) => { // _this.params.taskIds += res.taskId + ","; // }); // } else { // if(node.checkedNodes && node.checkedNodes.length > 0){ // let arr = [] // node.checkedNodes.forEach((res) => { // _this.params.projectIds += res.projectId + ","; // arr.push({basicld:res.projectId,basicName:res.projectName}) // }); // this.gcxxList = arr // this.params.lineName = '' // }else{ // this.gcxxList = this.gcxxListAll // this.params.lineName = '' // } // } // _this.getPicFun(); // }, // 修改以上代码 // 修改check方法，处理树节点选中时的联动 check(val, node) {debugger var _this = this; _this.params.projectIds = ""; _this.params.taskIds = ""; _this.params.lineName = ""; // 清空工程名称选择 _this.gtbhList = []; // 清空杆塔选择 if (_this.activeName == "task") { node.checkedNodes.forEach((res) => { _this.params.taskIds += res.taskId + ","; }); } else { // 工程树逻辑 let projectIds = []; let projectNames = []; let arr = [] node.checkedNodes.forEach((res) => { if (res.projectId) { projectIds.push(res.projectId); projectNames.push(res.projectName); _this.params.projectIds += res.projectId + ","; } arr.push({basicld:res.projectId,basicName:res.projectName}) }); this.gcxxList = arr // 更新工程名称下拉框选项 if (projectIds.length > 0) { // 新增：如果选中了工程节点，则只显示选中的工程 // _this.gcxxList = projectIds.map((id, index) => ({ // basicId: id, // basicName: projectNames[index] // })); // 自动查询第一个选中工程的杆塔数据 if (projectIds[0]) { this.getProjectTower(projectIds[0]); } } else { // 新增：如果没有选中任何工程节点，则显示所有工程 _this.gcxxList = _this.gcxxListAll; } } _this.getPicFun(); }, getImgUrl(obj) { // url = requestParams.dronePic+url obj.fileType = obj.fileType ? obj.fileType : 0; var URL= obj.sourceThumbUrl?obj.sourceThumbUrl:obj.sourceUrl var url = requestParams.ImgPathOss + "/uavMap/data/readFile?filePath=" + URL + "&fileType=" + obj.fileType; // console.log(url.replaceAll('#','%23')) // // getCommonReadFile({fileType:obj.fileType,filePath:obj.urlPath,ossPath:obj.urlPath}).then(res=>{ // let url1 = window.URL.createObjectURL(res); // console.log(url1) // }) return resetAddress(url); // return url1.toString(); }, handleClick() { var _this = this; _this.engineeringSearch = '' _this.taskSearch = '' this.gcxxList = this.gcxxListAll if (_this.activeName == "task") { getSampleTaskTree().then((res) => { _this.tree_data = res.data; }); } else { getSampleEngineerTree().then((res) => { _this.tree_data = res.data; }); } _this.treeKey+=1 }, pre() { if (this.page.pageNum == 1) { } else { this.page.pageNum--; this.getPicFun(); } }, next(type) { if(type){ this.page.pageNum = 1; }else{ this.page.pageNum = this.page.pageNum += 1; } this.getPicFun(); }, closeImgBox() { this.view.isShow = false; }, viewimg(row,index) { // this.listIndex = index+1 var Index = this.tableData.findIndex((item) => { return item.keyId == row.keyId; }); this.view.listIndex = Index; this.view.obj = row; this.view.obj.urlPath = row.sourceUrl this.view.isShow = true; }, modifyTest(row) { this.AnnotatedRow = row; this.dialogUploadObj.isShow = true; }, taskMajorChange(val) { // this.MajorList.filter((item, index) => { // return item.majorType == val; // }); }, dydjListChange(val) { let arr = this.dydjList.filter((item, index) => { return item.typeValue == val; }); this.getProject(arr[0]); }, getProject(val) { var _this = this; getProject({ voltageName: val?val.typeName:'', majorType: _this.params.taskMajor?_this.params.taskMajor:'0', voltageLevel: val?val.typeValue:'', }).then((res) => { _this.gcxxListAll = res.data; _this.gcxxList = res.data; }); }, // 原代码隐藏 // gcxxListChange(val) { // this.getProjectTower(val); // // var list = this.gcxxList.filter(item => { // // return item.basicId == val // // }); // }, // 修改以上代码 修改工程名称变化处理方法 gcxxListChange(val) { if (val) { this.getProjectTower(val); } else { this.gcgtList = []; // 清空杆塔列表 this.gtbhList = []; // 清空杆塔选择 } this.getPicFun(); }, // 新增：杆塔选择变化处理方法 handleGtbhChange(val) { this.getPicFun(); }, // 隐藏原代码 // getProjectTower(val) { // var _this = this; // getProjectTower({ keyId: val, majorType: _this.params.taskMajor }).then( // (res) => { // _this.gcgtList = res.data; // } // ); // }, // 新增：修改以上代码：获取杆塔数据方法 getProjectTower(val) { var _this = this; getProjectTower({ keyId: val, majorType: _this.params.taskMajor }).then((res) => { _this.gcgtList = res.data; // 可优化：自动选中第一个杆塔（可选） // if (res.data.length > 0) { // _this.gtbhList = [res.data[0].keyId]; // } }).catch(() => { _this.gcgtList = []; }); }, downloadC(row) { let that = this; let str = "", type = ".zip"; let parmas = {}; that.params.startTime = that.timeValue ? that.timeValue[0] : ""; that.params.endTime = that.timeValue ? that.timeValue[1] : ""; that.params.handleStartTime = that.timeValue1 ? that.timeValue1[0] : ""; that.params.handleEndTime = that.timeValue1 ? that.timeValue1[1] : ""; that.params.gtbh = that.gtbhList.join(",") that.loading = true downloadPic({ ...that.params }).then((data) => { if (!data) { return; } let time = new Date(); let url = window.URL.createObjectURL(new Blob([data])); let link = window.document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute("download", moment(time).format("YYYYMMDD") + type); document.body.appendChild(link); link.click(); //释放内存 window.URL.revokeObjectURL(link.href); that.loading = false }).catch(e=>{ that.loading = false }); return; if (row) { str += row.keyId + ","; str = str.slice(0, str.length - 1); parmas = { keyId: str, type: 1, }; type = ".zip"; that.params.startTime = that.timeValue ? that.timeValue[0] : ""; that.params.endTime = that.timeValue ? that.timeValue[1] : ""; that.params.handleStartTime = that.timeValue1 ? that.timeValue1[0] : ""; that.params.handleEndTime = that.timeValue1 ? that.timeValue1[1] : ""; downloadPic({ ...that.params }).then((data) => { if (!data) { return; } let time = new Date(); let url = window.URL.createObjectURL(new Blob([data])); let link = window.document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute("download", moment(time).format("YYYYMMDD") + type); document.body.appendChild(link); link.click(); //释放内存 window.URL.revokeObjectURL(link.href); }); } }, deletePic(val) { var _this = this; deletePic({ keyId: val.keyId, fileUrl: val.sourceUrl }).then((res) => { if (res.code == 200) { _this.$message({ message: "删除成功", type: "success", }); } else { _this.$message({ message: "删除失败", type: "error", }); } _this.getPicFun(); }); }, getFile(row) { // debugger let url = process.env.VUE_APP_BASE_API + "/uavMap/data/readFile?filePath=" + row.filePath + "&fileType=" + row.fileType; window.open(resetAddress(url)); }, getSysDictionary(sum) { var _this = this; getSysDictionary({ parentId: sum }).then((res) => { if (sum == 0) { _this.dydjList = res.data; } }); }, getMajorType() { var _this = this; getMajorType({}).then((res) => { _this.MajorList = res.data; }); }, getPicFun() { let instance = Loading.service({ text: "正在查询数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }); var _this = this; _this.params.startTime = _this.timeValue ? _this.timeValue[0] : ""; _this.params.endTime = _this.timeValue ? _this.timeValue[1] : ""; _this.params.handleStartTime = _this.timeValue1 ? _this.timeValue1[0] : ""; _this.params.handleEndTime = _this.timeValue1 ? _this.timeValue1[1] : ""; _this.params.gtbh = _this.gtbhList.join(",") $(".v-modal").remove(); getPicFun({ ..._this.page, ..._this.params }).then((res) => { _this.tableData = res.data.rows; _this.view.srcList = []; _this.tableData.forEach((item,index)=>{ var url = requestParams.ImgPathOss +"/uavMap/data/readFile?filePath="+item.sourceUrl+"&fileType="+item.fileType; _this.view.srcList.push(resetAddress(url)) }) // _this.tableData = _this.tableData.concat(res.data.rows); _this.total = res.data.total; _this.imageObj = res.data; _this.imageObj["pageNum"] = _this.page.pageNum; _this.srcList = [] // _this.tableData.forEach(obj=>{ // getCommonReadFile({fileType:obj.fileType,filePath:obj.sourceUrl,ossPath:obj.sourceUrl}).then(res=>{ // let url1 = window.URL.createObjectURL(res); // _this.srcList.push(url1) // console.log(_this.srcList) // }) // }) instance.close(); _this.$refs.examineInitMap.preCG(_this.tableData); }).catch(e=>{ instance.close(); }); }, // 新增分页选择器大小 handleSizeChange(val) { this.page.pageSize = val; //更新每页显示条数 this.getPicFun(); //重新获取数据 }, handleCurrentChange(val) { this.page.pageNum = val; this.getPicFun(); }, // 新增分页 handleCurrentChangeStats(val) { this.dataStatisticsObj.page.pageNum = val; this.getWorkCount(); }, // 数据统计表格的每页条数变化 handleSizeChangeStats(val) { this.dataStatisticsObj.page.pageSize = val; this.getWorkCount(); }, getWorkCount(){ var _this = this; // 设置处理时间参数 // _this.params.handleStartTime = _this.timeValue1 ? _this.timeValue1[0] : ""; // _this.params.handleEndTime = _this.timeValue1 ? _this.timeValue1[1] : ""; // 合并表单查询条件和列筛选条件 let queryParams = { ...this.params, ...this.columnFilters, pageNum: this.dataStatisticsObj.page.pageNum, pageSize: this.dataStatisticsObj.page.pageSize, }; // 暂时隐藏不可删除 _this.params.startTime = _this.timeValue ? _this.timeValue[0] : ""; _this.params.endTime = _this.timeValue ? _this.timeValue[1] : ""; _this.params.handleStartTime = _this.timeValue1 ? _this.timeValue1[0] : ""; _this.params.handleEndTime = _this.timeValue1 ? _this.timeValue1[1] : ""; _this.params.gtbh = _this.gtbhList.join(",") _this.dataStatisticsObj.isShow = true getWorkCount(queryParams).then(res =>{ _this.dataStatisticsObj.tableData = res.data.rows || res.data; // 根据后端返回结构调整, _this.dataStatisticsObj.total = res.data.total || res.data.length; // 根据后端返回结构调整; }) }, exportDronePic() { var _this = this; _this.params.startTime = _this.timeValue ? _this.timeValue[0] : ""; _this.params.endTime = _this.timeValue ? _this.timeValue[1] : ""; _this.params.handleStartTime = _this.timeValue1 ? _this.timeValue1[0] : ""; _this.params.handleEndTime = _this.timeValue1 ? _this.timeValue1[1] : ""; _this.params.gtbh = _this.gtbhList.join(",") exportDronePic({ ..._this.params }).then((data) => { let time = new Date(); let url = window.URL.createObjectURL(new Blob([data])); let link = window.document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", "样本库列表" + this.parseTime(new Date(), "{y}{m}{d}{h}{i}{s}") + ".xlsx" ); document.body.appendChild(link); link.click(); //释放内存 window.URL.revokeObjectURL(link.href); }); }, // 数据统计表格的列筛选 handleColumnFilter(column, value) { // 清除每个重复展示的筛选条件 this.filterTags = this.filterTags.filter(tag => tag.prop !== column.property); // 映射列字段到查询字段 const fieldMap = { handleUser: 'handleUser', towerNum: 'towerNum', markNum: 'markNum', allNum: 'allNum' }; if (value || value == 0) { let displayValue = value; // 将筛选条件添加到 filterTags的el-tag标签中 this.filterTags.push({ label: column.title, value: Array.isArray(displayValue) ? displayValue.join(', ') : displayValue, prop: column.property, }); // 更新对应的查询字段 const queryField = fieldMap[column.property] || column.property; this.columnFilters[column.property] = value; this.params[queryField] = value; } else { // 清除筛选条件 const queryField = fieldMap[column.property] || column.property; delete this.columnFilters[column.property]; } this.handleFilterChange({ filters: this.filters }); }, // 移除数据统计表格的筛选标签 removeFilterTag(index) { const removedTag = this.filterTags.splice(index, 1)[0]; // 映射列字段到查询字段 const fieldMap = { companyName: 'companyName', taskName: 'taskName', workDescribe: 'workDescribe', implementTypeName: 'implementType', taskTypeName: 'taskType', planStateName: 'planState', createUser: 'createUser' }; // 清除对应的查询条件 const queryField = fieldMap[removedTag.prop] || removedTag.prop; delete this.params[queryField]; delete this.columnFilters[removedTag.prop]; this.getWorkCount(); }, // 筛选变化事件 handleFilterChange({ column }) {}, // 重置筛选条件 handleReset() { this.filters = {}; this.getWorkCount(); }, changeTab() { this.$nextTick(() => { this.$refs.table.closeFilter(); this.$refs.table.clearFilter(); }); } }, }; </script> <style lang="scss" scoped> .pageBox { display: flex; justify-content: flex-end; align-items: center; color: rgba($color: #fff, $alpha: 0.6); margin-top: 16px; letter-spacing: 1px; ::v-deep .el-pagination { .el-pager li, .btn-prev, .btn-next { width: 34px; height: 34px; color: #fff; font-size: 16px; background: rgba($color: #0045c0, $alpha: 0.2); border: 1px solid rgba($color: #005cff, $alpha: 0.9); line-height: 34px; padding: 0; } .el-pager li.active { background: #005cff; } .el-pagination__jump { color: rgba($color: #fff, $alpha: 0.6); margin-left: 20px; .el-pagination__editor { margin: 0 5px; .el-input__inner { background: rgba($color: #0045c0, $alpha: 0.4); height: 34px; color: #fff; border: 0; } } } .el-pagination__sizes { color: #ffffff !important; .el-input__inner { height: 34px; font-size: 16px; background: rgba($color: #0045c0, $alpha: 0.2); border: 1px solid rgba($color: #005cff, $alpha: 0.9); color: #ffffff !important; } } } } // 新增：引入定义好的样式文件 @import "@/assets/styles/vxeClass.scss"; .body { width: calc(100% - 60px); height: calc(100% - 190px); position: fixed; left: 20px; top: 150px; display: flex; //flex-direction: column; flex-direction: initial; .annotation_Table { width: 20%; height: 100%; //background: #f0f8ff21; .contentBox { width: 100%; flex: 1; //margin-top: 20px; margin-bottom: 20px; ::v-deep .el-tabs { .el-tabs__header { margin: 0; } .el-tabs__nav { width: 100%; display: flex; .el-tabs__item { flex: 1; height: 32px; padding: 0; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #fff; letter-spacing: 1px; background: rgba($color: #000c23, $alpha: 0.3); } .is-active { background: rgba($color: #469bff, $alpha: 0.4); } } .el-tabs__nav-wrap::after { height: 4px; background: rgba($color: #469bff, $alpha: 0.4); } .el-tabs__active-bar { height: 4px; background: #469bff; } ::v-deep .el-tabs__active-bar { width: 200px !important; transform: translateX(0); } } } ::v-deep .el-tree { background: transparent; color: #fff; overflow: auto; height: 586px; //原本675px flex: 1; .el-icon-caret-right:before { //display: none; } >.el-tree-node { min-width: 100%; display: inline-block; } //.el-tree-node__expand-icon { // width: 14px; // height: 14px; // background: url("../../../../../../assets/images/operation/add.png") no-repeat; // background-size: 100% 100%; // // margin-left: -25px; //} .custom-tree-node { margin-left: 14px; } //.el-tree-node__expand-icon.expanded { // transform: rotateY(0); // background: url("../../../../../../assets/images/operation/reduce.png") // no-repeat; // background-size: 100% 100%; //} .el-tree-node__expand-icon.is-leaf { //display: none; } .el-tree-node__content { // margin-left: 42px; } .el-tree-node__content:hover { background: rgba($color: #469bff, $alpha: 0.3); } .el-tree-node:focus>.el-tree-node__content { background: rgba($color: #469bff, $alpha: 0.8); } } ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background: rgba($color: #469bff, $alpha: 0.8); } } .image_lazy_right { width: 80%; height: 100%; //background: rgba(0, 137, 255, 0.13); .date-picker-box { width: 360px; } .select-box { width: 360px; } .input-box { width: 360px; } .demo-image__lazy { display: flex; height: 65%; overflow-y: auto; } .imgBox { display: flex; flex-wrap: wrap; .imgList { position: relative; width: 275px; margin: 0px 10px 0px 10px; overflow: hidden; .el-image { width: 100%; height: 165px; } } .typeNeme { position: absolute; top: 0px; background: #ffb802c7; padding: 2px 25px 2px 10px; border-bottom-right-radius: 19px; color: white; font-size: 13px; } .isWenTi { position: absolute; top: 145px; background: #000000a6; padding: 2px 15px 2px 10px; /* border-bottom-right-radius: 19px; */ color: white; font-size: 13px; } .typeGD { position: absolute; top: 12px; right: -27px; background: #00a3ff; padding: 2px 32px; -webkit-transform: rotate(45deg); transform: rotate(45deg); color: #ffffff; font-size: 13px; } .imgText { color: #ffffff; position: relative; margin-bottom: 10px; font-size: 12px; .imgTextLi { position: absolute; right: 10px; bottom: 0px; color: #00a3ff; cursor: pointer; } } } } .btn { width: 80px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .audit { color: #07ffe1; background: rgba(0, 92, 255, 0.08); border-radius: 2px 2px 2px 2px; border: 1px solid; border-image: linear-gradient(180deg, rgba(7, 255, 225, 0.8), rgba(7, 255, 225, 0.24)) 1 1; margin-right: 8px; img { width: 14px; height: 14px; margin-right: 4px; } } .delete { color: #ff4e02; background: rgba(0, 92, 255, 0.08); border-radius: 2px 2px 2px 2px; border: 1px solid; border-image: linear-gradient(180deg, rgba(255, 78, 2, 0.8), rgba(255, 78, 2, 0.24)) 1 1; img { width: 14px; height: 14px; margin-right: 4px; } } .examine { color: #469bff; background: rgba(0, 92, 255, 0.08); border-radius: 2px 2px 2px 2px; border: 1px solid; border-image: linear-gradient(180deg, rgba(0, 92, 255, 0.8), rgba(0, 92, 255, 0.24)) 1 1; margin-right: 8px; img { width: 14px; height: 14px; margin-right: 4px; } } .downloadC { color: #e6a23c; background: rgba(0, 92, 255, 0.08); border-radius: 2px 2px 2px 2px; border: 1px solid; border-image: linear-gradient(180deg, rgba(236, 162, 60, 0.8), rgba(236, 162, 60, 0.24)) 1 1; margin-right: 8px; img { width: 14px; height: 14px; margin-right: 4px; } } // 新增：从子组件移入的样式 //修改后的样式 .data-statistics-dialog { ::v-deep .el-dialog { height: 70vh !important; // 使用视口高度单位 display: flex; flex-direction: column; .el-dialog__body { flex: 1; padding: 20px; overflow: hidden; display: flex; flex-direction: column; } } .body-tabel { flex: 1; display: flex; flex-direction: column; overflow: hidden; .body-tabels { flex: 1; overflow: hidden; overflow-y: auto; display: flex; flex-direction: column; .vxe-table { flex: 1; display: flex; flex-direction: column; overflow: hidden; overflow-y: auto; .vxe-table--body-wrapper { flex: 1; overflow: auto; } } } } } } </style>

    ### `<template>` 部分 #### 整体布局 ```vue ``` - **作用**：定义页面的主体容器，将整个页面的内容包裹在内。 ... ...#### 左侧注释表格区域 ...- **作用**：作为左侧注释表格区域的容器。... - `v-model`：Vue 的指令，...
    filetype

    【scratch2.0少儿编程-游戏原型-动画-项目源码】火柴人激情格斗.zip

    资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。更多精品资源请访问 https://blog.csdn.net/ashyyyy/article/details/146464041 2：一套精品实用scratch2.0少儿编程游戏、动画源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！
    filetype

    b2bi-jvm-1.0.7-sources.jar

    b2bi-jvm-1.0.7-sources.jar
    leeloodeng
    • 粉丝: 37
    上传资源 快速赚钱

    最新资源