SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改屏幕适配

Browse Source
This commit is contained in:
SunTao 2024-12-09 17:51:58 +08:00
parent 1de54c6873
commit e60fac3dd1
10 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -54,6 +54,7 @@
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"lib-flexible": "^0.3.2",
"lodash": "^4.17.21",
"nprogress": "0.2.0",
"ol": "^6.5.0",

1
public/index.html
View File

@ -3,6 +3,7 @@
<head>
<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=1eb44fae5b9dc454442b322e9a41d233" type="text/javascript"></script>
<script src="./lib-flexible.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">

51
public/lib-flexible.js Normal file
View File

@ -0,0 +1,51 @@
/*
* @Author: SunTao 328867980@qq.com
* @Date: 2024-12-09 17:19:23
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 17:19:28
* @FilePath: \znxjxt-ui\public\lib-flexible.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
(function flexible(window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (16 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
function setRemUnit() {
var rem = docEl.clientWidth / 120
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))

12
src/views/big-screen/disease-components/traffic-statistic.vue
View File

@ -42,7 +42,7 @@
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { getDropList } from "@/api/xj/screen/disease-screen";
@ -170,7 +170,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
fontSize: 12,
fontSize: "1rem",
color: "#808C9F",
},
},
@ -182,7 +182,7 @@ export default {
top: "50%",
textStyle: {
fontFamily: "DinBm",
fontSize: 12,
fontSize: "1rem",
color: "#ffffff",
},
},
@ -192,7 +192,7 @@ export default {
top: "40%",
textStyle: {
fontFamily: "DouYu",
fontSize: 20,
fontSize: "1.2rem",
color: "rgba(255, 183, 89, 0.8)",
},
},
@ -251,7 +251,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
@ -317,4 +317,4 @@ export default {
}
}
}
</style>
</style>

11
src/views/big-screen/disease-components/traffic-trend.vue
View File

@ -166,7 +166,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
fontSize: 12,
fontSize: "0.8rem",
color: "#808C9F",
},
},
@ -184,7 +184,7 @@ export default {
data: xData,
axisLabel: {
color: "#808C9F",
fontSize: 12,
fontSize: "0.8rem",
interval: 0,
},
axisLine: {
@ -223,7 +223,7 @@ export default {
axisLabel: {
show: true,
color: "#808C9F",
fontSize: 12,
fontSize: "0.8rem",
},
},
],
@ -246,7 +246,7 @@ export default {
formatter: "{c}",
position: "top",
color: "#fff",
fontSize: 14,
fontSize: "0.8rem",
},
data: yData,
},
@ -309,6 +309,7 @@ export default {
.content {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.traffic-select {
@ -324,4 +325,4 @@ export default {
overflow: hidden;
}
}
</style>
</style>

9
src/views/big-screen/overview-components/disease-current.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:19:56
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-03 11:41:07
* @LastEditTime: 2024-12-09 17:38:03
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
* @Description: 总览大屏-病害三维饼图
-->
@ -57,7 +57,7 @@
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
@ -198,7 +198,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
fontSize: 12,
fontSize: "0.8rem",
color: "#ffffff",
},
formatter: (params) => {
@ -406,7 +406,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
@ -486,4 +486,3 @@ export default {
}
}
</style>

15
src/views/big-screen/overview-components/disease-trends.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:16:30
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-14 15:49:52
* @LastEditTime: 2024-12-09 17:39:15
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
* @Description: 总览大屏-病害趋势
-->
@ -57,7 +57,7 @@ export default {
text: "",
textStyle: {
color: "#fff",
fontSize: 12,
fontSize: "0.8rem",
},
},
legend: {
@ -84,7 +84,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
fontSize: 12,
fontSize: "0.8rem",
color: "#808C9F",
},
confine: true,
@ -103,7 +103,7 @@ export default {
axisLabel: {
interval: 0,
color: "#808C9F",
fontSize: 12,
fontSize: "0.8rem",
},
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
data: xData,
@ -118,7 +118,7 @@ export default {
},
axisLabel: {
color: "#808C9F",
fontSize: 12,
fontSize: "0.8rem",
formatter: function (value) {
return value + "";
},
@ -235,7 +235,8 @@ export default {
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: this.echartList.length > 6 ? this.echartList.length - 6 : 0,
startValue:
this.echartList.length > 6 ? this.echartList.length - 6 : 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: this.echartList.length,
// empty：当前数据窗口外的数据，被设置为空。
@ -280,4 +281,4 @@ export default {
height: 100%;
overflow: hidden;
}
</style>
</style>

6
src/views/big-screen/overview-components/inspection-vehicles.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 09:40:18
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-06 15:53:55
* @LastEditTime: 2024-12-09 17:44:25
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
* @Description: 总览大屏-巡检车辆
-->
@ -40,7 +40,7 @@
header-row-class-name="headerRow"
row-class-name="bodayRow"
style="width: 100%; background: none"
height="85%"
height="80%"
>
<el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
<el-table-column width="60" prop="status" label="状态">
@ -324,7 +324,7 @@ export default {
font-size: 0.6rem;
span {
font-size: 1rem;
font-size: 1.5rem;
font-family: "DouYu";
}
}

4
src/views/big-screen/overview-components/today-inspection.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 09:42:49
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 11:42:55
* @LastEditTime: 2024-12-09 17:40:43
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
* @Description: 总览大屏-今日巡查
-->
@ -247,7 +247,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
fontSize: 12,
fontSize: "0.8rem",
color: "#ffffff",
},
},

2
src/views/xj/route/route-terminal/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 10:40:54
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 16:45:00
* @LastEditTime: 2024-12-09 17:17:53
* @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\index.vue
* @Description: 路线管理-终端管理
-->