forked from gzt/A8000
zhangjiming
7 months ago
3 changed files with 361 additions and 54 deletions
-
278src/pages/Index/Settings/Lis.vue
-
12src/router/router.ts
-
125src/services/Index/settings/settings.ts
@ -1,10 +1,280 @@ |
|||
<template> |
|||
<div> |
|||
<!-- --> |
|||
开发中…… |
|||
<div class="lis-setting"> |
|||
<div class="setting-item"> |
|||
<span class="label">类型</span> |
|||
<div class="options"> |
|||
<button |
|||
v-for="(item, idx) in LISTypeItems" |
|||
:key="idx" |
|||
:class="{ active: lisSettings && lisSettings.LISType === item[0] }" |
|||
@click="updLisType(item[0])" |
|||
> |
|||
{{ item[1] }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="setting-item"> |
|||
<span class="label">协议</span> |
|||
<div class="options"> |
|||
<button |
|||
:class="{ |
|||
active: lisSettings && lisSettings.LISProtocol === 'Boditech', |
|||
}" |
|||
@click="updLisProtocol('Boditech')" |
|||
> |
|||
Boditech |
|||
</button> |
|||
<button |
|||
:class="{ |
|||
active: lisSettings && lisSettings.LISProtocol === 'Simens', |
|||
}" |
|||
@click="updLisProtocol('Simens')" |
|||
> |
|||
Simens |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="setting-item"> |
|||
<span class="label">接口</span> |
|||
<div class="options"> |
|||
<button |
|||
v-for="(item, idx) in LISInterfaceItems" |
|||
:key="idx" |
|||
:class="{ active: lisSettings && lisSettings.LIFIf === item[0] }" |
|||
@click="updLisInterface(item[0])" |
|||
> |
|||
{{ item[1] }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div |
|||
v-if="lisSettings && lisSettings.LIFIf === 'NETWORK'" |
|||
class="setting-item" |
|||
> |
|||
<span class="label">Host's IP</span> |
|||
<div class="options"> |
|||
<input style="min-width: 250px" v-model="lisSettings.LISNetIp" type="text"></input> |
|||
<button @click="updLisIP(lisSettings.LISNetIp)" >设置</button> |
|||
</div> |
|||
</div> |
|||
<div |
|||
v-if="lisSettings && lisSettings.LIFIf === 'NETWORK'" |
|||
class="setting-item" |
|||
> |
|||
<span class="label">Host's Port</span> |
|||
<div class="options"> |
|||
<input type="text" v-model="lisSettings.LISNetPort" ></input> |
|||
<button @click="updLisPort(lisSettings.LISNetPort)" >设置</button> |
|||
</div> |
|||
</div> |
|||
<div |
|||
v-if="lisSettings && lisSettings.LIFIf === 'SERIAL'" |
|||
class="setting-item" |
|||
> |
|||
<span class="label">传输速度</span> |
|||
<div class="options"> |
|||
<button |
|||
v-for="(item, idx) in LISSerialBaudrateItems" |
|||
:key="idx" |
|||
:class="{ |
|||
active: lisSettings && lisSettings.LISSerialBaudrate === item[0], |
|||
}" |
|||
@click="updLisSerialBaudrate(item[0])" |
|||
> |
|||
{{ item[1] }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="setting-item"> |
|||
<span class="label">导出</span> |
|||
<div class="options"> |
|||
<button |
|||
:class="{ |
|||
active: lisSettings && lisSettings.LISAutoExport, |
|||
}" |
|||
@click="updLisAutoExport(true)" |
|||
> |
|||
自动 |
|||
</button> |
|||
<button |
|||
:class="{ |
|||
active: lisSettings && !lisSettings.LISAutoExport, |
|||
}" |
|||
@click="updLisAutoExport(false)" |
|||
> |
|||
手动 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
<script setup lang="ts"> |
|||
import { |
|||
getLISSetting, |
|||
LISInterface, |
|||
LISInterfaceMap, |
|||
LISProtocol, |
|||
LISSerialBaudrate, |
|||
LISSerialBaudrateMap, |
|||
LISSettings, |
|||
LISType, |
|||
LISTypeMap, |
|||
setLISAutoExport, |
|||
setLISInterface, |
|||
setLISNetIp, |
|||
setLISNetPort, |
|||
setLISProtocol, |
|||
setLISSerialBaudrate, |
|||
setLISType, |
|||
} from '@/services' |
|||
import { onMounted, ref } from 'vue' |
|||
import * as R from 'ramda' |
|||
import { eMessage } from '../utils' |
|||
|
|||
const LISInterfaceItems = R.toPairs(LISInterfaceMap) |
|||
const LISSerialBaudrateItems = R.toPairs(LISSerialBaudrateMap) |
|||
const LISTypeItems = R.toPairs(LISTypeMap) |
|||
|
|||
const lisSettings = ref<LISSettings | undefined>(undefined) |
|||
const getLisSetting = async () => { |
|||
const res = await getLISSetting() |
|||
if (res && res.success) { |
|||
lisSettings.value = res.data |
|||
} |
|||
} |
|||
|
|||
const updLisType = async (type:LISType) => { |
|||
const res = await setLISType(type) |
|||
if (res && res.success) { |
|||
getLisSetting() |
|||
} else { |
|||
res && res.data && res.data.info && eMessage.error(res.data.info) |
|||
} |
|||
} |
|||
|
|||
const updLisProtocol = async (p: LISProtocol) => { |
|||
const res = await setLISProtocol(p) |
|||
if (res && res.success) { |
|||
getLisSetting() |
|||
} else { |
|||
res && res.data && res.data.info && eMessage.error(res.data.info) |
|||
} |
|||
} |
|||
|
|||
const updLisInterface = async (f: LISInterface) => { |
|||
const res = await setLISInterface(f) |
|||
if (res && res.success) { |
|||
getLisSetting() |
|||
} else { |
|||
res && res.data && res.data.info && eMessage.error(res.data.info) |
|||
} |
|||
} |
|||
|
|||
const updLisSerialBaudrate = async (s: LISSerialBaudrate) => { |
|||
const res = await setLISSerialBaudrate(s) |
|||
if (res && res.success) { |
|||
getLisSetting() |
|||
} else { |
|||
res && res.data && res.data.info && eMessage.error(res.data.info) |
|||
} |
|||
} |
|||
|
|||
const updLisAutoExport = async (auto: boolean) => { |
|||
const res = await setLISAutoExport(auto) |
|||
if (res && res.success) { |
|||
getLisSetting() |
|||
} else { |
|||
res && res.data && res.data.info && eMessage.error(res.data.info) |
|||
} |
|||
} |
|||
|
|||
const updLisIP = async (ip: string) => { |
|||
const res = await setLISNetIp(ip) |
|||
if (res && res.success) { |
|||
getLisSetting() |
|||
} else { |
|||
res && res.data && res.data.info && eMessage.error(res.data.info) |
|||
} |
|||
} |
|||
|
|||
const updLisPort = async (port: number) => { |
|||
const res = await setLISNetPort(port) |
|||
if (res && res.success) { |
|||
getLisSetting() |
|||
} else { |
|||
res && res.data && res.data.info && eMessage.error(res.data.info) |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getLisSetting() |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.lis-setting { |
|||
background-color: #f5f7fa; |
|||
width: 100%; |
|||
height: 90vh; |
|||
box-sizing: border-box; |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
.setting-item { |
|||
background-color: #fff; |
|||
border-radius: 12px; |
|||
padding: 24px 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); |
|||
transition: all 0.3s ease; |
|||
|
|||
.label { |
|||
font-size: 28px; |
|||
font-weight: 500; |
|||
color: #303133; |
|||
} |
|||
|
|||
input { |
|||
padding: 8px; |
|||
border: 1px solid #ccc; |
|||
border-radius: 4px; |
|||
font-size: 30px; |
|||
transition: box-shadow 0.2s ease; |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.options { |
|||
display: flex; |
|||
gap: 12px; |
|||
flex-wrap: wrap; |
|||
|
|||
button { |
|||
min-width: 120px; |
|||
height: 56px; |
|||
padding: 0 24px; |
|||
border: 1px solid #dcdfe6; |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
font-size: 24px; |
|||
color: #606266; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&.active { |
|||
color: #fff; |
|||
background-color: #409eff; |
|||
border-color: #409eff; |
|||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue