bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化大屏的打包配置

This commit is contained in:
BianLzhaoMin 2024-07-17 10:59:52 +08:00
parent 9ba6c13880
commit ccf8482af8
7 changed files with 140 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sgzb-screen/config/index.js
View File

@ -36,7 +36,7 @@ var proxyUrl =
// Paths // Paths
assetsRoot: path.resolve(__dirname, '../dist'), assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static01', assetsSubDirectory: 'static01',
assetsPublicPath: '/bigScrap', assetsPublicPath: '/bigScrap/',
productionSourceMap: false, productionSourceMap: false,
devtool: '#source-map', devtool: '#source-map',
productionGzip: false, productionGzip: false,

2
sgzb-screen/config/prod.env.js
View File

@ -6,5 +6,5 @@ module.exports = {
NODE_ENV: '"production"', NODE_ENV: '"production"',
//post用当前域名 //post用当前域名
// API_ROOT: '"http://' + testUrl + '/iot"' // API_ROOT: '"http://' + testUrl + '/iot"'
// API_ROOT: '/', // API_ROOT: '/sgzbgl-api/',
} }

22
sgzb-screen/src/api/index.js
View File

@ -2,12 +2,18 @@
* axios全局配置 * axios全局配置
*/ */
import axios from 'axios'; import axios from 'axios';
axios.defaults.timeout = 30000 // axios.defaults.timeout = 30000
// 默认配置 // 默认配置
axios.defaults.baseURL = process.env.API_ROOT; // axios.defaults.baseURL = process.env.API_ROOT;
// axios.defaults.baseURL = '/sgzbgl-api/';
axios.interceptors.request.use(
const axiosService = axios.create({
baseURL: "http://192.168.8.163:21624/sgzbgl-api/",// you can use "process.env.VUE_APP_BASE_API" too
timeout: 30000
})
axiosService.interceptors.request.use(
config => { config => {
let token = localStorage.getItem('token') let token = localStorage.getItem('token')
if (token) { if (token) {
@ -22,7 +28,7 @@ axios.interceptors.request.use(
); );
// 添加一个请求拦截器 // 添加一个请求拦截器
axios.interceptors.response.use( axiosService.interceptors.response.use(
response => { response => {
if (response.data) { if (response.data) {
if (response.data.code === 401) { if (response.data.code === 401) {
@ -45,19 +51,21 @@ axios.interceptors.response.use(
// 通用POST方法 // 通用POST方法
export const POST = (url, params) => { export const POST = (url, params) => {
return axios.post(`${url}`, params).then(response => response); return axiosService.post(`${url}`, params).then(response => response);
}; };
// 通用POST_JSON方法 // 通用POST_JSON方法
export const POST_JSON = (url, json, params) => { export const POST_JSON = (url, json, params) => {
return axios.post(`${url}`, json, { return axiosService.post(`${url}`, json, {
params: params params: params
}).then(response => response); }).then(response => response);
}; };
// 通用GET方法 // 通用GET方法
export const GET = (url, params) => { export const GET = (url, params) => {
return axios.get(`${url}`, { return axiosService.get(`${url}`, {
params: params params: params
}).then(response => response); }).then(response => response);
}; };

137
sgzb-screen/src/components/home/centerBottom.vue
View File

@ -12,54 +12,61 @@
</template> </template>
<script> <script>
import { getAcceptanceStorageApi } from "../../api/screen"; import { getAcceptanceStorageApi } from '../../api/screen'
import inputStoreAnalysisDialog from './inputStoreAnalysisDialog.vue' import inputStoreAnalysisDialog from './inputStoreAnalysisDialog.vue'
import * as echarts from 'echarts'; import * as echarts from 'echarts'
export default { export default {
name: 'accessRatePage', name: 'accessRatePage',
components: { components: {
inputStoreAnalysisDialog inputStoreAnalysisDialog,
}, },
data() { data() {
return { return {
dataObj: {}, dataObj: {},
maType: '' maType: '',
} }
}, },
mounted() { mounted() {
this.$eventBus.$on('maType', (maType) => { this.$eventBus.$on('maType', (maType) => {
this.maType = maType this.maType = maType
this.getAcceptanceStorageApiPage() this.getAcceptanceStorageApiPage()
}); })
setInterval(() => { setInterval(() => {
this.getAcceptanceStorageApiPage() this.getAcceptanceStorageApiPage()
}, 60 * 1000); }, 60 * 1000)
}, },
destroyed() { destroyed() {
this.$eventBus.$off('maType'); this.$eventBus.$off('maType')
}, },
methods: { methods: {
getAcceptanceStorageApiPage() { getAcceptanceStorageApiPage() {
this.dataObj = {} this.dataObj = {}
let params = { let params = {
maType: this.maType maType: this.maType,
} }
getAcceptanceStorageApi(params).then(res => { getAcceptanceStorageApi(params).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.dataObj = res.data this.dataObj = res.data
this.getInitDataBar(); this.getInitDataBar()
} }
}) })
}, },
getInitDataBar() { getInitDataBar() {
const data = [70, 80, 60, 55, 43, 82, 66, 14]; const data = [70, 80, 60, 55, 43, 82, 66, 14]
const data2 = [26, 45, 56, 90, 23, 72, 46, 174]; const data2 = [26, 45, 56, 90, 23, 72, 46, 174]
const colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"]; const colorArr2 = [
const colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"]; 'rgba(11, 83, 128)',
'rgba(2, 143, 224)',
'rgba(11, 83, 128)',
]
const colorArr = [
'rgb(12, 109, 122)',
'rgba(1, 241, 228)',
'rgb(12, 109, 122)',
]
var color = { var color = {
type: "linear", type: 'linear',
x: 0, x: 0,
x2: 1, x2: 1,
y: 0, y: 0,
@ -82,9 +89,9 @@ export default {
color: colorArr[1], color: colorArr[1],
}, },
], ],
}; }
var color2 = { var color2 = {
type: "linear", type: 'linear',
x: 0, x: 0,
x2: 1, x2: 1,
y: 0, y: 0,
@ -107,20 +114,20 @@ export default {
color: colorArr2[1], color: colorArr2[1],
}, },
], ],
}; }
var barWidth = 30; var barWidth = 30
var option = { var option = {
backgroundColor: 'transparent', backgroundColor: 'transparent',
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: function (params) { formatter: function (params) {
var str = params[0].name + ":"; var str = params[0].name + ':'
params.filter(function (item) { params.filter(function (item) {
if (item.componentSubType == "bar") { if (item.componentSubType == 'bar') {
str += "<br/>" + item.seriesName + "：" + item.value; str += '<br/>' + item.seriesName + '：' + item.value
} }
}); })
return str; return str
}, },
}, },
legend: { legend: {
@ -129,7 +136,7 @@ export default {
itemHeight: 12, itemHeight: 12,
itemGap: 10, itemGap: 10,
icon: 'circle', icon: 'circle',
x: "right", x: 'right',
y: '4%', y: '4%',
data: ['验收数量', '入库数量'], data: ['验收数量', '入库数量'],
textStyle: { textStyle: {
@ -144,7 +151,7 @@ export default {
right: '4%', right: '4%',
bottom: '5%', bottom: '5%',
top: '15%', top: '15%',
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -155,7 +162,7 @@ export default {
lineStyle: { lineStyle: {
color: '#c1c1c1', color: '#c1c1c1',
width: 1, //这里是为了突出显示加上的 width: 1, //这里是为了突出显示加上的
} },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -176,13 +183,13 @@ export default {
color: '#17273B', color: '#17273B',
width: 1, width: 1,
type: 'dashd', type: 'dashd',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: false show: false,
}, },
//坐标值标注 //坐标值标注
axisLabel: { axisLabel: {
@ -190,36 +197,36 @@ export default {
color: '#c1c1c1', color: '#c1c1c1',
fontSize: 14, fontSize: 14,
formatter: function (value) { formatter: function (value) {
return value; return value
} },
}, },
}, },
series: [ series: [
{ {
z: 1, z: 1,
name: '入库数量', name: '入库数量',
type: "bar", type: 'bar',
barWidth: barWidth, barWidth: barWidth,
barGap: "0%", barGap: '0%',
data: this.dataObj.valueList2, data: this.dataObj.valueList2,
itemStyle: { itemStyle: {
normal: { normal: {
color: color, color: color,
} },
}, },
}, },
//下 //下
{ {
z: 2, z: 2,
name: '入库数量', name: '入库数量',
type: "pictorialBar", type: 'pictorialBar',
data: this.dataObj.valueList2.map(item => item + 90), data: this.dataObj.valueList2.map((item) => item + 90),
symbol: "diamond", symbol: 'diamond',
symbolOffset: ["-75%", "50%"], symbolOffset: ['-75%', '50%'],
symbolSize: [barWidth, 10], symbolSize: [barWidth, 10],
itemStyle: { itemStyle: {
normal: { normal: {
color: color color: color,
}, },
}, },
tooltip: { tooltip: {
@ -230,16 +237,16 @@ export default {
{ {
z: 3, z: 3,
name: '入库数量', name: '入库数量',
type: "pictorialBar", type: 'pictorialBar',
symbolPosition: "end", symbolPosition: 'end',
data: this.dataObj.valueList2, data: this.dataObj.valueList2,
symbol: "diamond", symbol: 'diamond',
symbolOffset: ["-85%", "-60%"], symbolOffset: ['-85%', '-60%'],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth], symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 1, borderWidth: 1,
color: '#00FEFC' color: '#00FEFC',
}, },
}, },
tooltip: { tooltip: {
@ -249,9 +256,9 @@ export default {
{ {
z: 1, z: 1,
name: '验收数量', name: '验收数量',
type: "bar", type: 'bar',
barWidth: barWidth, barWidth: barWidth,
barGap: "50%", barGap: '50%',
data: this.dataObj.valueList, data: this.dataObj.valueList,
itemStyle: { itemStyle: {
normal: { normal: {
@ -261,23 +268,23 @@ export default {
show: false, show: false,
textStyle: { textStyle: {
color: 'rgb(2, 157, 246)', color: 'rgb(2, 157, 246)',
fontSize: 8 fontSize: 8,
} },
}, },
} },
}, },
}, },
{ {
z: 2, z: 2,
name: '验收数量', name: '验收数量',
type: "pictorialBar", type: 'pictorialBar',
data: this.dataObj.valueList.map(item => item + 90), data: this.dataObj.valueList.map((item) => item + 90),
symbol: "diamond", symbol: 'diamond',
symbolOffset: ["75%", "50%"], symbolOffset: ['75%', '50%'],
symbolSize: [barWidth, 10], symbolSize: [barWidth, 10],
itemStyle: { itemStyle: {
normal: { normal: {
color: color2 color: color2,
}, },
}, },
tooltip: { tooltip: {
@ -287,16 +294,16 @@ export default {
{ {
z: 3, z: 3,
name: '验收数量', name: '验收数量',
type: "pictorialBar", type: 'pictorialBar',
symbolPosition: "end", symbolPosition: 'end',
data: this.dataObj.valueList, data: this.dataObj.valueList,
symbol: "diamond", symbol: 'diamond',
symbolOffset: ["75%", "-50%"], symbolOffset: ['75%', '-50%'],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth], symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 1, borderWidth: 1,
color: colorArr2[2] color: colorArr2[2],
}, },
}, },
tooltip: { tooltip: {
@ -305,11 +312,13 @@ export default {
}, },
], ],
} }
let myCharts = echarts.init(document.querySelector('#accessRateEchartsCenterBar')); let myCharts = echarts.init(
document.querySelector('#accessRateEchartsCenterBar')
)
myCharts.setOption(option) myCharts.setOption(option)
myCharts.off('click') myCharts.off('click')
myCharts.on('click', (params) => { myCharts.on('click', (params) => {
console.log('🚀 ~ myCharts.on ~ params:', params); console.log('🚀 ~ myCharts.on ~ params:', params)
const data = { const data = {
open: true, open: true,
maType: this.maType, maType: this.maType,
@ -319,7 +328,7 @@ export default {
// this.$refs.inputStoreAnalysisDialog.setOpen(data) // this.$refs.inputStoreAnalysisDialog.setOpen(data)
}) })
}, },
} },
} }
</script> </script>

10
sgzb-screen/src/router/index.js
View File

@ -70,16 +70,20 @@ router.beforeEach(async (to, from, next) => {
if (to.path === '/login/index') { if (to.path === '/login/index') {
return next(); return next();
} }
const token = localStorage.getItem('token');
if (to.query.token) {
localStorage.setItem('token', to.query.token)
}
const token = to.query.token || localStorage.getItem('token') || null;
if (!token) { if (!token) {
next('/login/index'); // 跳转到登录页 next('/bigScrap/login/index'); // 跳转到登录页
} else { } else {
next(); // 放行 next(); // 放行
} }
}); });
// if (to.matched.some(r => r.meta.requireLoginAuth)) { // if (to.matched.some(r => r.meta.requireLoginAuth)) {
// next(); // next();
// } else { // } else {

12
sgzb-screen/src/views/layout.vue
View File

@ -7,22 +7,18 @@
</template> </template>
<script> <script>
import ScaleBox from "@/components/scaleBox.vue"; import ScaleBox from '@/components/scaleBox.vue'
export default { export default {
name: 'layout', name: 'layout',
components: { ScaleBox }, components: { ScaleBox },
data() { data() {
return { return {}
}
}, },
mounted() { mounted() {
// console.log(this.$route) // console.log(this.$route)
localStorage.setItem('token', this.$route.query.token) // localStorage.setItem('token', this.$route.query.token)
}, },
methods: { methods: {},
}
} }
</script> </script>

68
sgzb-screen/src/views/login/index.vue
View File

@ -107,20 +107,25 @@
</div> </div>
</template> </template>
<script> <script>
import { authLoginApi, getSendIphoneCodeApi, loginCodeApi } from "../../api/userLogin"; import {
authLoginApi,
getSendIphoneCodeApi,
loginCodeApi,
} from '../../api/userLogin'
export default { export default {
name: 'Login', name: 'Login',
data() { data() {
const validatePhone = (rule, value, callback) => { const validatePhone = (rule, value, callback) => {
const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ const reg =
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
if (!value) { if (!value) {
callback(new Error('请输入手机号')); callback(new Error('请输入手机号'))
} else if (!reg.test(value)) { } else if (!reg.test(value)) {
callback(new Error('请输入正确的手机号')); callback(new Error('请输入正确的手机号'))
} else { } else {
callback(); callback()
} }
}; }
return { return {
isButtonState: false, isButtonState: false,
isCode: true, isCode: true,
@ -129,13 +134,13 @@ export default {
showPwd: false, showPwd: false,
captcha: '', captcha: '',
form: { form: {
userName: "", userName: '',
passWord: "", passWord: '',
phone: '', phone: '',
phoneCode: '' phoneCode: '',
}, },
UserLogin: true, UserLogin: true,
codeUrl: "", codeUrl: '',
rules: { rules: {
userName: [ userName: [
{ required: true, message: '账号不能为空', trigger: 'blur' }, { required: true, message: '账号不能为空', trigger: 'blur' },
@ -144,20 +149,25 @@ export default {
{ required: true, message: '密码不能为空', trigger: 'blur' }, { required: true, message: '密码不能为空', trigger: 'blur' },
], ],
phone: [ phone: [
{ validator: validatePhone, message: '请输入正确的手机号', trigger: 'blur' }, {
validator: validatePhone,
message: '请输入正确的手机号',
trigger: 'blur',
},
{ required: true, message: '手机号码不能为空', trigger: 'blur' }, { required: true, message: '手机号码不能为空', trigger: 'blur' },
], ],
phoneCode: [ phoneCode: [
{ required: true, message: '验证码不能为空', trigger: 'blur' }, { required: true, message: '验证码不能为空', trigger: 'blur' },
], ],
}, },
type: 1 type: 1,
} }
}, },
mounted() { mounted() {
console.log(this.$route) console.log(this.$route)
if(localStorage.getItem('token')!=''){ if (localStorage.getItem('token') != '') {
this.$router.push('./Home/index') // this.$router.push('./Home/index')
// location.href('/bigScrap/Home/index')
} }
}, },
@ -172,7 +182,7 @@ export default {
username: this.form.userName, username: this.form.userName,
password: this.form.passWord, password: this.form.passWord,
} }
authLoginApi(params).then(res => { authLoginApi(params).then((res) => {
if (res.code == 200) { if (res.code == 200) {
localStorage.setItem('token', res.data.access_token) localStorage.setItem('token', res.data.access_token)
this.$router.push('./Home/index') this.$router.push('./Home/index')
@ -183,9 +193,9 @@ export default {
}) })
} else { } else {
this.isButtonState = false this.isButtonState = false
return false; return false
} }
}); })
} }
if (this.type == 2) { if (this.type == 2) {
this.isButtonState = true this.isButtonState = true
@ -196,7 +206,7 @@ export default {
phone: this.form.phone, phone: this.form.phone,
code: this.form.phoneCode, code: this.form.phoneCode,
} }
loginCodeApi(params).then(res => { loginCodeApi(params).then((res) => {
if (res.code == 200) { if (res.code == 200) {
localStorage.setItem('token', res.data.access_token) localStorage.setItem('token', res.data.access_token)
this.$router.push('./Home/index') this.$router.push('./Home/index')
@ -207,11 +217,10 @@ export default {
}) })
} else { } else {
this.isButtonState = false this.isButtonState = false
return false; return false
} }
}); })
} }
}, },
loginWayClick(type) { loginWayClick(type) {
if (type == 1) { if (type == 1) {
@ -219,26 +228,27 @@ export default {
this.UserLogin = true this.UserLogin = true
this.loginWay = true this.loginWay = true
this.form = {} this.form = {}
this.$refs.form.resetFields(); this.$refs.form.resetFields()
} else { } else {
this.type = 2 this.type = 2
this.UserLogin = false this.UserLogin = false
this.loginWay = false this.loginWay = false
this.form = {} this.form = {}
this.$refs.form.resetFields(); this.$refs.form.resetFields()
} }
}, },
getCode() { getCode() {
const regex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; // 手机号正则表达式 const regex =
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 手机号正则表达式
let reg = regex.test(this.form.phone) let reg = regex.test(this.form.phone)
if (!reg) { if (!reg) {
this.$refs.form.validateField("phone"); this.$refs.form.validateField('phone')
} else { } else {
this.isCode = false this.isCode = false
let params = { let params = {
phone: this.form.phone phone: this.form.phone,
} }
getSendIphoneCodeApi(params).then(res => { getSendIphoneCodeApi(params).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.$message.success('短信发送成功！') this.$message.success('短信发送成功！')
} }
@ -273,8 +283,8 @@ export default {
alert('图片验证码不正确') alert('图片验证码不正确')
} }
} }
} },
} },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>