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-beautify": "1.13.0",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"lib-flexible": "^0.3.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"ol": "^6.5.0", "ol": "^6.5.0",

1
public/index.html
View File

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

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

@ -170,7 +170,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)", backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)", borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: { textStyle: {
fontSize: 12, fontSize: "1rem",
color: "#808C9F", color: "#808C9F",
}, },
}, },
@ -182,7 +182,7 @@ export default {
top: "50%", top: "50%",
textStyle: { textStyle: {
fontFamily: "DinBm", fontFamily: "DinBm",
fontSize: 12, fontSize: "1rem",
color: "#ffffff", color: "#ffffff",
}, },
}, },
@ -192,7 +192,7 @@ export default {
top: "40%", top: "40%",
textStyle: { textStyle: {
fontFamily: "DouYu", fontFamily: "DouYu",
fontSize: 20, fontSize: "1.2rem",
color: "rgba(255, 183, 89, 0.8)", color: "rgba(255, 183, 89, 0.8)",
}, },
}, },

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

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

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:19:56 * @Date: 2024-10-18 10:19:56
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
* @Description: 总览大屏-病害三维饼图 * @Description: 总览大屏-病害三维饼图
--> -->
@ -198,7 +198,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)", backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)", borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: { textStyle: {
fontSize: 12, fontSize: "0.8rem",
color: "#ffffff", color: "#ffffff",
}, },
formatter: (params) => { formatter: (params) => {
@ -486,4 +486,3 @@ export default {
} }
} }
</style> </style>

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:16:30 * @Date: 2024-10-18 10:16:30
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
* @Description: 总览大屏-病害趋势 * @Description: 总览大屏-病害趋势
--> -->
@ -57,7 +57,7 @@ export default {
text: "", text: "",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: "0.8rem",
}, },
}, },
legend: { legend: {
@ -84,7 +84,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)", backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)", borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: { textStyle: {
fontSize: 12, fontSize: "0.8rem",
color: "#808C9F", color: "#808C9F",
}, },
confine: true, confine: true,
@ -103,7 +103,7 @@ export default {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
color: "#808C9F", color: "#808C9F",
fontSize: 12, fontSize: "0.8rem",
}, },
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始 boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
data: xData, data: xData,
@ -118,7 +118,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#808C9F", color: "#808C9F",
fontSize: 12, fontSize: "0.8rem",
formatter: function (value) { formatter: function (value) {
return value + ""; return value + "";
}, },
@ -235,7 +235,8 @@ export default {
// 是否显示detail，即拖拽时候显示详细数值信息 // 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false, 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, endValue: this.echartList.length,
// empty：当前数据窗口外的数据，被设置为空。 // empty：当前数据窗口外的数据，被设置为空。

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

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

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

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

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 10:40:54 * @Date: 2024-10-17 10:40:54
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\index.vue
* @Description: 路线管理-终端管理 * @Description: 路线管理-终端管理
--> -->