src/views/choicePart/index.vue

@@ -2,28 +2,17 @@
   <div class="choicepart-container">
     <navbar />
     <div class="choicepart-wrapper">
-			<div
+      <div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1710px;height:538px;'" v-show="showItem">
-				class="choicepart-box"
-				id="choicepartBox"
-				:style="'transform:scale(' + scale + ')'"
-				style="width: 1710px; height: 538px"
-				v-show="showItem">
       <div class="choicepart-line1">
         <div
           v-for="(item, index) in menuArr1"
           :key="index"
           class="choicepart-item"
           @click="handelClick(item, item.choicepart)"
-						:style="{
+          :style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
-							opacity: item.visible ? 1 : 0.4,
+        >
-							pointerEvents: item.visible ? 'auto' : 'none',
-						}">
           <div>
-							<img
+            <img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
-								:src="
-									require(`../../assets/images/choicepart/${item.name}.png`)
-								"
-								alt="" />
           </div>
           <div class="choicepart-item-title">{{item.meta.title}}</div>
         </div>
@@ -34,16 +23,10 @@
           :key="index"
           class="choicepart-item"
           @click="handelClick(item, item.choicepart)"
-						:style="{
+          :style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
-							opacity: item.visible ? 1 : 0.4,
+        >
-							pointerEvents: item.visible ? 'auto' : 'none',
-						}">
           <div>
-							<img
+            <img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
-								:src="
-									require(`../../assets/images/choicepart/${item.name}.png`)
-								"
-								alt="" />
           </div>
           <div class="choicepart-item-title">{{item.meta.title}}</div>
         </div>
@@ -54,13 +37,14 @@
   </div>
 </template>
 <script>
-import Navbar from './components/Navbar';
+import Navbar from './components/Navbar'
-import { debounce } from '@/utils/debounce';
+import { debounce } from '@/utils/debounce'
 export default {
   components: { Navbar },
   name: 'choicePart',
   data() {
     return {
+      boxReset: '',
       scale: 1,
       menuArr1: [
         {
@@ -68,65 +52,65 @@ export default {
           title: '基础核心',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Order',
           title: '订单管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Equipment',
           title: '设备管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Group',
           title: '班组管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Quality',
           title: '质量管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Warehouse',
           title: '仓库管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Energy',
           title: '能源管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Packaging',
           title: '包装管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
-				},
+        }
       ],
       menuArr2: [
         {
@@ -134,16 +118,16 @@ export default {
           title: '物料管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Extend',
           title: '工艺管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         // {
         //   name: 'Delivery',
@@ -158,94 +142,91 @@ export default {
           title: '报表管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Cost',
           title: '成本管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'SafetyEnvironmental',
           title: '安环管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'Databoard',
           title: '数据驾驶舱',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
         },
         {
           name: 'System',
           title: '系统管理',
           visible: false,
           meta: {
-						title: '',
+            title: ''
-					},
+          }
-				},
+        }
       ],
-			showItem: false,
+      showItem: false
-		};
+    }
   },
   // computed:{
   //   ...mapGetters(['sidebarRouters'])
   // },
   mounted() {
-		this.getMsg();
+    this.getMsg()
-		this.boxReset();
+    this.boxReset = debounce(() => {
-		window.addEventListener('resize', this.boxReset);
+      this.resetSize()
-	},
+    }, 300)
-	destroyed() {
+    this.boxReset()
-		window.removeEventListener('resize', this.boxReset);
+    window.addEventListener('resize', () => {
+      this.boxReset()
+    })
   },
   methods: {
-		boxReset() {
-			debounce(() => {
-				this.resetSize();
-			}, 300)();
-		},
     getMsg() {
-			let menuList = this.$store.state.permission.sidebarRouters;
+      let menuList = this.$store.state.permission.sidebarRouters
-			console.log(menuList);
+      console.log(menuList)
       if (menuList.length > 0) {
         for (let i = 0; i < menuList.length; i ++) {
           for (let k = 0; k < 8; k++) {
             if (menuList[i].name === this.menuArr1[k].name) {
-							this.menuArr1[k].visible = true;
+              this.menuArr1[k].visible = true
-							this.menuArr1[k].id = menuList[i].id;
+              this.menuArr1[k].id = menuList[i].id
-							this.menuArr1[k].choicepart = i;
+              this.menuArr1[k].choicepart = i
-							this.menuArr1[k].children = menuList[i].children;
+              this.menuArr1[k].children = menuList[i].children
-							this.menuArr1[k].meta = menuList[i].meta;
+              this.menuArr1[k].meta = menuList[i].meta
             }
           }
           for (let j = 0; j < 7; j++) {
             if (menuList[i].name === this.menuArr2[j].name) {
-							this.menuArr2[j].visible = true;
+              this.menuArr2[j].visible = true
-							this.menuArr2[j].id = menuList[i].id;
+              this.menuArr2[j].id = menuList[i].id
-							this.menuArr2[j].choicepart = i;
+              this.menuArr2[j].choicepart = i
-							this.menuArr2[j].children = menuList[i].children;
+              this.menuArr2[j].children = menuList[i].children
-							this.menuArr2[j].meta = menuList[i].meta;
+              this.menuArr2[j].meta = menuList[i].meta
             }
           }
         }
       }
-			console.log(this.menuArr1);
+      console.log(this.menuArr1)
-			console.log(this.menuArr2);
+      console.log(this.menuArr2)
     },
     handelClick(item, index) {
       // this.$router.push({name: 'SystemUser'})
-			this.$store.dispatch('app/setChoicepart', index);
+      this.$store.dispatch('app/setChoicepart', index)
-			this.toRouter(item);
+      this.toRouter(item)
       // if (item.meta.unuse) {
       //   this.$message.warning(this.$t('暂无数据'))
       // } else {
@@ -253,36 +234,36 @@ export default {
       // }
     },
     toRouter(item) {
-			console.log(item);
+      console.log(item)
       if (item.children) {
-				this.toRouter(item.children[0]);
+        this.toRouter(item.children[0])
       } else {
-				this.$router.push({ name: item.name });
+        this.$router.push({ name: item.name })
       }
     },
     resetSize() {
-			let _this = this;
+      let _this = this
-			_this.showItem = false;
+      _this.showItem = false
-			_this.loading = true;
+      _this.loading = true
-			let choicepartBox = document.querySelector('#choicepartBox');
+      let choicepartBox = document.querySelector('#choicepartBox')
-			let rw = parseFloat(window.innerWidth);
+      let rw = parseFloat(window.innerWidth)
-			let rh = parseFloat(window.innerHeight);
+      let rh = parseFloat(window.innerHeight)
-			let bw = parseFloat(choicepartBox.style.width);
+      let bw = parseFloat(choicepartBox.style.width)
-			let bh = parseFloat(choicepartBox.style.height);
+      let bh = parseFloat(choicepartBox.style.height)
-			let wx = 0.82 / (bw / rw);
+      let wx = 0.82/(bw / rw)
-			let hx = 0.56 / (bh / rh);
+      let hx = 0.56/(bh / rh)
-			_this.scale = wx > hx ? hx : wx;
+      _this.scale = wx > hx ? hx : wx
-			setTimeout(_this.showItemFun, 700);
+      setTimeout(_this.showItemFun, 700)
     },
     showItemFun() {
-			this.loading = false;
+      this.loading = false
-			this.showItem = true;
+      this.showItem = true
-		},
+    }
   },
   beforeDestroy() {
-		this.showItem = false;
+    this.showItem = false
-	},
+  }
-};
+}
 </script>
 <style lang='scss' scoped>
 .choicepart-container {
@@ -315,8 +296,7 @@ export default {
     .choicepart-item {
       width: 184px;
       height: 224px;
-			background: url('../../assets/images/choicepart/choice-item-back.png')
+      background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat;
-				no-repeat;
       background-size: 100% 100%;
       border-radius: 5px;
       overflow: hidden;
@@ -354,7 +334,7 @@ export default {
   .choicepart-footer {
     position: absolute;
     width: 100%;
-		color: #c7c7c7;
+    color: #C7C7C7;
     user-select: none;
     font-size: 12px;
     letter-spacing: 1px;

src/views/databoard/deepProcessing/index.vue

@@ -1,11 +1,8 @@
 <template>
+	<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
 		<div
-		id="deepProcessingContainerB"
+			id='deepProcessingContainer'
-		ref="deepProcessingContainerB"
+			ref='deepProcessingContainer'
-		style="width: 100%; height: 100%">
-		<div
-			id="deepProcessingContainer"
-			ref="deepProcessingContainer"
 			class="deepProcessingBoard"
 			style="
 				position: absolute;
@@ -20,13 +17,14 @@
 				gap: 24px;
 			"
 			:style="{transform:'scale('+scaleNum+')'}">
-			<KHeader
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
-				:isFullScreen="isFullScreen"
-				@screenfullChange="screenfullChange"
-				topTitle="深加工生产运行驾驶舱" />
 			<div
 				class="main-body"
-				style="display: grid; gap: 16px; grid-template-rows: 462px 462px">
+				style="
+					display: grid;
+					gap: 16px;
+					grid-template-rows: 462px 462px;
+				">
 				<TopThree />
 				<BottomTwo />
 			</div>
@@ -49,16 +47,16 @@
 import KHeader from '../components/Header';
 import TopThree from './TopThree';
 import BottomTwo from './BottomTwo';
-import screenfull from 'screenfull';
+import screenfull from 'screenfull'
-import { debounce } from '@/utils/debounce';
+import { debounce } from '@/utils/debounce'
-import { getDcsMsg, getMesMsg } from './../utils/wsInterface';
+import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
 
 export default {
 	name: 'deepProcessingBoard',
 	components: {
 		KHeader,
 		TopThree,
-		BottomTwo,
+		BottomTwo
 	},
 	// provide() {
 	// 	return {
@@ -68,52 +66,43 @@ export default {
 	data() {
 		return {
 			isFullScreen: false,
-			scaleNum: 0.8,
+			scaleNum: 0.8
 		};
 	},
 	created() {
-		this.init();
+		this.init()
 	},
 	destroy() {
-		this.destroy();
+		this.destroy()
 	},
 	mounted() {
 		this.boxReset = debounce(() => {
-			this.resetSize();
+      this.resetSize()
-		}, 300);
+    }, 300)
-		this.boxReset();
+    this.boxReset()
     window.addEventListener('resize', () => {
-			this.boxReset();
+      this.boxReset()
-		});
+    })
 		// closeWebsocket()
 		// getDcsMsg()
 		// getMesMsg()
-	},
+		console.log('mounted...........')
-	mounted() {
-		this.boxReset();
-		window.addEventListener('resize', this.boxReset);
 	},
 	destroyed() {
-		window.removeEventListener('resize', this.boxReset);
+		console.log('destroyed...........')
-		this.destroy();
 	},
 	methods: {
-		boxReset() {
-			debounce(() => {
-				this.resetSize();
-			}, 300)();
-		},
 		change() {
-			this.isFullScreen = screenfull.isFullscreen;
+      this.isFullScreen = screenfull.isFullscreen
     },
     init() {
       if (screenfull.isEnabled) {
-				screenfull.on('change', this.change);
+        screenfull.on('change', this.change)
       }
     },
     destroy() {
       if (screenfull.isEnabled) {
-				screenfull.off('change', this.change);
+        screenfull.off('change', this.change)
       }
     },
 		// 全屏
@@ -121,37 +110,39 @@ export default {
       if (!screenfull.isEnabled) {
         this.$message({
           message: 'you browser can not work',
-					type: 'warning',
+          type: 'warning'
-				});
+        })
-				return false;
+        return false
       }
-			screenfull.toggle(this.$refs.deepProcessingContainerB);
+      screenfull.toggle(this.$refs.deepProcessingContainerB)
     },
 		resetSize() {
-			let deepProcessingContainer = document.getElementById(
+      let deepProcessingContainer = document.getElementById('deepProcessingContainer')
-				'deepProcessingContainer'
+      let rw = parseFloat(window.innerWidth)
-			);
+      let rh = parseFloat(window.innerHeight)
-			let rw = parseFloat(window.innerWidth);
+      let bw = parseFloat(deepProcessingContainer.style.width)
-			let rh = parseFloat(window.innerHeight);
+      let bh = parseFloat(deepProcessingContainer.style.height)
-			let bw = parseFloat(deepProcessingContainer.style.width);
+			let wx = 0
-			let bh = parseFloat(deepProcessingContainer.style.height);
+			let hx = 0
-			let wx = 0;
-			let hx = 0;
 			if (screenfull.isFullscreen) {
-				wx = rw / bw;
+				console.log('全屏')
-				hx = rh / bh;
+				wx = rw / bw
+				hx = rh / bh
+				console.log(this.scaleNum)
 			}else{
+				console.log('非全屏')
+				console.log(this.$store.state.app.sidebar.opened)
 				if (this.$store.state.app.sidebar.opened) {
-					wx = (rw - 280) / bw;
+					wx = (rw-280) / bw
-					hx = (rh - 116) / bh;
+					hx = (rh-116) / bh
 				}else{
-					wx = (rw - 85) / bw;
+					wx = (rw-85) / bw
-					hx = (rh - 116) / bh;
+					hx = (rh-116) / bh
+				}
+			}
+			this.scaleNum = wx
     }
 	}
-			this.scaleNum = wx;
-		},
-	},
 };
 </script>
 

src/views/databoard/kiln/index.vue

@@ -1,11 +1,8 @@
 <template>
+	<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
 		<div
-		id="kilnContainerB"
+			id='kilnContainer'
-		ref="kilnContainerB"
+			ref='kilnContainer'
-		style="width: 100%; height: 100%">
-		<div
-			id="kilnContainer"
-			ref="kilnContainer"
 			class="KilnDataBoard"
 			style="
 				position: absolute;
@@ -20,21 +17,14 @@
 				gap: 24px;
 			"
 			:style="{transform:'scale('+scaleNum+')'}">
-			<KHeader
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
-				:isFullScreen="isFullScreen"
-				@screenfullChange="screenfullChange"
-				topTitle="窑炉生产运行驾驶舱" />
 			<div
 				class="main-body"
 				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
-				<div
+				<div class="left-side" style="flex: 2">
-					class="left-side"
-					style="flex: 2">
 					<LeftFour />
 				</div>
-				<div
+				<div class="right-side" style="flex: 1">
-					class="right-side"
-					style="flex: 1">
 					<RightTwo />
 				</div>
 			</div>
@@ -46,8 +36,8 @@
 import KHeader from '../components/Header';
 import LeftFour from './LeftFour';
 import RightTwo from './RightTwo.vue';
-import screenfull from 'screenfull';
+import screenfull from 'screenfull'
-import { debounce } from '@/utils/debounce';
+import { debounce } from '@/utils/debounce'
 
 export default {
 	name: 'Kiln',
@@ -59,7 +49,7 @@ export default {
 	computed:{
 		sidebarStatus() {
 			return this.$store.state.app.sidebar.opened;
-		},
+		}
 	},
 	// provide() {
 	// 	return {
@@ -69,44 +59,43 @@ export default {
 	data() {
 		return {
 			isFullScreen: false,
-			scaleNum: 0.8,
+			scaleNum: 0.8
 		};
 	},
 	watch: {
 		sidebarStatus() {
-			this.boxReset();
+			this.boxReset()
 		},
 	},
 	created() {
-		this.init();
+		this.init()
+	},
+	destroy() {
+		this.destroy()
 	},
 	mounted() {
-		this.boxReset();
+		this.boxReset = debounce(() => {
-		window.addEventListener('resize', this.boxReset);
+      this.resetSize()
-	},
+    }, 300)
-	destroyed() {
+    this.boxReset()
-		window.removeEventListener('resize', this.boxReset);
+    window.addEventListener('resize', () => {
-		this.destroy();
+      this.boxReset()
+    })
 	},
 	methods: {
-		boxReset() {
-			debounce(() => {
-				this.resetSize();
-			}, 300)();
-		},
 		change() {
-			this.isFullScreen = screenfull.isFullscreen;
+      this.isFullScreen = screenfull.isFullscreen
     },
 
     init() {
       if (screenfull.isEnabled) {
-				screenfull.on('change', this.change);
+        screenfull.on('change', this.change)
       }
     },
 
     destroy() {
       if (screenfull.isEnabled) {
-				screenfull.off('change', this.change);
+        screenfull.off('change', this.change)
       }
     },
 		// 全屏
@@ -114,35 +103,40 @@ export default {
       if (!screenfull.isEnabled) {
         this.$message({
           message: 'you browser can not work',
-					type: 'warning',
+          type: 'warning'
-				});
+        })
-				return false;
+        return false
       }
-			screenfull.toggle(this.$refs.kilnContainerB);
+      screenfull.toggle(this.$refs.kilnContainerB)
     },
 		resetSize() {
-			let kilnContainerBox = document.getElementById('kilnContainer');
+      let kilnContainerBox = document.getElementById('kilnContainer')
-			let rw = parseFloat(window.innerWidth);
+			console.log(kilnContainerBox)
-			let rh = parseFloat(window.innerHeight);
+      let rw = parseFloat(window.innerWidth)
-			let bw = parseFloat(kilnContainerBox.style.width);
+      let rh = parseFloat(window.innerHeight)
-			let bh = parseFloat(kilnContainerBox.style.height);
+      let bw = parseFloat(kilnContainerBox.style.width)
-			let wx = 0;
+      let bh = parseFloat(kilnContainerBox.style.height)
-			let hx = 0;
+			let wx = 0
+			let hx = 0
 			if (screenfull.isFullscreen) {
-				wx = rw / bw;
+				console.log('全屏')
-				hx = rh / bh;
+				wx = rw / bw
+				hx = rh / bh
+				console.log(this.scaleNum)
 			}else{
+				console.log('非全屏')
+				console.log(this.$store.state.app.sidebar.opened)
 				if (this.$store.state.app.sidebar.opened) {
-					wx = (rw - 280) / bw;
+					wx = (rw-280) / bw
-					hx = (rh - 116) / bh;
+					hx = (rh-116) / bh
 				}else{
-					wx = (rw - 85) / bw;
+					wx = (rw-85) / bw
-					hx = (rh - 116) / bh;
+					hx = (rh-116) / bh
+				}
+			}
+			this.scaleNum = wx
     }
 	}
-			this.scaleNum = wx;
-		},
-	},
 };
 </script>
 

src/views/databoard/wholePlant/index.vue

@@ -1,11 +1,8 @@
 <template>
+	<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;">
 		<div
-		id="wholePlantContainerB"
+			id='wholePlantContainer'
-		ref="wholePlantContainerB"
+			ref='wholePlantContainer'
-		style="width: 100%; height: 100%">
-		<div
-			id="wholePlantContainer"
-			ref="wholePlantContainer"
 			class="wholePlantBoard"
 			style="
 				position: absolute;
@@ -20,26 +17,17 @@
 				gap: 24px;
 			"
 			:style="{transform:'scale('+scaleNum+')'}">
-			<KHeader
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
-				:isFullScreen="isFullScreen"
-				@screenfullChange="screenfullChange"
-				topTitle="全厂总览驾驶舱" />
 			<div
 				class="main-body"
 				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
-				<div
+				<div class="left-side" style="flex: 1">
-					class="left-side"
-					style="flex: 1">
 					<LeftTwo />
 				</div>
-				<div
+				<div class="middle-side" style="flex: 1">
-					class="middle-side"
-					style="flex: 1">
 					<MiddleTwo />
 				</div>
-				<div
+				<div class="right-side" style="flex: 1">
-					class="right-side"
-					style="flex: 1">
 					<RightTwo />
 				</div>
 			</div>
@@ -52,8 +40,8 @@ import KHeader from '../components/Header';
 import LeftTwo from './LeftTwo';
 import MiddleTwo from './MiddleTwo';
 import RightTwo from './RightTwo';
-import screenfull from 'screenfull';
+import screenfull from 'screenfull'
-import { debounce } from '@/utils/debounce';
+import { debounce } from '@/utils/debounce'
 
 export default {
 	name: 'wholePlantBoard',
@@ -61,7 +49,7 @@ export default {
 		KHeader,
 		LeftTwo,
 		MiddleTwo,
-		RightTwo,
+		RightTwo
 	},
 	// provide() {
 	// 	return {
@@ -71,39 +59,40 @@ export default {
 	data() {
 		return {
 			isFullScreen: false,
-			scaleNum: 0.8,
+			scaleNum: 0.8
 		};
 	},
 	created() {
-		this.init();
+		this.init()
 	},
 	destroy() {
-		this.destroy();
+		this.destroy()
 	},
 	mounted() {
-		this.boxReset();
+		this.boxReset = debounce(() => {
-		window.addEventListener('resize', this.boxReset);
+      this.resetSize()
+    }, 300)
+    this.boxReset()
+    window.addEventListener('resize', () => {
+      this.boxReset()
+    })
+		console.log('mounted...........')
 	},
 	destroyed() {
-		window.removeEventListener('resize', this.boxReset);
+		console.log('destroyed...........')
 	},
 	methods: {
-		boxReset() {
-			debounce(() => {
-				this.resetSize();
-			}, 300)();
-		},
 		change() {
-			this.isFullScreen = screenfull.isFullscreen;
+      this.isFullScreen = screenfull.isFullscreen
     },
     init() {
       if (screenfull.isEnabled) {
-				screenfull.on('change', this.change);
+        screenfull.on('change', this.change)
       }
     },
     destroy() {
       if (screenfull.isEnabled) {
-				screenfull.off('change', this.change);
+        screenfull.off('change', this.change)
       }
     },
 		// 全屏
@@ -111,37 +100,39 @@ export default {
       if (!screenfull.isEnabled) {
         this.$message({
           message: 'you browser can not work',
-					type: 'warning',
+          type: 'warning'
-				});
+        })
-				return false;
+        return false
       }
-			screenfull.toggle(this.$refs.wholePlantContainerB);
+      screenfull.toggle(this.$refs.wholePlantContainerB)
     },
 		resetSize() {
-			let wholePlantContainerBox = document.getElementById(
+      let wholePlantContainerBox = document.getElementById('wholePlantContainer')
-				'wholePlantContainer'
+      let rw = parseFloat(window.innerWidth)
-			);
+      let rh = parseFloat(window.innerHeight)
-			let rw = parseFloat(window.innerWidth);
+      let bw = parseFloat(wholePlantContainerBox.style.width)
-			let rh = parseFloat(window.innerHeight);
+      let bh = parseFloat(wholePlantContainerBox.style.height)
-			let bw = parseFloat(wholePlantContainerBox.style.width);
+			let wx = 0
-			let bh = parseFloat(wholePlantContainerBox.style.height);
+			let hx = 0
-			let wx = 0;
-			let hx = 0;
 			if (screenfull.isFullscreen) {
-				wx = rw / bw;
+				console.log('全屏')
-				hx = rh / bh;
+				wx = rw / bw
+				hx = rh / bh
+				console.log(this.scaleNum)
 			}else{
+				console.log('非全屏')
+				console.log(this.$store.state.app.sidebar.opened)
 				if (this.$store.state.app.sidebar.opened) {
-					wx = (rw - 280) / bw;
+					wx = (rw-280) / bw
-					hx = (rh - 116) / bh;
+					hx = (rh-116) / bh
 				}else{
-					wx = (rw - 85) / bw;
+					wx = (rw-85) / bw
-					hx = (rh - 116) / bh;
+					hx = (rh-116) / bh
+				}
+			}
+			this.scaleNum = wx
     }
 	}
-			this.scaleNum = wx;
-		},
-	},
 };
 </script>
 

src/views/energy/analysis/contrastAnalysis/components/searchArea.vue

@@ -1,7 +1,8 @@
 <template>
 	<div
 		class="searchBarBox divHeight"
-		ref="searchBarRef">
+		ref="searchBarRef"
+		:style="{ paddingRight: isFold ? '55px' : '0px' }">
 		<el-form
 			:inline="true"
 			class="demo-form-inline">
@@ -199,6 +200,13 @@
 				</el-button>
 			</el-form-item>
 		</el-form>
+		<span
+			v-if="isFold"
+			class="foldClass"
+			@click="switchMode">
+			{{ isExpand ? '收起' : '展开' }}
+			<svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
+		</span>
 	</div>
 </template>
 <script>
@@ -209,8 +217,16 @@ import { getFactoryList } from '@/api/core/base/factory';
 import moment from 'moment';
 export default {
 	name: 'searchArea',
+	props: {
+		isFold: {
+			// 多行模式（默认否）
+			type: Boolean,
+			default: false,
+		},
+	},
 	data() {
 		return {
+			isExpand: false, // 展开收起
 			// 查询参数
 			queryParams: {
 				energyTypeId: null,
@@ -509,6 +525,16 @@ export default {
 			let value = new Date(newData).getTime();
 			return value;
 		},
+		switchMode() {
+			// 展开和收起切换
+			this.isExpand = !this.isExpand;
+			const element = this.$refs.searchBarRef;
+			if (this.isExpand) {
+				element.classList.remove('divHeight');
+			} else {
+				element.classList.add('divHeight');
+			}
+		},
 	},
 };
 </script>
@@ -547,6 +573,21 @@ export default {
 		margin-bottom: 4px;
 	}
 }
+.searchBarBox .foldClass {
+	position: absolute;
+	top: 14px;
+	right: 0;
+	cursor: pointer;
+	font-size: 12px;
+	color: #0b58ff;
+}
+.searchBarBox .foldClass .iconfont {
+	font-size: 14px;
+}
+.divHeight {
+	height: 45px;
+	overflow: hidden;
+}
 .separateStyle {
 	display: inline-block;
 	width: 1px;

src/views/energy/analysis/contrastAnalysis/index.vue

@@ -4,6 +4,7 @@
 		id="contrastAnalysisBox">
 		<!-- 搜索工作栏 -->
 		<search-area
+			:isFold="isFold"
 			@submit="getList"
 			@export="exportExl" />
 		<div v-show="chartData.length">
@@ -37,6 +38,7 @@ export default {
 	mixins: [tableHeightMixin],
 	data() {
 		return {
+			isFold: false,
 			chartData: [],
 			timeDim: '',
 			tableProps: [],
@@ -44,6 +46,13 @@ export default {
 			tableH: this.tableHeight(250) / 2,
 		};
 	},
+	mounted() {
+		window.addEventListener('resize', () => {
+			this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
+			// console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
+		});
+		this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
+	},
 	methods: {
 		_setTableHeight() {
 			this.tableH = this.tableHeight(250) / 2;

src/views/energy/analysis/trendAnalysis/components/searchArea.vue

@@ -1,7 +1,8 @@
 <template>
 	<div
-		class="searchBarBox"
+		class="searchBarBox divHeight"
-		ref="searchBarRef">
+		ref="searchBarRef"
+		:style="{ paddingRight: isFold ? '55px' : '0px' }">
 		<el-form
 			:inline="true"
 			class="demo-form-inline">
@@ -171,9 +172,9 @@
 				</el-button>
 				<span
 					class="separateStyle"
-					v-hasPermi="['analysis:energy-analysis:query']"></span>
+					v-hasPermi="['analysis:trend-analysis:export']"></span>
 				<el-button
-					v-hasPermi="['analysis:energy-analysis:query']"
+					v-hasPermi="['analysis:trend-analysis:export']"
 					type="primary"
 					size="small"
 					plain
@@ -182,6 +183,13 @@
 				</el-button>
 			</el-form-item>
 		</el-form>
+		<span
+			v-if="isFold"
+			class="foldClass"
+			@click="switchMode">
+			{{ isExpand ? '收起' : '展开' }}
+			<svg-icon :icon-class="isExpand ? 'upward' : 'downward'" />
+		</span>
 	</div>
 </template>
 <script>
@@ -190,8 +198,16 @@ import { getEnergyTypeListAll } from '@/api/base/energyType';
 import moment from 'moment';
 export default {
 	name: 'searchArea',
+	props: {
+		isFold: {
+			// 多行模式（默认否）
+			type: Boolean,
+			default: false,
+		},
+	},
 	data() {
 		return {
+			isExpand: false, // 展开收起
 			// 查询参数
 			queryParams: {
 				energyTypeId: null,
@@ -493,6 +509,16 @@ export default {
 			let value = new Date(newData).getTime();
 			return value;
 		},
+		switchMode() {
+			// 展开和收起切换
+			this.isExpand = !this.isExpand;
+			const element = this.$refs.searchBarRef;
+			if (this.isExpand) {
+				element.classList.remove('divHeight');
+			} else {
+				element.classList.add('divHeight');
+			}
+		},
 	},
 };
 </script>
@@ -531,6 +557,21 @@ export default {
 		margin-bottom: 4px;
 	}
 }
+.searchBarBox .foldClass {
+	position: absolute;
+	top: 14px;
+	right: 0;
+	cursor: pointer;
+	font-size: 12px;
+	color: #0b58ff;
+}
+.searchBarBox .foldClass .iconfont {
+	font-size: 14px;
+}
+.divHeight {
+	height: 45px;
+	overflow: hidden;
+}
 .separateStyle {
 	display: inline-block;
 	width: 1px;

src/views/energy/analysis/trendAnalysis/index.vue

@@ -4,6 +4,7 @@
 		id="trendAnalysisBox">
 		<!-- 搜索工作栏 -->
 		<search-area
+			:isFold="isFold"
 			@submit="getList"
 			@export="exportExl" />
 		<div v-show="chartData.length">
@@ -32,12 +33,20 @@ export default {
 	components: { SearchArea, LineChart },
 	data() {
 		return {
+			isFold: false,
 			chartData: [],
 			timeDim: '',
 			tableProps: [],
 			list: [],
 		};
 	},
+	mounted() {
+		window.addEventListener('resize', () => {
+			this.tableH = this.tableHeight(260);
+			this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
+		});
+		this.isFold = this.searchBarWidth('trendAnalysisBox', 1480);
+	},
 	methods: {
 		getList(params) {
 			this.timeDim = params.timeDim;

src/views/energy/base/energyPlc/index.vue

@@ -89,13 +89,13 @@ export default {
 					param: 'name',
 				},
 				{
-					type: this.$auth.hasPermi('base:energy-plc:query') ? 'button' : '',
+					type: 'button',
 					btnName: '查询',
 					name: 'search',
 					color: 'primary',
 				},
 				{
-					type: this.$auth.hasPermi('base:energy-plc:create') ? 'separate' : '',
+					type: 'separate',
 				},
 				{
 					type: this.$auth.hasPermi('base:energy-plc:create') ? 'button' : '',

src/views/energy/base/energyPlcConnect/components/energyPlcParam.vue

@@ -22,9 +22,7 @@
 							readonly
 							style="width: 250px"></el-input>
 					</el-form-item>
-					<el-form-item
+					<el-form-item v-if="showBtn">
-						v-if="showBtn"
-						v-hasPermi="['base:energy-plc-param:create']">
 						<el-button
 							type="success"
 							size="small"
@@ -162,19 +160,15 @@ export default {
 				this.drawerTitle = '参数绑定';
 				this.showBtn = true;
 				this.tableBtn = [
-					this.$auth.hasPermi('base:energy-plc-param:update')
+					{
-						? {
 						type: 'edit',
 						btnName: '编辑',
-						  }
+					},
-						: undefined,
+					{
-					this.$auth.hasPermi('base:energy-plc-param:delete')
-						? {
 						type: 'delete',
 						btnName: '删除',
-						  }
+					},
-						: undefined,
+				];
-				].filter((v) => v);
 			}
 		},
 		getList() {

src/views/energy/base/energyPlcConnect/index.vue

@@ -107,17 +107,13 @@ export default {
 					param: 'cnName',
 				},
 				{
-					type: this.$auth.hasPermi('base:energy-plc-connect:query')
+					type: 'button',
-						? 'button'
-						: '',
 					btnName: '查询',
 					name: 'search',
 					color: 'primary',
 				},
 				{
-					type: this.$auth.hasPermi('base:energy-plc-connect:create')
+					type: 'separate',
-						? 'separate'
-						: '',
 				},
 				{
 					type: this.$auth.hasPermi('base:energy-plc-connect:create')
@@ -131,25 +127,17 @@ export default {
 			],
 			tableProps,
 			tableBtn: [
-				this.$auth.hasPermiAnd([
+				this.$auth.hasPermi('base:energy-plc-connect:bind')
-					'base:energy-plc-param:query',
-					'base:energy-type:query',
-				])
 					? {
 							type: 'connect',
 							btnName: '绑定',
 					  }
 					: undefined,
-				this.$auth.hasPermi('base:energy-plc-param:query')
+				{
-					? {
 					type: 'detail',
 					btnName: '详情',
-					  }
+				},
-					: undefined,
+				this.$auth.hasPermi('base:energy-plc-connect:update')
-				this.$auth.hasPermiAnd([
-					'base:energy-plc-connect:update',
-					'base:energy-plc-connect:query',
-				])
 					? {
 							type: 'edit',
 							btnName: '编辑',

src/views/energy/base/energyQuantityManual/index.vue

@@ -114,20 +114,13 @@ export default {
 					defaultSelect: [],
 				},
 				{
-					type: this.$auth.hasPermi('base:energy-quantity-manual:query')
+					type: 'button',
-						? 'button'
-						: '',
 					btnName: '查询',
 					name: 'search',
 					color: 'primary',
 				},
 				{
-					type: this.$auth.hasPermiOr([
+					type: 'separate',
-						'base:energy-quantity-manual:export',
-						'base:energy-quantity-manual:create',
-					])
-						? 'separate'
-						: '',
 				},
 				{
 					type: this.$auth.hasPermi('base:energy-quantity-manual:export')
@@ -154,19 +147,13 @@ export default {
 			// 班次基础信息列表
 			list: [],
 			tableBtn: [
-				this.$auth.hasPermiAnd([
+				this.$auth.hasPermi('base:energy-quantity-manual:create')
-					'base:energy-quantity-manual:query',
-					'base:energy-quantity-manual:create',
-				])
 					? {
 							type: 'meterReading',
 							btnName: '抄表',
 					  }
 					: undefined,
-				this.$auth.hasPermiAnd([
+				this.$auth.hasPermi('base:energy-quantity-manual:update')
-					'base:energy-quantity-manual:update',
-					'base:energy-quantity-manual:query',
-				])
 					? {
 							type: 'edit',
 							btnName: '编辑',

src/views/energy/base/energyQuantityRealtime/index.vue

@@ -90,9 +90,7 @@ export default {
 					width: 350,
 				},
 				{
-					type: this.$auth.hasPermi('base:energy-quantity-realtime:query')
+					type: 'button',
-						? 'button'
-						: '',
 					btnName: '查询',
 					name: 'search',
 					color: 'primary',

src/views/energy/base/tableNameConfig/index.vue

@@ -52,10 +52,7 @@ export default {
 		return {
 			tableProps,
 			tableBtn: [
-				this.$auth.hasPermiAnd([
+				this.$auth.hasPermi('base:table-name-config:edit')
-					'base:energy-table:query',
-					'base:energy-table:update',
-				])
 					? {
 							type: 'edit',
 							btnName: '编辑',

src/views/energy/monitoring/energyLimit/index.vue

@@ -125,17 +125,13 @@ export default {
 					param: 'limitType',
 				},
 				{
-					type: this.$auth.hasPermi('monitoring:energy-limit:query')
+					type: 'button',
-						? 'button'
-						: '',
 					btnName: '查询',
 					name: 'search',
 					color: 'primary',
 				},
 				{
-					type: this.$auth.hasPermi('monitoring:energy-limit:create')
+					type: 'separate',
-						? 'separate'
-						: '',
 				},
 				{
 					type: this.$auth.hasPermi('monitoring:energy-limit:create')

src/views/energy/monitoring/energyReport/index.vue

@@ -113,9 +113,7 @@ export default {
 					color: 'primary',
 				},
 				{
-					type: this.$auth.hasPermi('monitoring:energy-report:export')
+					type: 'separate',
-						? 'separate'
-						: '',
 				},
 				{
 					type: this.$auth.hasPermi('monitoring:energy-report:export')

src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue

@@ -22,7 +22,6 @@
 					</el-form-item>
 					<el-form-item>
 						<el-button
-							v-hasPermi="['monitoring:energy-statistics-det:query']"
 							type="success"
 							size="small"
 							v-if="showBtn"
@@ -31,7 +30,6 @@
 							新增
 						</el-button>
 						<el-button
-							v-hasPermi="['monitoring:energy-statistics-det:delete']"
 							type="danger"
 							size="small"
 							v-if="showBtn"
@@ -163,13 +161,11 @@ export default {
 				this.drawerTitle = '参数绑定';
 				this.showBtn = true;
 				this.tableBtn = [
-					this.$auth.hasPermi('monitoring:energy-statistics-det:delete')
+					{
-						? {
 						type: 'delete',
 						btnName: '删除',
-						  }
+					},
-						: undefined,
+				];
-				].filter((v) => v);
 			}
 		},
 		getList() {

src/views/energy/monitoring/energyStatistics/components/energyStatisticsDetAdd.vue

@@ -88,9 +88,7 @@ export default {
 					type: 'separate',
 				},
 				{
-					type: this.$auth.hasPermi('monitoring:energy-statistics-det:create')
+					type: 'button',
-						? 'button'
-						: '',
 					btnName: '关联',
 					name: 'add',
 					color: 'primary',

src/views/energy/monitoring/energyStatistics/index.vue

@@ -104,9 +104,7 @@ export default {
 					color: 'primary',
 				},
 				{
-					type: this.$auth.hasPermi('monitoring:energy-statistics:create')
+					type: 'separate',
-						? 'separate'
-						: '',
 				},
 				{
 					type: this.$auth.hasPermi('monitoring:energy-statistics:create')
@@ -120,22 +118,17 @@ export default {
 			],
 			tableProps,
 			tableBtn: [
-				this.$auth.hasPermi('monitoring:energy-statistics-det:query')
+				this.$auth.hasPermi('monitoring:energy-statistics:bind')
 					? {
 							type: 'connect',
 							btnName: '绑定',
 					  }
 					: undefined,
-				this.$auth.hasPermi('monitoring:energy-statistics:query')
+				{
-					? {
 					type: 'detail',
 					btnName: '详情',
-					  }
+				},
-					: undefined,
+				this.$auth.hasPermi('monitoring:energy-statistics:update')
-				this.$auth.hasPermiAnd([
-					'monitoring:energy-statistics:update',
-					'monitoring:energy-statistics:query',
-				])
 					? {
 							type: 'edit',
 							btnName: '编辑',

src/views/order/monitoring/components/monitoringRingCharts.vue

@@ -4,71 +4,23 @@
       <span class="blueTitle"></span>
       <span>各集团订单环形图</span>
     </div>
-		<div
+    <div class="chartBox" id='orderChartBox' v-show='chartList.length'>
-			class="chartBox"
+      <div class="chartItem" v-for="(item, index) in chartList" :key='index' :style="{width: 388*beilv+'px',height: 286*beilv+'px',padding:14*beilv+'px',marginRight:9*beilv+'px',marginBottom:9*beilv+'px'}">
-			id="orderChartBox"
+        <div class="topTitle" :style="{fontSize: 14 * beilv + 'px'}">
-			v-show="chartList.length">
+          <svg-icon icon-class="order-monitoring" :style="{fontSize: 16*beilv+'px'}"/>
-			<div
+          <span class="orderName" :style="{paddingRight:8*beilv+'px',marginRight:8*beilv+'px'}">{{item.orderGroupName}}</span>
-				class="chartItem"
-				v-for="(item, index) in chartList"
-				:key="index"
-				:style="{
-					width: 388 * beilv + 'px',
-					height: 286 * beilv + 'px',
-					padding: 14 * beilv + 'px',
-					marginRight: 9 * beilv + 'px',
-					marginBottom: 9 * beilv + 'px',
-				}">
-				<div
-					class="topTitle"
-					:style="{ fontSize: 14 * beilv + 'px' }">
-					<svg-icon
-						icon-class="order-monitoring"
-						:style="{ fontSize: 16 * beilv + 'px' }" />
-					<span
-						class="orderName"
-						:style="{
-							paddingRight: 8 * beilv + 'px',
-							marginRight: 8 * beilv + 'px',
-						}">
-						{{ item.orderGroupName }}
-					</span>
           <span>订单计划数量{{item.num}}</span>
         </div>
         <div
           :id="item.id"
-					:style="{
+          :style="{width: 166*beilv+'px',height: 166*beilv+'px',margin: 'auto'}"
-						width: 166 * beilv + 'px',
+        ></div>
-						height: 166 * beilv + 'px',
+        <div class="legend" :style="{height: 54 * beilv + 'px', marginTop: 10*beilv+'px'}">
-						margin: 'auto',
+          <div class="legendItem" v-for="(subItem, i) in item.order" :key='i' :style="{paddingRight:9*beilv+'px',marginRight:9*beilv+'px'}">
-					}"></div>
+            <span class="itemNum" :style="{fontSize: 18 * beilv + 'px'}">{{subItem.value}}</span>
-				<div
-					class="legend"
-					:style="{ height: 54 * beilv + 'px', marginTop: 10 * beilv + 'px' }">
-					<div
-						class="legendItem"
-						v-for="(subItem, i) in item.order"
-						:key="i"
-						:style="{
-							paddingRight: 9 * beilv + 'px',
-							marginRight: 9 * beilv + 'px',
-						}">
-						<span
-							class="itemNum"
-							:style="{ fontSize: 18 * beilv + 'px' }">
-							{{ subItem.value }}
-						</span>
             <div>
-							<span
+              <span class="itemName" :style="{fontSize: 14 * beilv + 'px'}">
-								class="itemName"
+                <span class="smallBlock" :style="{backgroundColor:subItem.color,width:8*beilv+'px',height:8*beilv+'px'}"></span>
-								:style="{ fontSize: 14 * beilv + 'px' }">
-								<span
-									class="smallBlock"
-									:style="{
-										backgroundColor: subItem.color,
-										width: 8 * beilv + 'px',
-										height: 8 * beilv + 'px',
-									}"></span>
                 {{subItem.name}}
               </span>
             </div>
@@ -77,66 +29,59 @@
       </div>
     </div>
     <!-- 空图 -->
-		<div
+    <div class="no-data-bg" v-show='!chartList.length'></div>
-			class="no-data-bg"
-			v-show="!chartList.length"></div>
   </div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
-import { debounce } from '@/utils/debounce';
+import { debounce } from '@/utils/debounce'
 export default {
   name: 'MonitoringRingCharts',
   props: {
     chartList: {
       type: Array,
       default: () => {
-				return [];
+        return []
-			},
+      }
-		},
+    }
   },
   data() {
     return {
       myChart: [],
       beilv: 1,
-		};
+      canvasReset: ''
+    }
   },
   mounted() {
-		this.canvasReset();
+    this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610
-		window.addEventListener('resize', this.canvasReset);
+    this.canvasReset = debounce(() => {
-	},
+      this.initChart()
-	destroyed() {
+    }, 500)
-		window.removeEventListener('resize', this.canvasReset);
+    window.addEventListener('resize', () => {
+      this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610
+      this.canvasReset()
+    })
   },
   methods: {
-		canvasReset() {
-			debounce(() => {
-				this.initChart();
-			}, 500)();
-			this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610;
-		},
     // 饼图
     initChart() {
       if (this.chartList.length <= 0) {
-				return false;
+        return false
       }
       // 销毁实例
       for (let j = 0;j < this.chartList.length; j++) {
         if (this.myChart[j]) {
-					this.myChart[j].dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+          this.myChart[j].dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
         }
       }
       for (let i = 0; i < this.chartList.length; i++) {
         var chartDom = document.getElementById(this.chartList[i].id);
         this.myChart[i] = echarts.init(chartDom);
-				let colorList = [];
+        let colorList = []
-				this.chartList[i].order.map((item) => {
+        this.chartList[i].order.map(item => {
-					colorList.push(item.color);
+          colorList.push(item.color)
-				});
+        })
-				let percentage = (
+        let percentage = (this.chartList[i].sunNum/this.chartList[i].num*100).toFixed(0)
-					(this.chartList[i].sunNum / this.chartList[i].num) *
-					100
-				).toFixed(0);
         var option = {
           color: colorList,
           series: [
@@ -148,7 +93,7 @@ export default {
               itemStyle: {
                 borderRadius: 5,
                 borderColor: '#fff',
-								borderWidth: 2,
+                borderWidth: 2
               },
               label: {
                 show: true,
@@ -156,32 +101,32 @@ export default {
                 color: '#000',
                 formatter: [
                     '{a|'+percentage+'%}',
-									'{b|生产' + this.chartList[i].sunNum + '}',
+                    '{b|生产'+this.chartList[i].sunNum+'}'
                 ].join('\n\n'),
                 rich: {
                   a: {
-										fontSize: this.beilv * 24 + 'px',
+                      fontSize: this.beilv*24 +'px'
                   },
                   b: {
-										fontSize: this.beilv * 12 + 'px',
+                      fontSize: this.beilv*12 +'px'
-									},
+                  }
-								},
-							},
-							emphasis: {
-								disabled: true,
-							},
-							labelLine: {
-								show: false,
-							},
-							data: this.chartList[i].order,
-						},
-					],
-				};
-				option && this.myChart[i].setOption(option);
                 }
               },
+              emphasis: {
+                disabled: true
               },
+              labelLine: {
+                show: false
+              },
+              data: this.chartList[i].order
+            }
+          ]
         };
+        option && this.myChart[i].setOption(option)
+      }
+    }
+  }
+}
 </script>
 <style lang='scss' scoped>
 .chartBox {
@@ -194,11 +139,11 @@ export default {
   align-content: flex-start;
   .chartItem {
     border-radius: 8px;
-		border: 1px solid #cacaca;
+    border: 1px solid #CACACA;
     .topTitle {
       margin-bottom: 10px;
       .orderName {
-				border-right: 1px solid #cacaca;
+        border-right: 1px solid #CACACA;
       }
     }
     .legend {
@@ -207,7 +152,7 @@ export default {
       overflow: auto;
       .legendItem {
         display: inline-block;
-				border-right: 1px solid #e8e8e8;
+        border-right: 1px solid #E8E8E8;
         .itemName {
           .smallBlock {
             display: inline-block;