forked from gzt/A8000
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> |
<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> |
</div> |
||||
</template> |
</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> |
</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