Skip to content

T
template_vue
Commit 13be746e authored by WBY1026's avatar WBY1026
Browse files
Options

修改代码

parent 85f9f910
Show whitespace changes
Inline Side-by-side
Showing with 729 additions and 391 deletions
src/api/demoData1.js
View file @ 13be746e
......@@ -29,6 +29,13 @@ export function searchAaa(query) {
params: query
})
}
export function searchBbb(query) {
return request({
url: '/demodata1/searchBbb',
method: 'get',
params: query
})
}
export function searchCcc(query) {
return request({
url: '/demodata1/searchCcc',
......@@ -43,6 +50,20 @@ export function searchCccc(query) {
params: query
})
}
export function searchDdd(query) {
return request({
url: '/demodata1/searchDdd',
method: 'get',
params: query
})
}
export function searchDddd(query) {
return request({
url: '/demodata1/searchDddd',
method: 'get',
params: query
})
}
export function searchEee(query) {
return request({
url: '/demodata1/searchEee',
......@@ -50,3 +71,26 @@ export function searchEee(query) {
params: query
})
}
export function searchTableList(data) {
return request({
method: 'post',
url: '/mixSelect/getList',
headers: {
'Content-Type': 'application/json'
},
data: data
})
}
export function getListTotal(data) {
return request({
method: 'post',
url: '/mixSelect/getListTotal',
headers: {
'Content-Type': 'application/json'
},
data: data
})
}
src/views/demoData/demoData1.vue
View file @ 13be746e
<template>
<div class="app-container">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="aaa" prop="aaa">
<el-select
v-model="queryParams.aaa"
placeholder="请选择aaa"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="(item,index) in aaaList"
:key="index"
:label="item.month"
:value="item.month"
/>
</el-select>
</el-form-item>
<el-form-item label="ccc" prop="ccc">
<el-select
v-model="queryParams.ccc"
placeholder="请选择ccc"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="(item,index) in cccList"
:key="index"
:label="item.ccc"
:value="item.ccc"
/>
<div>
<!-- 这里是选择栏 -->
<div class="select">
<el-select v-model="myaaa" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择aaa">
<el-option v-for="item in aaa" :key="item.month" :label="item.month" :value="item.month">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="eee" prop="eee">
<el-select
v-model="queryParams.eee"
placeholder="请选择eee"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="(item,index) in eeeList"
:key="index"
:label="item.eee"
:value="item.eee"
/>
<!-- <el-select v-model="mybbb" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择bbb">
<el-option v-for="item in bbb" :key="item.bbb" :label="item.bbb" :value="item.bbb">
</el-option>
</el-select> -->
<!-- bbb是2w,这里换成搜索 -->
<!-- <el-autocomplete class="inline-input" v-model="inputbbb" :fetch-suggestions="querySearch" placeholder="搜索bbb"
:trigger-on-focus="false" @select="handleSelect"></el-autocomplete> -->
<!-- ddd是3k,这里换成搜索 -->
<el-autocomplete class="inline-input" v-model="inputddd" :fetch-suggestions="querySearch" placeholder="搜索ccc"
@select="handleSelect"></el-autocomplete>
<el-select v-model="mycccc" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择cccc">
<el-option v-for="item in cccc" :key="item.cccc" :label="item.cccc" :value="item.cccc">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="cccc" prop="cccc">
<el-select
v-model="queryParams.cccc"
placeholder="请选择cccc"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="(item,index) in ccccList"
:key="index"
:label="item.cccc"
:value="item.cccc"
/>
<el-select v-model="myddd" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择ddd">
<el-option v-for="item in ddd" :key="item.ddd" :label="item.ddd" :value="item.ddd">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="高级搜索" style="float: right">
<el-switch
v-model="openSearch"
active-color="#46bcf3"
inactive-color="#dcdfe6"
/>
</el-form-item>
<div v-if="openSearch">
<!-- 显示的搜索框 -->
<el-form-item label="aaa">
<el-select
v-model="queryParams.aaa"
placeholder="请选择aaa"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="(item,index) in aaaList"
:key="index"
:label="item.month"
:value="item.month"
/>
<el-switch v-model="advancedSearch" active-text="高级搜索" inactive-text="">
</el-switch>
<div class="select" v-show="advancedSearch" style="margin-top: 20px;">
<el-select v-model="mydddd" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择dddd">
<el-option v-for="item in dddd" :key="item.dddd" :label="item.dddd" :value="item.dddd">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="aaa">
<el-select
v-model="queryParams.aaa"
placeholder="请选择aaa"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="(item,index) in aaaList"
:key="index"
:label="item.month"
:value="item.month"
/>
<el-select v-model="myeee" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择eee">
<el-option v-for="item in eee" :key="item.eee" :label="item.eee" :value="item.eee">
</el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item>
<el-checkbox v-model="queryParams.hhh" label="hhh" border />
<el-checkbox v-model="queryParams.iii" label="iii" border />
<el-checkbox v-model="queryParams.kkk" label="kkk" border />
</el-form-item>
<el-form-item style="margin-left: 18.5%">
<el-button
:class="commonField.queryClass"
:type="commonField.typePrimary"
:icon="commonField.queryIcon"
:size="commonField.smallSize"
@click="handleQuery"
>查询</el-button>
<el-button
:class="commonField.resetClass"
:icon="commonField.resetIcon"
:size="commonField.smallSize"
@click="resetQuery"
>重置</el-button>
</el-form-item>
<div style="float: right">
<el-form-item>
<el-button
:class="commonField.exportClass"
:type="commonField.typeSuccess"
:icon="commonField.exportIcon"
:size="commonField.smallSize"
@click="handleExport"
>导出</el-button>
</el-form-item>
</div>
<div class="checkBox">
<el-checkbox-group v-model="myCheckBox" :min="0" :max="3">
<el-checkbox v-for="check in checkBox" :label="check" :key="check">{{ check }}</el-checkbox>
</el-checkbox-group>
</div>
<div class="button">
<el-button type="primary" @click="searchToGetInfo">查询</el-button>
<el-button type="primary" @click="resetForm">重置</el-button>
<el-button type="primary" @click="test">测试</el-button>
</div>
</el-form>
<div class="placeholder" />
<div style="padding:5px 10px">
<div class="mb12 font-small-bold">列表</div>
<el-table v-loading="loading" border :data="demoData1List">
<el-table-column fixed type="index" label="序号" width="55" align="center" />
<el-table-column fixed label="客户" prop="ccc" :show-overflow-tooltip="true" width="150">
<template slot-scope="scope">
{{ scope.row.ccc || '-' }}
</template>
<div class="list">
<el-table :data="mytableList" v-loading="loading">
<el-table-column fixed label="用户" prop="ccc" width="100px"></el-table-column>
<!-- 月 -->
<el-table-column v-for="(item1, index1) in dateColData" width="360px" :key="index1" align="center" prop=""
:label="item1.label">
<!-- ijk -->
<el-table-column v-for="(item2, index2) in item1.children" :key="index2" :prop="item2.prop"
:label="item2.label" align="center">
</el-table-column>
<!-- 动态生成列 -->
<template v-for="month in dynamicColumns">
<el-table-column :key="month" :label="month" prop="aaa" :show-overflow-tooltip="true" width="150">
<template slot-scope="scope">
<span @click="dialogVisible=true">{{ scope.row[month] || '-' }}</span>
</template>
</el-table-column>
</template>
</el-table>
</div>
<pagination1
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<el-dialog :visible="dialogVisible" @close="dialogVisible = false">
<!-- 对话框内容 -->
<el-form>
<el-form-item />
</el-form>
<div style="float: right">
<el-button
:class="commonField.exportClass"
:type="commonField.typeSuccess"
:icon="commonField.exportIcon"
:size="commonField.smallSize"
@click="handleExport"
>导出</el-button>
</div>
</el-dialog>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[30, 40, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalPage">
</el-pagination>
<!-- <button @click="test">2222</button> -->
</div>
</template>
<script>
import {
listAll, listDemoData1, searchAaa, searchCcc, searchCccc, searchEee
} from '@/api/demoData1'
import commonField from '@/utils/commonField'
import pagination1 from '@/components/Pagination/Pagination1.vue'
import { exportIncomeWmsBox } from '@/api/incomeWmsBox'
import { searchAaa, searchBbb, searchCcc, searchCccc, searchDdd, searchDddd, searchEee, searchTableList, getListTotal } from '@/api/demoData1.js'
export default {
name: 'DemoData1',
components: {
pagination1
},
data() {
return {
// 遮罩层
aaa: [],
myaaa: [],
bbb: [],
mybbb: [],
cccc: [],
mycccc: [],
ddd: [],
myddd: [],
dddd: [],
mydddd: [],
eee: [],
myeee: [],
checkBox: ['fff', 'ggg', 'hhh', 'iii', 'jjj', 'kkk'],
myCheckBox: ['fff'],
fff: false,
ggg: false,
hhh: false,
iii: false,
jjj: false,
kkk: false,
// mytableList: [
// {
// "ccc": "wby",
// "data": [
// {
// "month": "2022",
// "i": "wby-i-2022",
// "j": "wby-j-2022",
// "k": "wby-k-2022",
// },
// {
// "month": "2023",
// "i": "wby-i-2023",
// "j": "wby-j-2023",
// "k": "wby-k-2023",
// }
// ],
// },
// {
// "ccc": "wgb",
// "data": [
// {
// "month": "2023",
// "i": "wgb-i-2023",
// "j": "wgb-j-2023",
// "k": "wgb-k-2023",
// },
// {
// "month": "2024",
// "i": "wgb-i-2024",
// "j": "wgb-j-2024",
// "k": "wgb-k-2024",
// },
// {
// "month": "2025",
// "i": "wgb-i-2025",
// "j": "wgb-j-2025",
// "k": "wgb-k-2025",
// }
// ],
// },
// ],
mytableList: [],
dateColData: [],
totalPage: 100,
pageSize: 30,
currentPage: 1,
loading: true,
// 总条数
total: 0,
openSearch: false,
// 表格数据
demoData1List: [],
dynamicColumns: [], // 用于动态生成列的数组
aaaList: [],
cccList: [],
ccccList: [],
eeeList: [],
dialogVisible: false, // 对话框可见性
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
page: 1,
rows: 100,
aaa: undefined,
bbb: undefined,
ccc: undefined,
ddd: undefined,
cccc: undefined,
dddd: undefined,
eee: undefined,
fff: undefined,
ggg: undefined,
hhh: undefined,
iii: undefined,
jjj: undefined,
kkk: undefined,
lll: undefined,
mmm: undefined
advancedSearch: false,
inputbbb: '',
inputddd: '',
// ============================================
// =============================================
}
},
mounted() {
this.initialize()
this.searchToGetInfo()
},
methods: {
// ===================================================
initialize() {
searchAaa().then(res => {
this.aaa = res.data
console.log(res);
})
searchBbb().then(res => {
this.bbb = res.data
console.log(res);
})
searchCcc().then(res => {
this.ccc = res.data
console.log(res);
})
searchCccc().then(res => {
this.cccc = res.data
console.log(res);
})
searchDdd().then(res => {
this.ddd = res.data
console.log(res);
})
// searchDddd().then(res => {
// this.dddd = res.data
// console.log(res);
// })
searchEee().then(res => {
this.eee = res.data
console.log(res);
})
},
scrollContainerHeight: 0,
// 表单参数
form: {},
// 表单校验
rules: {
// 搜索
searchToGetInfo() {
this.loading = true
// console.log(this.myCheckBox);
let temp = this.myCheckBox
if (temp.indexOf('fff') == -1) {
this.fff = false
} else {
this.fff = true
}
if (temp.indexOf('ggg') == -1) {
this.ggg = false
} else {
this.ggg = true
}
},
computed: {
commonField() {
return commonField
if (temp.indexOf('hhh') == -1) {
this.hhh = false
} else {
this.hhh = true
}
if (temp.indexOf('iii') == -1) {
this.iii = false
} else {
this.iii = true
}
if (temp.indexOf('jjj') == -1) {
this.jjj = false
} else {
this.jjj = true
}
if (temp.indexOf('kkk') == -1) {
this.kkk = false
} else {
this.kkk = true
}
const data = {
aaa: this.myaaa,
bbb: this.mybbb,
cccc: this.mycccc,
ddd: this.myddd,
dddd: this.mydddd,
eee: this.myeee,
fff: this.fff,
ggg: this.ggg,
hhh: this.hhh,
iii: this.iii,
jjj: this.jjj,
kkk: this.kkk,
pageSize: this.pageSize,
pageNo: this.currentPage
}
getListTotal(data).then(res => {
this.totalPage = res.data
})
searchTableList(data).then(res => {
console.log(res);
this.mytableList = res.data
// 判断返回的数据,然后调用渲染方法
if (this.myCheckBox.length <= 1) {
this.getDateType1()
} else if (this.myCheckBox.length == 2) {
this.getDateType2()
} else {
this.getDateType3()
}
this.loading = false
});
},
created() {
this.getList() // 列表查询
this.getaaaList()
this.getcccList()
this.getccccList()
this.geteeeList()
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val
this.searchToGetInfo()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val
methods: {
/** 获取aaa标签*/
getaaaList() {
searchAaa().then(response => {
if (response.code === 200) {
this.aaaList = response.data
this.searchToGetInfo()
},
resetForm() {
this.myCheckBox = ['fff'],
this.myaaa = []
this.mybbb = []
this.mycccc = []
this.myddd = []
this.mydddd = []
this.myeee = []
this.fff = true
this.ggg = false
this.hhh = false
this.iii = false
this.jjj = false
this.kkk = false
this.pageSize = 30
this.currentPage = 1
this.searchToGetInfo()
},
test() {
console.log(this.ddd);
},
// 匹配方法 ======
querySearch(queryString, cb) {
var restaurants = this.ddd;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
console.log(results);
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.ddd.indexOf(queryString) == 0);
};
},
// ===============
handleSelect(e){
console.log(e);
},
// ==================================================
// 勾选一个参数的方法
getDateType1() {
let dateTypeName = [];
this.dateColData = [];
this.mytableList.forEach(item => {
item.data.forEach(citem => {
// 找到这一项的month，判断目前有没有保存过
const index = dateTypeName.findIndex(
i => i.aaa == citem.aaa
)
// 没保存过就存进去
if (index == -1) {
dateTypeName.push(citem)
}
})
},
/** 获取ccc标签*/
getcccList() {
searchCcc().then(response => {
if (response.code === 200) {
this.cccList = response.data
});
console.log(dateTypeName, "一级表头");
// 添加表头数据
// 遍历dateTypeName
dateTypeName.forEach((item, index) => {
// 根据dateType每一个在最后需要的表头数据里面push二级表头
this.dateColData.push({
label: item.aaa,
children: [
{
prop: Object.keys(item)[1] + index,
label: null
}
]
})
},
/** 获取cccc标签*/
getccccList() {
searchCccc().then(response => {
if (response.code === 200) {
this.ccccList = response.data
})
// 遍历传来的数据
this.mytableList.forEach(data => {
data.data.forEach(item => {
dateTypeName.forEach((citem, cindex) => {
if (item.aaa == citem.aaa) {
let a = Object.keys(item)[1]
data[Object.keys(item)[1] + cindex] = item[a]
}
})
})
})
console.log(this.mytableList, "this.mytableList");
},
/** 获取eee标签*/
geteeeList() {
searchEee().then(response => {
if (response.code === 200) {
this.eeeList = response.data
getDateType2() {
let dateTypeName = [];
this.dateColData = [];
this.mytableList.forEach(item => {
item.data.forEach(citem => {
// 找到这一项的month，判断目前有没有保存过
const index = dateTypeName.findIndex(
i => i.aaa == citem.aaa
)
// 没保存过就存进去
if (index == -1) {
dateTypeName.push(citem)
}
})
});
console.log(dateTypeName, "一级表头");
// 添加表头数据
// 遍历dateTypeName
dateTypeName.forEach((item, index) => {
// 根据dateType每一个在最后需要的表头数据里面push二级表头
this.dateColData.push({
label: item.aaa,
children: [
{
prop: Object.keys(item)[1] + index,
label: Object.keys(item)[1] + "的值"
},
/** 查询列表 */
getList() {
this.loading = true
listDemoData1(this.queryParams).then(
response => {
console.log('数据源', response)
this.demoData1List = response.rows
this.formatData(response.rows)
this.total = response.total
this.loading = false
{
prop: Object.keys(item)[2] + index,
label: Object.keys(item)[2] + "的值"
}
)
]
})
})
console.log('数据源', this.demoData1List)
},
formatData(data) {
// 遍历数据，提取不重复的月份作为列标签
const months = new Set()
data.forEach(item => {
Object.keys(item).forEach(key => {
if (key !== 'ccc' && key !== '__row_number__') {
months.add(key)
// 遍历传来的数据
this.mytableList.forEach(data => {
data.data.forEach(item => {
dateTypeName.forEach((citem, cindex) => {
if (item.aaa == citem.aaa) {
let a = Object.keys(item)[1]
let b = Object.keys(item)[2]
data[Object.keys(item)[1] + cindex] = item[a]
data[Object.keys(item)[2] + cindex] = item[b]
}
})
})
console.log('months是:', months)
// 将 Set 对象转换为数组
const sortedMonths = Array.from(months)
// 对数组进行排序
sortedMonths.sort()
console.log('排序后的值:', sortedMonths)
this.dynamicColumns = sortedMonths
console.log('绑定的值', this.dynamicColumns)
},
// 取消按钮
cancel() {
this.open = false
this.reset()
})
console.log(this.mytableList, "this.mytableList");
},
// 表单重置
reset() {
this.form = {
businessId: undefined,
ggg: undefined,
dddd: undefined,
mmm: undefined,
jjj: undefined,
iii: undefined,
lll: undefined,
ccc: undefined,
bbb: undefined,
cccc: undefined,
fff: undefined,
aaa: undefined,
ddd: undefined,
kkk: undefined,
eee: undefined,
hhh: undefined,
flag: '1'
getDateType3() {
let dateTypeName = [];
this.dateColData = [];
this.mytableList.forEach(item => {
item.data.forEach(citem => {
// 找到这一项的month，判断目前有没有保存过
const index = dateTypeName.findIndex(
i => i.aaa == citem.aaa
)
// 没保存过就存进去
if (index == -1) {
dateTypeName.push(citem)
}
this.resetForm('form')
})
});
console.log(dateTypeName, "一级表头");
// 添加表头数据
// 遍历dateTypeName
dateTypeName.forEach((item, index) => {
// 根据dateType每一个在最后需要的表头数据里面push二级表头
this.dateColData.push({
label: item.aaa,
children: [
{
prop: Object.keys(item)[1] + index,
label: Object.keys(item)[1] + "的值"
},
/** 查询按钮操作 */
handleQuery() {
// this.queryParams.page = 1
this.getList()
{
prop: Object.keys(item)[2] + index,
label: Object.keys(item)[2] + "的值"
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
page: 1,
rows: 100,
ggg: undefined,
dddd: undefined,
mmm: undefined,
jjj: undefined,
iii: undefined,
lll: undefined,
ccc: undefined,
bbb: undefined,
cccc: undefined,
fff: undefined,
aaa: undefined,
ddd: undefined,
kkk: undefined,
eee: undefined,
hhh: undefined
{
prop: Object.keys(item)[3] + index,
label: Object.keys(item)[3] + "的值"
}
this.handleQuery()
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams
this.$confirm('是否确认操作?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return exportIncomeWmsBox(queryParams).then(response => {
const blob = new Blob([response])
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)// 创建下载的链接
downloadElement.href = href
downloadElement.download = '库存管理信息' + '.xls' // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click()// 点击下载
document.body.removeChild(downloadElement)// 下载完成移除元素
window.URL.revokeObjectURL(href)// 释放掉blob对象
]
})
})
// 遍历传来的数据
this.mytableList.forEach(data => {
data.data.forEach(item => {
dateTypeName.forEach((citem, cindex) => {
if (item.aaa == citem.aaa) {
let a = Object.keys(item)[1]
let b = Object.keys(item)[2]
let c = Object.keys(item)[3]
data[Object.keys(item)[1] + cindex] = item[a]
data[Object.keys(item)[2] + cindex] = item[b]
data[Object.keys(item)[3] + cindex] = item[c]
}
})
})
})
console.log(this.mytableList, "this.mytableList");
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
font-size: 18px;
padding: 0;
.placeholder {
height: 1.3vh;
background-color: #F4F4F4;
margin-bottom: 10px
}
}
<style scoped>
.checkBox {
margin-top: 20px;
margin-left: 20px;
}
.button {
margin-top: 20px;
margin-left: 20px;
}
.list {
padding: 20px;
}
</style>
<!-- 多的模糊搜索 -->
<!-- 获取选中事件,选中后在后面对应的tag里面加上 -->
<!-- 删了以后相当于把数组里的tag去掉 -->
<!-- 记得去重,相同内容不让推进去 -->
<!-- 一键清空多选框 -->
\ No newline at end of file
src/views/template/planeGraph.vue
View file @ 13be746e
<!-- eslint-disable -->
<template>
<div>平面图</div>
<div id="viewWindow" class="viewWindow">
<div id="backGround" class="backGround">
<p>教育
有道智慧教育
中国大学MOOC
网易有道校企合作
关于有道
有道介绍
投资者关系
社会责任
同道计划
廉正举报
联系我们
加入有道
校园招聘
社会招聘
相关资质
营业执照
出版物经营许可证
广播电视节目
制作许可证
用户资质
隐私政策
服务条款</p>
</div>
</div>
</template>
<script>
/* eslint-disable*/
export default {
name: "planeGraph",
name: 'PlaneGraph',
data() {
return{
return {
viewWindow: null,
backGround: null,
zoom: 1.0,
timer: null
}
},
mounted() {
// 获取视窗
this.viewWindow = document.getElementById('viewWindow')
// 获取背景
this.backGround = document.getElementById('backGround')
// 给视窗挂滚轮监听
this.viewWindow.addEventListener('wheel', this.onScroll)
// 给背景挂按键监听
this.backGround.addEventListener('mousedown', this.mouseDown)
this.backGround.addEventListener('mouseup', this.mouseUp)
},
beforeDestroy() {
// 卸载视窗滚轮监听
this.viewWindow.removeEventListener('wheel', this.onScroll)
this.backGround.removeEventListener('mousedown', this.mouseDown)
this.backGround.removeEventListener('mouseup', this.mouseUp)
console.log('卸载鼠标监听');
},
methods: {
// 鼠标滚动后判断缩放
onScroll(e) {
if (e.wheelDelta < 0) {
console.log('鼠标滚轮后滚,缩小')
this.zoomDown()
} else if (e.wheelDelta > 0) {
console.log('鼠标滚轮前滚,放大')
this.zoomUp()
}
},
// 放大
zoomUp() {
this.zoom += 0.1
document.querySelector(":root").style.setProperty("--zoom", this.zoom)
},
// 缩小
zoomDown() {
this.zoom -= 0.1
document.querySelector(":root").style.setProperty("--zoom", this.zoom)
},
// 鼠标按下
mouseDown() {
// console.log('按下');
// 按到背景，给背景挂移动监听
this.backGround.addEventListener('mousemove', this.mouseMoveThrottle)
this.test()
},
// 鼠标移动，节流
mouseMoveThrottle() {
if (!this.timer) {
this.timer = setTimeout(() => {
this.timer = null
this.mouseMove.call(this)
}, 500)
}
},
mouseMove() {
console.log(111);
// 移动背景
// 重新计算缩放的中心位置
},
// 鼠标松开
mouseUp() {
// console.log('抬起');
// 松开背景，给背景移除移动监听
this.backGround.removeEventListener('mousemove', this.mouseMoveThrottle)
},
drag() {
console.log('拖动');
},
test(){
let a = 10
return function () {
console.log(a);
}
},
getAB() {
// var divA = document.getElementById('divA');
// var divB = document.getElementById('divB');
// function getDistanceToCenter() {
// // 获取A的宽度和高度
// var aWidth = divA.offsetWidth;
// var aHeight = divA.offsetHeight;
// // 获取B的位置和尺寸
// var bLeft = divB.offsetLeft;
// var bTop = divB.offsetTop;
// var bWidth = divB.offsetWidth;
// var bHeight = divB.offsetHeight;
// // 计算B左边框和顶边到A中心点的距离
// var distanceX = (bLeft + bWidth / 2) - (aWidth / 2);
// var distanceY = (bTop + bHeight / 2) - (aHeight / 2);
// return { x: distanceX, y: distanceY };
// }
// // 示例：在控制台输出B左边框和顶边到A中心点的距离
// console.log(getDistanceToCenter());
}
}
}
</script>
<style scoped lang="scss">
:root {
--zoom: 1.0;
}
.viewWindow {
overflow: hidden;
width: 1000px;
height: 600px;
border: 1px solid black;
}
.backGround {
scale: (var(--zoom));
transform-origin: 10px 10px; // 定义缩放原点,相对于左上角的距离x、y，单位px
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
width: 500px;
height: 500px;
background-color: antiquewhite;
}
.mode1 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
background-color: aquamarine;
}
</style>
// 父div-A里面有一个子div-B，B会在A里面缩放和移动，我希望实时获取B左边框和顶边到A中心点的距离（px）</style>
vue.config.js
View file @ 13be746e
......@@ -115,11 +115,13 @@ module.exports = {
// }
// },
[process.env.VUE_APP_BASE_API]: {
target: `http://49.232.167.247:20014/`,
// target: `http://192.168.1.38:8088/`,
// target: `http://localhost:8088/`,
// target: `http://10.5.87.231:10010/internal`,
// target: `http://117.122.212.91:32012/`,
// target: `http://192.144.239.97:20070/`,
// ===
target: `http://192.168.1.37:8088/`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment