diff --git a/src/api/index.js b/src/api/index.js index dcdcc215..d75a6bad 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -575,6 +575,13 @@ cameraStop(cameraSerialNumber,cameraChannelNumber,num) { selUserbyid(data){ return sendGetRequest(`/sel/userbyid/`+data, ``) }, +// 获取物联网卡号 +qibenGeticcid(data){ + return sendPostRequest(`/qiben/geticcid`, data) +}, +popupwindow(data){ + return sendGetRequest(`/qiben/popupwindow`, data) +}, //根据设备ID获取设备状态值 selControlPermissions(data){ return sendGetRequest(`/getcontrol/selControlPermissions`, data) @@ -881,4 +888,5 @@ getIccid(data){ getInsectChartData(data){ return sendPostParamsRequest(`/v1/getInsectChartData`, data) }, + }; diff --git a/src/assets/css/main.css b/src/assets/css/main.css index a82b8f23..95308729 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -879,6 +879,14 @@ textarea { color: #859BB6; } +.el-notification__content p { + word-break: break-all; +} + +.color-red { + color: red; +} + .outline { color: red; font-weight: bold; @@ -2070,12 +2078,18 @@ textarea { height: auto; } +.realTime .page-content .page-iccid { + margin-top: -15px; + margin-bottom: 10px; +} + .realTime .page-content .control-view { display: flex; align-items: center; position: absolute; right: 30px; top: 10px; + max-width: 50%; } .realTime .page-content .control-view .title { @@ -2086,7 +2100,7 @@ textarea { display: flex; align-items: center; overflow: hidden; - max-width: 806px; + max-width: calc(100% - 62px); } .realTime .page-content .control-view .control-list > div { diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 199a3652..ce15e806 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -944,7 +944,14 @@ textarea { } } } - +.el-notification__content{ + p{ + word-break: break-all; + } +} +.color-red{ + color: red; +} .outline { color: red; font-weight: bold; @@ -2198,14 +2205,17 @@ textarea { &.control-page { height: auto; } - + .page-iccid{ + margin-top: -15px; + margin-bottom: 10px; + } .control-view { display: flex; align-items: center; position: absolute; right: 30px; top: 10px; - + max-width: 50%; .title { margin-right: 10px; } @@ -2215,7 +2225,7 @@ textarea { align-items: center; overflow: hidden; - max-width: 806px; + max-width: calc(100% - 62px); >div { // width: 100%!important; diff --git a/src/assets/img/logo-test.jpg b/src/assets/img/logo-test.jpg new file mode 100644 index 00000000..017e4396 Binary files /dev/null and b/src/assets/img/logo-test.jpg differ diff --git a/src/assets/js/charts.js b/src/assets/js/charts.js index 515d7ba2..583f4ca1 100644 --- a/src/assets/js/charts.js +++ b/src/assets/js/charts.js @@ -208,6 +208,7 @@ export function realTimeLine(id, data,pageId) { }) + // 默认只显示第0个 if(!selTure){ dataList.forEach((el, index) => { selList[el.name]=(index==0?true:false) @@ -376,25 +377,25 @@ export function realTimeLine1(id, data,pageId) { var Xdata = [] // var equipmentList=store.state.equipmentSelList - var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList')) + var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList')?localStorage.getItem('equipmentSelList'):'[]') var list = [] var selList={} var selTure=false var dataList = [] - // equipmentList.forEach(obj => { - // if (obj.deviceId == pageId) { - // // 在找到的对象中添加参数 - // if(obj.selList){ - // selList = obj.selList; - // selTure=true - // }else{ - // selList ={} - // selTure=false - // } + equipmentList.forEach(obj => { + if (obj.deviceId == pageId) { + // 在找到的对象中添加参数 + if(obj.selList1){ + selList = obj.selList1; + selTure=true + }else{ + selList ={} + selTure=false + } - // } - // }); + } + }); data.forEach((el, index) => { Xdata.push(el.time) @@ -411,11 +412,12 @@ export function realTimeLine1(id, data,pageId) { }) - // if(!selTure){ - // dataList.forEach((el, index) => { - // selList[el.name]=(index==0?true:false) - // }) - // } + // 默认全部显示 + if(!selTure){ + dataList.forEach((el, index) => { + selList[el.name]=true + }) + } dataList.forEach((el, index) => { list.push({ name: el.name, @@ -557,16 +559,16 @@ export function realTimeLine1(id, data,pageId) { option && myChart.setOption(option); myChart.resize(); - // myChart.on('legendselectchanged', function (params) { - // equipmentList.forEach((obj,index) => { - // if (obj.deviceId== pageId) { - // // 在找到的对象中添加参数 - // obj.selList=params.selected + myChart.on('legendselectchanged', function (params) { + equipmentList.forEach((obj,index) => { + if (obj.deviceId== pageId) { + // 在找到的对象中添加参数 + obj.selList1=params.selected - // } - // }); - // localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList)) - // }); + } + }); + localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList)) + }); window.addEventListener("resize", function () { myChart.resize(); }); @@ -579,25 +581,25 @@ export function realTimeLine2(id, data,pageId) { var Xdata = [] // var equipmentList=store.state.equipmentSelList - var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList')) + // var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList')) var list = [] var selList={} var selTure=false var dataList = [] - equipmentList.forEach(obj => { - if (obj.deviceId == pageId) { - // 在找到的对象中添加参数 - if(obj.selList){ - selList = obj.selList; - selTure=true - }else{ - selList ={} - selTure=false - } + // equipmentList.forEach(obj => { + // if (obj.deviceId == pageId) { + // // 在找到的对象中添加参数 + // if(obj.selList){ + // selList = obj.selList; + // selTure=true + // }else{ + // selList ={} + // selTure=false + // } - } - }); + // } + // }); data.forEach((el, index) => { Xdata.push(el.time) @@ -736,16 +738,16 @@ export function realTimeLine2(id, data,pageId) { option && myChart.setOption(option); myChart.resize(); - myChart.on('legendselectchanged', function (params) { - equipmentList.forEach((obj,index) => { - if (obj.deviceId== pageId) { - // 在找到的对象中添加参数 - obj.selList=params.selected + // myChart.on('legendselectchanged', function (params) { + // equipmentList.forEach((obj,index) => { + // if (obj.deviceId== pageId) { + // // 在找到的对象中添加参数 + // obj.selList=params.selected - } - }); - localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList)) - }); + // } + // }); + // localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList)) + // }); window.addEventListener("resize", function () { myChart.resize(); }); diff --git a/src/store/index.js b/src/store/index.js index fabc9dcc..11dcc33b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -12,6 +12,7 @@ export default new Vuex.Store({ equipmentSelList:[],//存储当前echarts的sel数组 equipmentIndex: 1,//当前在第几个设备 equipmentName: null,//当前设备 小设备的各个名字 + iccidList:[],//各个设备iccid的数组 nameList: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Elven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen'], formulaNum: [16, 48, 80, 112, 144, 176, 208, 240], ControlData:null,//控制器五方数据 diff --git a/src/views/index.vue b/src/views/index.vue index 3e6aab89..167d020d 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -2,10 +2,11 @@
+
- {{mainData.projectName}} + {{mainData.projectName}}
@@ -22,7 +23,8 @@
-
欢迎，{{ userInfo.nickName }}
+
欢迎，{{ userInfo.nickName }} +
{{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}
@@ -315,6 +317,41 @@ export default { return 'formula' } }, + +getQibenGeticcid(){ + const store = this.$store.state + var data=this.devicesList.map(device => ({ + deviceId: device.deviceId, + iccid: device.iccidcode, + deviceName: device.deviceTypeName +})); +var iccidList=[] + var userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : { userid: -1 } + + this.api.popupwindow({userId:userInfo.userid}).then(res1=>{ + data.forEach((el,index)=>{ + this.api.qibenGeticcid(el).then(res=>{ + if(res.data.code==200){ + iccidList.push(res.data.data) + this.$store.state.iccidList=iccidList + if(res1.data.data&&res.data.data.expired){ + setTimeout(() => { + this.$notify({ + title: '提示', + dangerouslyUseHTMLString: true, + message: `
${res.data.data.deviceName}卡号为${res.data.data.iccid},物联网卡即将到期，剩余时间${res.data.data.daysDifference}天，请联系管理员。
`, + duration:60000,//10s自动关闭 + }); + }, 10); + } + } + }) + }) + + + }) + +}, //获取设备 getEqbyid(selTrue) { const that = this @@ -323,6 +360,11 @@ export default { this.api.selUserbyid(userInfo.userid).then((res) => { if (res.data.code == 200) { var data=res.data.data.devices + this.devicesList=res.data.data.devices + if(selTrue){ + this.getQibenGeticcid(data) + } + this.$store.state.equipmentList =data.map((item, index) => { return { ...item, diff --git a/src/views/page/dataAnalysis.vue b/src/views/page/dataAnalysis.vue index a2570393..4d1d4a52 100644 --- a/src/views/page/dataAnalysis.vue +++ b/src/views/page/dataAnalysis.vue @@ -134,6 +134,7 @@ export default { pageSize: 999, isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0 } + var data1 = store.equipmentList[index - 1].deviceId this.api.selFsTime(data).then(res => { this.loading.close() if (res.data.code == 200) { @@ -149,10 +150,11 @@ export default { }) }; }); - realTimeLine1('realTime-line', chartsData) + + realTimeLine1('realTime-line', chartsData,data1) } else { var chartsData=[] - realTimeLine1('realTime-line', chartsData) + realTimeLine1('realTime-line', chartsData,data1) this.$message.error(res.data.msg); } }) diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue index 32b4ae65..18cbd2c5 100644 --- a/src/views/page/largeScreen.vue +++ b/src/views/page/largeScreen.vue @@ -2218,16 +2218,16 @@ export default { left: 0; z-index: 99; -webkit-mask-image: linear-gradient(90deg, - transparent 22%, + transparent 0%, transparent 10%, - blue 30%, - blue 70%, - transparent 75%, + blue 20%, + blue 80%, + transparent 90%, transparent 100%); .map1 { - width: 60%; - height: 60%; + width: 90%; + height:90%; // background: url('../assets/img/map.png') center no-repeat; // background-size: 100% 100%; // -webkit-mask-image: linear-gradient(0deg, transparent 5%, @@ -2238,7 +2238,7 @@ export default { // transparent 100%); -webkit-mask-image: linear-gradient(transparent 0%, blue 8%, - blue 85%, + blue 92%, transparent 100%); // transform: scale(0.6); position: absolute; @@ -2254,11 +2254,11 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - -webkit-mask-image: linear-gradient(90deg, + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 5%, - blue 93%, - transparent 99%); + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; @@ -2294,9 +2294,9 @@ export default { z-index: 10; -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 5%, - blue 93%, - transparent 99%); + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; @@ -2360,12 +2360,12 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - top: -64px; - -webkit-mask-image: linear-gradient(90deg, + + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 5%, - blue 93%, - transparent 99%); + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; @@ -2443,13 +2443,12 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - top: -64px; - -webkit-mask-image: linear-gradient(90deg, + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 2%, - blue 97%, - transparent 99%); - .drag_img { + blue 13%, + blue 87%, + transparent 100%); + .drag_img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(transparent 0%, @@ -2591,12 +2590,11 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - top: -64px; - -webkit-mask-image: linear-gradient(90deg, + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 2%, - blue 97%, - transparent 99%); + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; @@ -2642,13 +2640,12 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - top: -64px; - -webkit-mask-image: linear-gradient(90deg, + + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 2%, - blue 97%, - transparent 99%); - + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; height: auto; @@ -2676,12 +2673,12 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - top: -64px; - -webkit-mask-image: linear-gradient(90deg, + + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 2%, - blue 97%, - transparent 99%); + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; @@ -2781,12 +2778,12 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - top: -64px; - -webkit-mask-image: linear-gradient(90deg, + + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 2%, - blue 97%, - transparent 99%); + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; @@ -2905,12 +2902,12 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - top: -64px; - -webkit-mask-image: linear-gradient(90deg, + + -webkit-mask-image: linear-gradient(90deg, transparent 0%, - blue 2%, - blue 97%, - transparent 99%); + blue 13%, + blue 87%, + transparent 100%); .drag_img { width: 100%; @@ -3010,10 +3007,10 @@ export default { // top: 0.3rem; // left: 0.5rem; z-index: 10; - -webkit-mask-image: linear-gradient(90deg, - transparent 4%, - blue 18%, - blue 88%, + -webkit-mask-image: linear-gradient(90deg, + transparent 0%, + blue 13%, + blue 87%, transparent 100%); .drag_img { @@ -3025,10 +3022,11 @@ export default { transparent 97%); } - .axis_1 { + .axis_1 { width: 0.7rem; height: 0.86rem; position: absolute; + cursor: pointer; top: 5%; left: 22%; z-index: 99; @@ -3038,6 +3036,7 @@ export default { width: 0.7rem; height: 0.86rem; position: absolute; + cursor: pointer; top: 23%; left: 41%; z-index: 99; @@ -3047,6 +3046,7 @@ export default { width: 0.7rem; height: 0.86rem; position: absolute; + cursor: pointer; top: 43%; left: 15%; z-index: 99; @@ -3056,6 +3056,7 @@ export default { width: 0.7rem; height: 0.86rem; position: absolute; + cursor: pointer; top: 3%; left: 64%; z-index: 99; @@ -3065,6 +3066,7 @@ export default { width: 0.7rem; height: 0.86rem; position: absolute; + cursor: pointer; top: 29%; left: 78%; z-index: 99; @@ -3074,6 +3076,7 @@ export default { width: 0.7rem; height: 0.86rem; position: absolute; + cursor: pointer; top: 63%; left: 65%; z-index: 99; @@ -3083,6 +3086,7 @@ export default { width: 1.04rem; height: 1.18rem; position: absolute; + cursor: pointer; top: 42%; left: 45%; z-index: 99; diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue index 75ad6675..16841ce5 100644 --- a/src/views/page/largeScreen1.vue +++ b/src/views/page/largeScreen1.vue @@ -24,12 +24,11 @@
-
+
控制中心
-
@@ -306,7 +302,6 @@ {{ item.greenhouseName }}#温室
-
@@ -370,7 +365,6 @@ 泵房
-
@@ -381,7 +375,6 @@ {{ item.greenhouseName }}#温室
-
@@ -445,11 +438,7 @@ 泵房 - + --> @@ -459,7 +448,6 @@ 100个拱棚 -
@@ -469,7 +457,6 @@ {{ item.greenhouseName }}
- @@ -532,7 +519,6 @@ 泵房 -
@@ -541,7 +527,6 @@ 控制中心
-
@@ -551,7 +536,6 @@ {{ item.greenhouseName }}
- @@ -617,7 +601,6 @@ {{ item.greenhouseName }} - @@ -680,7 +663,6 @@ 控制中心 -
@@ -690,7 +672,6 @@ {{ item.greenhouseName }}
- @@ -743,7 +724,6 @@ 控制器南 - @@ -753,7 +733,6 @@ 控制器北 - --> @@ -772,7 +751,6 @@ C1 -
@@ -781,7 +759,6 @@ C2
-
@@ -791,7 +768,6 @@ {{ item.greenhouseName }}
- @@ -907,6 +883,7 @@ export default { popContentList2: [], listNumber:[{id:1,num:6}, {id:2,num:35}, + {id:4,num:6}, {id:5,num:5}, {id:7,num:7}, {id:8,num:6}, @@ -961,8 +938,8 @@ export default { }); }, - getTopOrLeft(id) { - if (id == 2) { + getTopOrLeft1_1(id) { + if (id == 2) { return "top:46%;left:46%;transform: translate(-50%,-50%);"; } else if (id == 5) { return "top:53%;left:47%;transform: translate(-50%,-50%);"; @@ -1247,7 +1224,7 @@ export default { return 'top:40%;left:27.5%;transform: translate(54%,0);' } }, - getNamePosition(id) { + getNamePosition(id) { if (id == 1) { return "position: absolute;top: 41%;left: 13%;"; } else if (id == 2) { @@ -1263,6 +1240,7 @@ export default { } }, + autoPlay1() { let that = this; this.autoPlay = false; @@ -1273,11 +1251,12 @@ export default { let that = this; this.autoPlay = true; localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay)); - var num=this.listNumber.find(item => item.id == that.limitUserId) + var num=this.listNumber.find(item => item.id == that.limitUserId).num + clearInterval(this.timer2) && this.timer2; var maxNum=num?num:0 this.timer2 = setInterval(() => { that.popContentCurrent++; - if (that.popContentCurrent >= maxNum) { + if (that.popContentCurrent > maxNum) { that.popContentCurrent = 1; } }, 3000); @@ -1316,31 +1295,34 @@ export default { this.dataInit(userInfo.userid); - let that = this; - this.autoPlay = JSON.parse(localStorage.getItem("autoPlay")); - if (this.autoPlay == false) { - clearInterval(that.timer2) && this.timer2; - } else { - var num=this.listNumber.find(item => item.id == that.limitUserId) - var maxNum=num?num:0 - this.timer2 = setInterval(() => { - that.popContentCurrent++; - if (that.popContentCurrent >= maxNum) { - that.popContentCurrent = 1; - } - }, 3000); - - } + }, // 获取用户id权限 get_user_getjurisdiction(userId) { + let that = this; this.api.user_getjurisdiction(userId).then((res) => { if (res.data.code == 200) { this.limitUserId = (res.data.data.filter(el => el.id == 1 || el.id == 2 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11 || el.id == 12|| el.id == 13))[0].id; setTimeout(() => { this.drag_boxHandler(this.limitUserId); }, 0); + + this.autoPlay = JSON.parse(localStorage.getItem("autoPlay")); + if (this.autoPlay) { + clearInterval(this.timer2) && this.timer2; + console.log(this.limitUserId); + var num=this.listNumber.find(item => item.id == that.limitUserId).num + var maxNum=num?num:0 + this.timer2 = setInterval(() => { + that.popContentCurrent++; + if (that.popContentCurrent > maxNum) { + that.popContentCurrent = 1; + } + console.log( that.popContentCurrent); + }, 3000); + + } // if (this.limitUserId == 1) { // this.drag_boxHandler(); // } else if (this.limitUserId == 2) { @@ -1404,678 +1386,30 @@ export default { }, drag_boxHandler(id) { - console.log(id,111); let demo = this.$refs[`drag_box${id}`]; demo = document.querySelector(`.drag_box${id}`); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; + let scale = 1; // 初始缩放比例 - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - - drag_boxHandler1() { - let demo = this.$refs.drag_box2; - demo = document.querySelector(".drag_box2"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler13() { - let demo = this.$refs.drag_box13; - demo = document.querySelector(".drag_box13"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler12() { - let demo = this.$refs.drag_box12; - demo = document.querySelector(".drag_box12"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler11() { - let demo = this.$refs.drag_box11; - demo = document.querySelector(".drag_box11"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler10() { - let demo = this.$refs.drag_box10; - demo = document.querySelector(".drag_box10"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler9() { - let demo = this.$refs.drag_box9; - demo = document.querySelector(".drag_box9"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler8() { - let demo = this.$refs.drag_box8; - demo = document.querySelector(".drag_box8"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler7() { - let demo = this.$refs.drag_box7; - demo = document.querySelector(".drag_box7"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - drag_boxHandler5() { - let demo = this.$refs.drag_box5; - demo = document.querySelector(".drag_box5"); //待拖拽元素 - let canMove = false; //拖拽状态 - let x = 0, - y = 0; //鼠标位置 - //监听按下鼠标事件 - demo.onmousedown = function (e) { - x = e.pageX - demo.offsetLeft; - y = e.pageY - demo.offsetTop; - canMove = true; //激活拖拽状态 - }; - //监听右击鼠标事件 - demo.oncontextmenu = function (e) { - e.preventDefault(); //阻止默认行为 - }; - //监听鼠标抬起事件 - window.onmouseup = function () { - canMove = false; //关闭拖拽状态 - }; - - window.onblur = function () { - //窗口失去焦点事件 - canMove = false; //关闭拖拽状态 - }; - - //监听鼠标移动事件 - window.onmousemove = function (e) { - e.preventDefault(); //阻止默认行为(字不能拖走) - if (canMove) { - //对范围判断 - let left = e.pageX - x; - let top = e.pageY - y; - - //if (left > 0) left = 0 //当距离左边小于0时 让它为0 - //if (top > 0) top = 0 //当距离上边小于0时 让它为0 - // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) - // let maxLeft = window.innerWidth - demo.offsetWidth - // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) - // let maxTop = window.innerHeight - demo.offsetHeight - - // if (left > maxLeft) left = maxLeft - // if (top > maxTop) top = maxTop - - demo.style.left = left + "px"; - demo.style.top = top + "px"; - } - }; - let scale = 1; - demo.onwheel = function (e) { - if (e.wheelDelta > 0) { - scale += 0.05; - if (scale > 4) { - scale = 4; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } else { - scale -= 0.05; - if (scale < 1) { - scale = 1; - } - demo.style.transform = `scale(${scale})`; - // console.log(scale); - } - }; - }, - }, +// 只保留滚轮缩放功能 +demo.onwheel = function(e) { + e.preventDefault(); // 阻止默认滚动行为 + + if (e.deltaY < 0) { // 向上滚动，放大 + scale += 0.05; + if (scale > 4) { + scale = 4; // 最大放大4倍 + } + } else { // 向下滚动，缩小 + scale -= 0.05; + if (scale < 0.5) { + scale = 0.5; // 最小缩小到0.5倍 + } + } + + demo.style.transform = `translate(-50%,-50%) scale(${scale})`; +} + } + } };