|
|
@@ -0,0 +1,325 @@
|
|
|
+// const GATEWAY_URL = "http://23.37.100.87:8084";
|
|
|
+// const GATEWAY_URL = "http://23.37.100.80:8084";
|
|
|
+const GATEWAY_URL = "http://192.168.0.95:8084";
|
|
|
+const PAGE_BASIC = GATEWAY_URL + "/basic";
|
|
|
+
|
|
|
+$(function() {
|
|
|
+ // 长度控制对象
|
|
|
+ let lenObj = {
|
|
|
+ "left-center": 7,
|
|
|
+ "right-center": 6,
|
|
|
+ "left-bottom": 3
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数据对象
|
|
|
+ let dataObj = reqGet(PAGE_BASIC + '/apiNoProcess/scence/getAllSceneAndThemeAndSystem');
|
|
|
+ let scene = dataObj.scenes; //场景
|
|
|
+ let theme = dataObj.sceneThemes; //主题
|
|
|
+
|
|
|
+ // 开场动画效果
|
|
|
+ (function() {
|
|
|
+ $(".left-content").animate({
|
|
|
+ left: 0
|
|
|
+ }, 1000);
|
|
|
+ $(".right-content").animate({
|
|
|
+ right: 0
|
|
|
+ }, 1000);
|
|
|
+ $(".top-content").animate({
|
|
|
+ top: 0
|
|
|
+ }, 1000);
|
|
|
+ $(".bottom-content").animate({
|
|
|
+ bottom: 0
|
|
|
+ }, 1000);
|
|
|
+ })()
|
|
|
+
|
|
|
+ // 左中
|
|
|
+ let idenId = $(".left-center>.theme").attr("data-id") * 1;
|
|
|
+ let leftTheme = theme.filter(function(item) {
|
|
|
+ return item.sceneId == idenId
|
|
|
+ });
|
|
|
+ let leftCenterHtml = '';
|
|
|
+ let leftId = 1; //中间变量控制
|
|
|
+ let leftIdenId = Math.ceil(leftTheme.length / 7); //控制变量的最大值限制
|
|
|
+ $(".left-center>div:not(.theme)").remove();
|
|
|
+ for (let i = 0; i < (leftTheme.length <= 7 ? leftTheme.length : 7); i++) {
|
|
|
+ leftCenterHtml += `
|
|
|
+ <div data-url="${leftTheme[i].url}">
|
|
|
+ <span class="text">${leftTheme[i].themeName}</span>
|
|
|
+ <i class="iconfont icon-lajiche text"></i>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+ $(".left-center").append(leftCenterHtml);
|
|
|
+
|
|
|
+ $(".left-center").on("mousewheel", function(e) {
|
|
|
+ if (leftTheme.length > 7) {
|
|
|
+ let html = ""
|
|
|
+ if (e.originalEvent.wheelDelta > 0) {
|
|
|
+ if (leftId > 1) {
|
|
|
+ $(".left-center>div:not(.theme)").remove();
|
|
|
+ leftId--;
|
|
|
+ // 切片数据
|
|
|
+ const data = leftTheme.slice(7 * (leftId - 1), 7 * leftId).reverse();
|
|
|
+ for (let i = data.length; i > 0; i--) {
|
|
|
+ html += `
|
|
|
+ <div data-url="${data[i - 1].url}">
|
|
|
+ <span class="text">${data[i - 1].themeName}</span>
|
|
|
+ <i class="iconfont icon-lajiche text"></i>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ if (leftId < leftIdenId) {
|
|
|
+ $(".left-center>div:not(.theme)").remove();
|
|
|
+ // 切片数据
|
|
|
+ const data = leftTheme.slice(7 * leftId, 7 * (leftId + 1));
|
|
|
+ leftId++;
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ html += `
|
|
|
+ <div data-url="${data[i].url}">
|
|
|
+ <span class="text">${data[i].themeName}</span>
|
|
|
+ <i class="iconfont icon-lajiche text"></i>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (leftId <= leftIdenId) {
|
|
|
+ $(".left-center").append(html);
|
|
|
+ leftCenterClick();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 右中
|
|
|
+ let htmlRight = '';
|
|
|
+ let rightId = 1;
|
|
|
+ let rightIdenId = Math.ceil(scene.length / 6); //控制变量的最大值限制
|
|
|
+ $(".right-center").empty();
|
|
|
+ for (let i = 0; i < (scene.length <= 6 ? scene.length : 6); i++) {
|
|
|
+ htmlRight += `
|
|
|
+ <div class="themes" data-id="${scene[i].id}">
|
|
|
+ <i class="iconfont icon-zhibanzhishou text"></i>
|
|
|
+ <span class="text">${scene[i].sceneName}</span>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ $(".right-center").append(htmlRight);
|
|
|
+ $(".right-center").on("mousewheel", function(e) {
|
|
|
+ if (scene.length > 6) {
|
|
|
+ let html = ""
|
|
|
+ if (e.originalEvent.wheelDelta > 0) {
|
|
|
+ if (rightId > 1) {
|
|
|
+ $(".right-center").empty();
|
|
|
+ rightId--;
|
|
|
+ // 切片数据
|
|
|
+ const data = scene.slice(6 * (rightId - 1), 6 * rightId).reverse();
|
|
|
+ for (let i = data.length; i > 0; i--) {
|
|
|
+ html += `
|
|
|
+ <div class="themes" data-id="${data[i - 1].id}">
|
|
|
+ <i class="iconfont icon-zhibanzhishou text"></i>
|
|
|
+ <span class="text">${data[i - 1].sceneName}</span>
|
|
|
+ </div>`;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (rightId < rightIdenId) {
|
|
|
+ $(".right-center").empty();
|
|
|
+ // 切片数据
|
|
|
+ const data = scene.slice(6 * rightId, 6 * (rightId + 1));
|
|
|
+ rightId++;
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ html += `
|
|
|
+ <div class="themes" data-id="${data[i].id}">
|
|
|
+ <i class="iconfont icon-zhibanzhishou text"></i>
|
|
|
+ <span class="text">${data[i].sceneName}</span>
|
|
|
+ </div>`;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (rightId <= rightIdenId) {
|
|
|
+ $(".right-center").append(html)
|
|
|
+ rightCenterClick();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 左下
|
|
|
+ let idenBId = $(".left-bottom>.sw").attr("data-id") * 1;
|
|
|
+ let leftBottomTheme = theme.filter(function(item) {
|
|
|
+ return item.sceneId == idenBId
|
|
|
+ });
|
|
|
+ let leftBottomHtml = '';
|
|
|
+ let leftBId = 1; //中间变量控制
|
|
|
+ let leftBIdenId = Math.ceil(leftBottomTheme.length / 3); //控制变量的最大值限制
|
|
|
+ $(".left-bottom>div:not(.sw)").remove();
|
|
|
+ for (let i = 0; i < (leftBottomTheme.length <= 3 ? leftBottomTheme.length : 3); i++) {
|
|
|
+ leftBottomHtml += `
|
|
|
+ <div data-url="${leftBottomTheme[i].url}">
|
|
|
+ <span class="text">${leftBottomTheme[i].themeName}</span>
|
|
|
+ <i class="iconfont icon-shuiwuju text"></i>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ $(".left-bottom").append(leftBottomHtml);
|
|
|
+ $(".left-bottom").on("mousewheel", function(e) {
|
|
|
+ if (leftBottomTheme.length > 3) {
|
|
|
+ let html = ""
|
|
|
+ if (e.originalEvent.wheelDelta > 0) {
|
|
|
+ if (leftBId > 1) {
|
|
|
+ $(".left-bottom>div:not(.sw)").remove();
|
|
|
+ leftBId--;
|
|
|
+ // 切片数据
|
|
|
+ const data = leftBottomTheme.slice(3 * (leftBId - 1), 3 * leftBId).reverse();
|
|
|
+ console.log("data-bleft----", data);
|
|
|
+ for (let i = data.length; i > 0; i--) {
|
|
|
+ html += `
|
|
|
+ <div data-url="${data[i - 1].url}">
|
|
|
+ <span class="text">${data[i - 1].themeName}</span>
|
|
|
+ <i class="iconfont icon-yangshi_icon_tongyong_maps text"></i>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (leftBId < leftBIdenId) {
|
|
|
+ $(".left-bottom>div:not(.sw)").remove();
|
|
|
+ // 切片数据
|
|
|
+ const data = leftBottomTheme.slice(3 * leftBId, 3 * (leftBId + 1));
|
|
|
+ leftBId++;
|
|
|
+ console.log("data--", data)
|
|
|
+ console.log("leftBId---", leftBId)
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ html += `
|
|
|
+ <div data-url="${data[i].url}">
|
|
|
+ <span class="text">${data[i].themeName}</span>
|
|
|
+ <i class="iconfont icon-yangshi_icon_tongyong_maps text"></i>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (leftBId <= leftBIdenId) {
|
|
|
+ $(".left-bottom").append(html);
|
|
|
+ // dom渲染完重新调用点击
|
|
|
+ leftBottomClick();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ // 封装点击事件，在dom结构变化事件会消失
|
|
|
+ function leftCenterClick() { //左边中间的点击
|
|
|
+ $(".theme").on("click", function() {
|
|
|
+ console.log(1)
|
|
|
+ })
|
|
|
+ $(".left-center>div:not(.theme)").on("click", function() {
|
|
|
+ // 判断当前点击是否有选中类
|
|
|
+ if (!$(this).hasClass("left-center-ative")) {
|
|
|
+ $(this).not(".theme").siblings().removeClass("left-center-ative");
|
|
|
+ $(this).addClass("left-center-ative")
|
|
|
+ }
|
|
|
+ location.href = $(this).attr("data-url")
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function leftBottomClick() { //左边底部的点击
|
|
|
+ $(".sw").on("click", function() {
|
|
|
+ console.log(3)
|
|
|
+ })
|
|
|
+ $(".left-bottom>div:not(.sw)").on("click", function() {
|
|
|
+ // 判断当前点击是否有选中类
|
|
|
+ if (!$(this).hasClass("left-center-ative")) {
|
|
|
+ $(this).not(".sw").siblings().removeClass("left-center-ative");
|
|
|
+ $(this).addClass("left-center-ative");
|
|
|
+ };
|
|
|
+ location.href = $(this).attr("data-url");
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function rightCenterClick() { //右边中间的点击
|
|
|
+ $(".themes").on("click", function() {
|
|
|
+ console.log($(this).attr("data-id") * 1 + 1);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 初始化调用,点击事件
|
|
|
+ leftCenterClick();
|
|
|
+ leftBottomClick();
|
|
|
+ rightCenterClick();
|
|
|
+
|
|
|
+ // 请求数据处理
|
|
|
+ // 除数据数组的长度，向上取值，作为标识id的最大值
|
|
|
+
|
|
|
+ // 封装dom渲染逻辑 id 标识变量 len 限制变量
|
|
|
+ function renderDom(event, id, len) {
|
|
|
+ let html = ""
|
|
|
+ if (event.originalEvent.wheelDelta > 0) {
|
|
|
+ // 切片数据，翻转
|
|
|
+ // [].slice()
|
|
|
+ if (id >= 1) {
|
|
|
+ $(".left-center>div:not(.theme)").remove(); //删除除第一个子元素外的使用元素
|
|
|
+ for (let i = len * id; i > 0 + (len * (id - 1)); i--) {
|
|
|
+ html += `
|
|
|
+ <div>
|
|
|
+ <span class="text">环卫作业车辆${i}</span>
|
|
|
+ <i class="iconfont icon-lajiche text"></i>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if (id > 1) {
|
|
|
+ id--
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ if (id < 3) {
|
|
|
+ $(".left-center").empty();
|
|
|
+ html = `
|
|
|
+ <div class="theme">
|
|
|
+ <div>
|
|
|
+ <span>市环卫主题</span>
|
|
|
+ <i class="iconfont icon-juminxiaoqu"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ for (let i = 0 + (7 * (id - 1)); i < 7 * id; i++) {
|
|
|
+ html += `
|
|
|
+ <div>
|
|
|
+ <span class="text">环卫作业车辆${i}</span>
|
|
|
+ <i class="iconfont icon-lajiche text"></i>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if (id >= 1) {
|
|
|
+ id++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (id <= 3) {
|
|
|
+ $(".left-center").append(html);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // ajax get
|
|
|
+ function reqGet(url) {
|
|
|
+ let data = {}
|
|
|
+ $.ajax({
|
|
|
+ type: "GET",
|
|
|
+ url: url,
|
|
|
+ async: false,
|
|
|
+ dataType: "json",
|
|
|
+ success: function(res) {
|
|
|
+ data = res.data
|
|
|
+ },
|
|
|
+ error: function(err) {
|
|
|
+ console.log("请求失败！");
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return data
|
|
|
+ }
|
|
|
+})
|
xiaoyue5430