Browse Source

完善“最近使用”

wangqin
hui 9 months ago
parent
commit
683d976211
  1. 13
      ruoyi-ui/src/assets/icon/iconfont.css
  2. 1
      ruoyi-ui/src/assets/icon/iconfont.js
  3. 16
      ruoyi-ui/src/assets/icon/iconfont.json
  4. BIN
      ruoyi-ui/src/assets/icon/iconfont.ttf
  5. BIN
      ruoyi-ui/src/assets/icon/iconfont.woff
  6. BIN
      ruoyi-ui/src/assets/icon/iconfont.woff2
  7. 0
      ruoyi-ui/src/assets/iconfont/demo.css
  8. 74
      ruoyi-ui/src/assets/iconfont/demo_index.html
  9. 27
      ruoyi-ui/src/assets/iconfont/iconfont.css
  10. 1
      ruoyi-ui/src/assets/iconfont/iconfont.js
  11. 30
      ruoyi-ui/src/assets/iconfont/iconfont.json
  12. BIN
      ruoyi-ui/src/assets/iconfont/iconfont.ttf
  13. BIN
      ruoyi-ui/src/assets/iconfont/iconfont.woff
  14. BIN
      ruoyi-ui/src/assets/iconfont/iconfont.woff2
  15. 2
      ruoyi-ui/src/main.js
  16. 17
      ruoyi-ui/src/store/modules/menu.js
  17. 1
      ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
  18. 1
      ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
  19. 25
      ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/CustomMenu.vue
  20. 18
      ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue
  21. 216
      ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue
  22. 3
      ruoyi-ui/src/views/JiHeExpressway/index.vue
  23. 4
      ruoyi-ui/vue.config.js

13
ruoyi-ui/src/assets/icon/iconfont.css

@ -1,13 +0,0 @@
@import '//at.alicdn.com/t/c/font_3906874_jmhpq6hym7.css';
[class^="icon-gym"], [class*=" icon-gym"] {
font-family:"iconfont" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

1
ruoyi-ui/src/assets/icon/iconfont.js

@ -1 +0,0 @@
window._iconfont_svg_string_3906874='<svg><symbol id="icon-gym-Gsearch" viewBox="0 0 1024 1024"><path d="M103.355 692.551H428.03c-34.137-24.771-64.03-54.772-88.375-88.972H103.351c-22.82 0-41.317 18.126-41.317 40.631v7.541c0 22.5 18.495 40.801 41.317 40.801m728.151 10.887c-7.753-20.078-30.923-30.345-51.712-22.759l-9.753 3.555c-20.959 7.312-31.542 29.679-23.745 49.568l70.329 181.652c7.821 20.014 30.9 30.212 51.684 22.736l9.813-3.537c20.979-7.312 31.567-29.744 23.745-49.651l-70.377-181.571zM663.154 840.821l-559.798 0.042c-22.82 0-41.317 18.173-41.317 40.65v7.541c0 22.522 18.495 40.845 41.317 40.845h559.798c22.799 0 41.271-18.235 41.271-40.738v-7.63c0.042-22.479-18.451-40.719-41.271-40.719M357.978 431.31c4.994 30.042 14.576 59.939 29.358 88.506 16.135 31.113 37.267 58.141 61.633 80.876 32.937 30.817 71.94 53.828 114.134 67.46 74.426 24.153 158.064 20.078 233.217-17.766 149.426-75.474 208.636-256.275 132.348-403.86C863.504 120.948 721.295 60.221 588.135 91.444c-23.274 5.423-46.245 13.351-68.49 24.561-30.646 15.47-57.238 35.484-79.909 58.611-46.332 47.251-75.411 107.874-83.425 171.948-3.515 27.921-2.98 56.426 1.67 84.753m299.941-275.352c127.227 0 230.322 101.786 230.322 227.366 0 125.536-103.118 227.299-230.322 227.299-127.162 0-230.237-101.746-230.237-227.299 0.022-125.554 103.094-227.366 230.237-227.366M106.335 359.327c-24.475 0-44.271 19.629-44.271 43.695v8.228c0 24.129 19.822 43.629 44.271 43.629h169.699c-4.434-23.207-6.986-47.103-6.986-71.596 0-8.038 0.685-15.964 1.242-23.957H106.337z m-2.98-163.034h215.087c18.707-33.023 42.213-62.961 69.559-89.038H103.359c-22.82 0-41.317 18.126-41.317 40.631v7.587c0 22.522 18.495 40.82 41.317 40.82z" fill="#00C8FF" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,o,i,d,s,l=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3906874,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?l(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),c()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=c,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,a())})}function a(){s||(s=!0,i())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}a()}}(window);

16
ruoyi-ui/src/assets/icon/iconfont.json

@ -1,16 +0,0 @@
{
"id": "3906874",
"name": "tunnel",
"font_family": "iconfont",
"css_prefix_text": "icon-gym",
"description": "",
"glyphs": [
{
"icon_id": "11400368",
"name": "搜索",
"font_class": "-Gsearch",
"unicode": "e668",
"unicode_decimal": 58984
}
]
}

BIN
ruoyi-ui/src/assets/icon/iconfont.ttf

Binary file not shown.

BIN
ruoyi-ui/src/assets/icon/iconfont.woff

Binary file not shown.

BIN
ruoyi-ui/src/assets/icon/iconfont.woff2

Binary file not shown.

0
ruoyi-ui/src/assets/icon/demo.css → ruoyi-ui/src/assets/iconfont/demo.css

74
ruoyi-ui/src/assets/icon/demo_index.html → ruoyi-ui/src/assets/iconfont/demo_index.html

@ -47,7 +47,7 @@
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3906874" target="_blank" class="nav-more">查看项目</a>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4466169" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
@ -55,9 +55,21 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">搜索</div>
<div class="code-name">&amp;#xe668;</div>
<span class="icon iconfont">&#xe622;</span>
<div class="name"></div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe750;</span>
<div class="name"></div>
<div class="code-name">&amp;#xe750;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe74f;</span>
<div class="name">最近</div>
<div class="code-name">&amp;#xe74f;</div>
</li>
</ul>
@ -78,9 +90,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1676945701463') format('woff2'),
url('iconfont.woff?t=1676945701463') format('woff'),
url('iconfont.ttf?t=1676945701463') format('truetype');
src: url('iconfont.woff2?t=1710383734701') format('woff2'),
url('iconfont.woff?t=1710383734701') format('woff'),
url('iconfont.ttf?t=1710383734701') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -107,11 +119,29 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-gym-Gsearch"></span>
<span class="icon iconfont icon-left"></span>
<div class="name">
</div>
<div class="code-name">.icon-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-right"></span>
<div class="name">
</div>
<div class="code-name">.icon-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-recent"></span>
<div class="name">
搜索
最近
</div>
<div class="code-name">.icon-gym-Gsearch
<div class="code-name">.icon-recent
</div>
</li>
@ -131,7 +161,7 @@
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-gymxxx"&gt;&lt;/span&gt;
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
@ -144,10 +174,26 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gym-Gsearch"></use>
<use xlink:href="#icon-left"></use>
</svg>
<div class="name"></div>
<div class="code-name">#icon-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-right"></use>
</svg>
<div class="name"></div>
<div class="code-name">#icon-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-recent"></use>
</svg>
<div class="name">搜索</div>
<div class="code-name">#icon-gym-Gsearch</div>
<div class="name">最近</div>
<div class="code-name">#icon-recent</div>
</li>
</ul>

27
ruoyi-ui/src/assets/iconfont/iconfont.css

@ -0,0 +1,27 @@
@font-face {
font-family: "iconfont"; /* Project id 4466169 */
src: url('iconfont.woff2?t=1710383734701') format('woff2'),
url('iconfont.woff?t=1710383734701') format('woff'),
url('iconfont.ttf?t=1710383734701') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-left:before {
content: "\e622";
}
.icon-right:before {
content: "\e750";
}
.icon-recent:before {
content: "\e74f";
}

1
ruoyi-ui/src/assets/iconfont/iconfont.js

@ -0,0 +1 @@
window._iconfont_svg_string_4466169='<svg><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M268.9 488.3L681.6 75.6C688.2 69 697.3 65 707.4 65c20.2 0 36.5 16.3 36.5 36.5 0 10.1-4.1 19.2-10.7 25.8l-391 391 378.5 378.5c6 6.2 9.7 14.7 9.7 24.1 0 19.2-15.5 34.7-34.7 34.7-9.4 0-17.9-3.7-24.1-9.7L279.2 553.4c-4.7-4.8-8.1-11.1-9.3-18 0.7 4.9-0.3 5.5-1 4.4-6.6-6.6-10.7-15.7-10.7-25.8 0.1-10 4.1-19.1 10.7-25.7z m0 0" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M755.1 535.7L342.4 948.4C335.8 955 326.70000001 959 316.60000001 959c-20.2 0-36.5-16.3-36.50000001-36.5 0-10.1 4.1-19.2 10.7-25.8l391-391-378.49999999-378.5c-6-6.2-9.7-14.7-9.70000001-24.1 0-19.2 15.5-34.7 34.7-34.7 9.4 0 17.9 3.7 24.1 9.7L744.8 470.6c4.7 4.8 8.1 11.1 9.30000001 18-0.7-4.9 0.3-5.5 0.99999999-4.4 6.6 6.6 10.69999999 15.7 10.7 25.8-0.1 10-4.1 19.1-10.7 25.7z m0 0" ></path></symbol><symbol id="icon-recent" viewBox="0 0 1024 1024"><path d="M504 1024C225.6 1024 0 798.4 0 520S225.6 16 504 16s504 225.6 504 504-225.6 504-504 504z m0-939.2C264 84.8 68.8 280 68.8 520c0 240.8 195.2 436 436 436s436-195.2 436-436c-0.8-240-196-435.2-436.8-435.2z" ></path><path d="M452 572.8V221.6h71.2v280h237.6v71.2H452z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);

30
ruoyi-ui/src/assets/iconfont/iconfont.json

@ -0,0 +1,30 @@
{
"id": "4466169",
"name": "济荷",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "8483536",
"name": "左",
"font_class": "left",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "39545533",
"name": "右",
"font_class": "right",
"unicode": "e750",
"unicode_decimal": 59216
},
{
"icon_id": "9392635",
"name": "最近",
"font_class": "recent",
"unicode": "e74f",
"unicode_decimal": 59215
}
]
}

BIN
ruoyi-ui/src/assets/iconfont/iconfont.ttf

Binary file not shown.

BIN
ruoyi-ui/src/assets/iconfont/iconfont.woff

Binary file not shown.

BIN
ruoyi-ui/src/assets/iconfont/iconfont.woff2

Binary file not shown.

2
ruoyi-ui/src/main.js

@ -12,7 +12,7 @@ import store from "./store";
import router from "./router/routerCreater";
import directive from "./directive"; //directive
import plugins from "./plugins"; // plugins
import "./assets/icon/iconfont.css"; // 阿里巴巴icon
import "./assets/iconfont/iconfont.css"; // 阿里巴巴icon
import "./assets/icons"; // icon
import "./permission"; // permission control
import { Socket } from "./utils/socket";

17
ruoyi-ui/src/store/modules/menu.js

@ -5,8 +5,21 @@ const state = {
const mutations = {
addRecent(state, item) {
if (state.recentPages.find(unit => unit.path == item.path)) return;
state.recentPages.push(item);
let temp;
state.recentPages.forEach((unit,index)=>{
if(unit.path == item.path){
temp = unit;
temp.active = true;
}else{
unit.active = false;
}
});
if (!temp){
item.active = true;
state.recentPages.push(item);
}
},
removeRecent(state, item) {
let i = state.recentPages.findIndex(unit => unit.path == item.path);

1
ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue

@ -94,7 +94,6 @@ export default {
return this.visible;
},
set(val) {
console.log("val", val);
this.$emit("update:value", val);
},
},

1
ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue

@ -177,7 +177,6 @@ export default {
this.modelFormData = { ...pathSet(this.modelFormData, item.key, data) };
},
reset(isFirst) {
console.log(23, isFirst);
return (this.modelFormData = reduceDefaultValue(
this.formList,
isFirst ? this.value || this.dFormData : {}

25
ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/CustomMenu.vue

@ -41,7 +41,7 @@ export default {
name: "CustomMenu",
data() {
return {
activeIndex:""
};
},
props: {
@ -49,10 +49,10 @@ export default {
type: String,
default: ""
},
activeIndex: {
type: String,
default: ""
},
// activeIndex: {
// type: String,
// default: ""
// },
menuData: {
type: Array,
default: () => []
@ -63,13 +63,20 @@ export default {
}
},
watch: {
$route:{
handler(newV){
console.log(newV , "匡扶汉室的xiaohandler");
this.activeIndex = newV.meta.menuId
},
immediate: true
}
},
created() {
},
methods: {
handleSelect(key, keyPath) {
let arr = (key.split("_")[1]).split("-");
let node = this.menuData
for (let i = 0; i < arr.length; i++) {
@ -78,8 +85,10 @@ export default {
node = node.children;
}
}
this.$emit("onChange", node, key);
console.log(node , "菜单点击++========");
// this.$emit("onChange", node, key);
this.$route.path != node.path && this.$router.push(node.path);
}
}
};

18
ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue

@ -3,7 +3,8 @@
<div class="headerNavi">
<Clock class="time"></Clock>
<!-- 左侧菜单 -->
<CustomMenu :menuData="menuLeft" @onChange="onChange" prefix="l" :activeIndex="activeIndex" class="leftMenu">
<CustomMenu :menuData="menuLeft" prefix="l" class="leftMenu">
<!--@onChange="onChange" :activeIndex="activeIndex" -->
</CustomMenu>
<!-- 中间标题 -->
<div class="vis-title">
@ -11,7 +12,8 @@
<img class="title-img" src="../../images/title.png" />
</div>
<!-- 右侧菜单 -->
<CustomMenu :menuData="menuRight" @onChange="onChange" prefix="r" :activeIndex="activeIndex" class="rightMenu">
<CustomMenu :menuData="menuRight" prefix="r" class="rightMenu">
<!-- @onChange="onChange" :activeIndex="activeIndex" -->
</CustomMenu>
<UserArea class="topButton"></UserArea>
</div>
@ -40,7 +42,7 @@ export default {
UserArea,
RecentPages
},
emit: ["change"],
// emit: ["change"],
created() {
this.activeIndex = this.$route.meta.menuId;
this.menuLeft = [];
@ -59,11 +61,11 @@ export default {
// console.log(this.activeIndex);
},
methods: {
onChange(item, activeIndex) {
this.activeIndex = activeIndex;
// this.$router.push(item.name);
this.$emit("onChange", item)
}
// onChange(item, activeIndex) {
// this.activeIndex = activeIndex;
// // this.$router.push(item.name);
// this.$emit("onChange", item)
// }
}
};
</script>

216
ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue

@ -1,13 +1,21 @@
<template>
<div class="recent_pages">
<h4>最近使用:</h4>
<h4><i class="iconfont icon-recent"></i>最近使用:</h4>
<div class="history_buttons">
<div class="unit" :class="isActive(item) ? 'active' : ''" v-for="item in recentPages">
<p class="btn_main" @click="onClickItem(item)" :key="item.path">{{
item.title
}}</p>
<p class="btn_close" @click="onRemoveItem(item)">x</p>
<div class="btn_left" @click="onLeft" :class="{'disabled' : startIndex <= 0 }"><i class="iconfont icon-left"></i></div>
<div class="list_box" ref="box">
<div class="list" :style="btnListStyle" ref="btnlist">
<div class="unit" :class="isActive(item) ? 'active' : ''" v-for="item,index in recentPages" ref="unit">
<p class="btn_main" @click="onClickItem(item)" :key="item.path" :style="{width:item.title.length*140+'px'}">
{{item.title}}
</p>
<p class="btn_close" @click="onRemoveItem(item)">
<img src="@/assets/jihe/images/button/btnClose.svg" alt="">
</p>
</div>
</div>
</div>
<div class="btn_right" @click="onRight" :class="{ 'disabled': lastIndex == -1 || lastIndex >= widthArr.length - 1 }"><i class="iconfont icon-right"></i></div>
</div>
</div>
</template>
@ -15,12 +23,60 @@
import { mapMutations, mapState } from 'vuex';
export default{
data(){
return {}
return {
posiLeft:0, //
widthBox:0,
widthTotal:0,
lastIndex:-1, //
startIndex:-1, //
widthArr:[],
currentIndex : -1
}
},
computed:{
...mapState("menu", ["recentPages"])
...mapState("menu", ["recentPages"]),
btnListStyle(){
return {
left : `${this.posiLeft}px`
};
}
},
watch:{
recentPages:{
handler(newV){
this.$nextTick(()=>{
// console.log("Precentagewatch")
this.widthArr = [];
this.widthBox = this.$refs["box"].offsetWidth;
this.widthTotal = this.$refs["btnlist"].offsetWidth;
let temp = 0;
console.log(newV , "recentPagessssssssssssssss");
newV.forEach((item,index)=>{
let unitW = this.$refs["unit"][index].offsetWidth;
temp += unitW;
this.widthArr[index] = temp;
if(temp >= this.widthBox && this.lastIndex == -1){
this.lastIndex = index;
}
if(item.active){
this.currentIndex = index;
}
// console.log(this.currentIndex, "currentIndexcurrentIndex")
// console.log(this.startIndex, "startIndexstartIndex")
// console.log(this.lastIndex, "lastIndexlastIndex")
})
if (this.currentIndex >= this.lastIndex) {
this.moveByRight(this.currentIndex);
} else if (this.currentIndex <= this.startIndex) {
this.moveByLeft(this.currentIndex);
}
})
},
immediate:true,
deep:true,
},
$route:{
handler(newV){
this.addRecent({
@ -31,6 +87,15 @@ export default{
immediate : true
}
},
mounted(){
//
// for (let i = 0; i < 30; i++) {
// this.addRecent({
// title: `${i}`,
// path: "url" + i
// });
// }
},
methods:{
...mapMutations("menu", ["addRecent","removeRecent"]),
onClickItem(item){
@ -48,40 +113,129 @@ export default{
},
isActive(item) {
return this.$route.path == item.path;
},
onLeft(){
this.moveByLeft();
},
onRight(){
this.moveByRight();
},
moveByLeft(targetIndex){
// console.log("", this.startIndex, targetIndex);
if (this.startIndex <= 0) {
return
}
if (targetIndex != undefined) {
this.startIndex = targetIndex;
} else {
this.startIndex -= 3;
}
if (this.startIndex < 0) {
this.startIndex = 0;
}
if(this.startIndex == 0){
this.posiLeft = 0;
}else{
this.posiLeft = this.widthArr[this.startIndex-1] * -1;
}
this.calcLastIndex();
// console.log(this.posiLeft , "posiLeft++");
},
moveByRight(targetIndex){
// console.log("", this.lastIndex, targetIndex);
if(this.lastIndex >= this.widthArr.length - 1){
return
}
if(targetIndex!==undefined){
this.lastIndex = targetIndex;
}else{
this.lastIndex += 3;
}
if(this.lastIndex > this.widthArr.length-1){
this.lastIndex = this.widthArr.length - 1;
}
// console.log(targetIndex, this.widthArr.length , "+++========")
this.posiLeft = this.widthBox - this.widthArr[this.lastIndex];
this.calcStartIndex();
},
calcStartIndex(){
try{
this.widthArr.forEach((item,index)=>{
if(item > -1*this.posiLeft){
this.startIndex = index;
throw new Error('找到startIndex,退出循环')
}
})
}catch(e){
// console.log(e);
}
},
calcLastIndex(){
try{
this.widthArr.forEach((item, index) => {
console.log(this.widthArr , "this.widthArrthis.widthArr");
console.log(index, item, this.widthBox - this.posiLeft , item > (this.widthBox - this.posiLeft));
if (item > (this.widthBox - this.posiLeft)) { //posiLeft
this.lastIndex = index;
console.log(this.lastIndex , "lastIndexlastIndexlastIndexlastIndexlastIndexlastIndex")
// console.log(this.lastIndex , "this.lastIndex lastIndex lastIndex lastIndex")
throw new Error('找到lastIndex,退出循环')
}
})
}catch(e){
// console.log(e);
}
}
}
}
</script>
<style lang="scss" scoped>
.recent_pages{
display: flex; flex-direction: row; align-items:stretch;
h4{ width: 100px; height: 32px; line-height: 32px; text-align: center; margin: 0; padding: 0; font-weight: bold;}
display: flex; flex-direction: row; align-items:stretch; padding: 0 20px;
h4{ width: 110px; height: 32px; line-height: 32px; text-align: center; margin: 0; padding: 0; font-weight: bold; color: #3de8ff;
.iconfont{ margin-right: 3px;}
}
.history_buttons {
flex: 1;
display: flex;
flex-direction: row;
.unit {
cursor: default; margin-right: 3px;
position: relative;
height: 30px;
background-color: #048;
&.active {
background-color: #09C;
color: #FFF;
}
.btn_main {
height: 30px;
line-height: 30px;
padding: 0 12px
}
.btn_left, .btn_right{ width: 26px; height: 30px; background-color: #048145;background-image: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
border:1px solid #009bcc; border-radius: 4px; display: flex; justify-content: center; align-items: center;
&.disabled{ background-image: linear-gradient(0deg, #999 0%, #777 100%); border:1px solid #999; color: #ccc;}
}
.btn_left{ margin-right: 4px;}
.btn_right{ margin-left: 4px;}
.list_box{ flex: 1; position: relative; width: 0; overflow: hidden; margin:0;
.list{ position: absolute; left: 0; top:0; display: flex; flex-direction: row; transition: all ease-in-out 0.5s;
.unit {
cursor: default;
position: relative;
height: 30px;
padding: 0 3px;
.btn_main {
background-image: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
border:1px solid #009bcc;
border-radius: 4px;
height: 28px;
text-align: center;
line-height: 28px; font-weight: bold; font-size: 14px; box-sizing: content-box;
padding: 0 18px 0 12px; word-break: keep-all; white-space: nowrap;
}
&.active {
.btn_main {
background-image: linear-gradient(180deg,#048145 0%, #078b58 100%);
border:1px solid #03a9b1;
}
}
.btn_close {
background-color: #C00;
position: absolute;
right: 0;
top: 0;
.btn_close {
position: absolute;
right: 6px;
top: 7px;
img{ width: 14px; height: 14px;}
}
}
}
}
}

3
ruoyi-ui/src/views/JiHeExpressway/index.vue

@ -1,6 +1,7 @@
<template>
<div class="pageBox">
<HeaderMenu @onChange="handleChange" class="header" :style="headerStyle"/>
<HeaderMenu class="header" :style="headerStyle"/>
<!-- @onChange="handleChange" -->
<Adaptation class="content" :headerHeight="headerHeight">
<Transition name="fade">
<router-view v-if="isShowContent" />

4
ruoyi-ui/vue.config.js

@ -52,8 +52,8 @@ module.exports = {
// target: `http://10.0.81.204:8087`, //现场后台 刘文阁
// target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
// target: `http://10.168.78.135:8087`, //王钦
// target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
target: `http://10.168.68.42:8087`, //王思祥
target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
// target: `http://10.168.68.42:8087`, //王思祥
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",

Loading…
Cancel
Save