chenjinliang
/
disinfection_high_front_end
forked from maochaoying/disinfection_high_front_end
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

弹框确认和取消按钮位置不统一

master
sige 1 year ago
parent
4216b6c110
commit
31c8cb56e6
4 changed files with 80 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      src/components/dialogs/DelPreModal.vue
  2. 59
      src/components/dialogs/DisinfectModal.vue
  3. 58
      src/components/dialogs/LiquidModal.vue
  4. 40
      src/components/dialogs/UserModal.vue

39
src/components/dialogs/DelPreModal.vue
View File

@ -1,37 +1,16 @@
<template> <template>
<div class="del_pre_modal_container">
<div class="modal_content">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="69"
height="69"
viewBox="0 0 69 69"
>
<g>
<path
d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
fill="#FA1C1C"
fill-opacity="1"
/>
</g>
</svg>
<p class="tips">
<span class="red">确定要删除当前预设吗？</span>
</p>
<div class="btns">
<div class="ok style-btn" @click="delThisPre">确定</div>
<div class="cancel style-btn" @click="handleCancel">取消</div>
</div>
</div>
</div>
<my-modal type="confirm" icon="warning"
content="确定要删除当前预设吗？"
v-model:visible="visible"
@ok="delThisPre"
@cancel="handleCancel"
></my-modal>
</template> </template>
<script setup> <script setup>
import { useFormulaStore, useWebSocketStore } from '@/store' import { useFormulaStore, useWebSocketStore } from '@/store'
import { delFormulaJSON, getAllFormulaJSON } from '@/mock/command' import { delFormulaJSON, getAllFormulaJSON } from '@/mock/command'
import { ref } from 'vue'
const formulaStore = useFormulaStore() const formulaStore = useFormulaStore()
const webSocketStore = useWebSocketStore() const webSocketStore = useWebSocketStore()
@ -41,6 +20,10 @@ const props = defineProps({
}, },
}) })
const visible = ref(true);
const handleCancel = () => { const handleCancel = () => {
props.hideDelModal() props.hideDelModal()
} }

59
src/components/dialogs/DisinfectModal.vue
View File

@ -1,43 +1,28 @@
<template> <template>
<div class="disinfect_modal_container">
<div class="modal_content">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="69"
height="69"
viewBox="0 0 69 69"
>
<g>
<path
d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
fill="#FA1C1C"
fill-opacity="1"
/>
</g>
</svg>
<p class="tips">
<span class="red">消毒正在进行中，是否终止消毒！</span>
</p>
<div class="btns">
<div class="ok style-btn" @click="handleStart">确定</div>
<div class="cancel style-btn" @click="handleCancel">取消</div>
</div>
</div>
</div>
<my-modal type="confirm" icon="warning"
v-model:visible="visible"
@ok="handleStart"
@cancel="handleCancel"
>
<p class="tips"><span class="red">消毒正在进行中，是否终止消毒！</span></p>
</my-modal>
</template> </template>
<script setup> <script setup>
import { stopDisinfectionJSON } from '@/mock/command' import { stopDisinfectionJSON } from '@/mock/command'
import { useOperatorStore, useWebSocketStore } from '@/store' import { useOperatorStore, useWebSocketStore } from '@/store'
import { ref } from 'vue'
const props = defineProps({ const props = defineProps({
hideDisinfectModal: { hideDisinfectModal: {
type: Function, type: Function,
}, },
}) })
const visible = ref(true)
const operatorStore = useOperatorStore() const operatorStore = useOperatorStore()
const webSocketStore = useWebSocketStore() const webSocketStore = useWebSocketStore()
@ -59,6 +44,24 @@ const handleStart = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tips {
margin-top: 33px;
margin-bottom: 50px;
font-family: Source Han Sans CN;
font-size: 21px;
font-weight: normal;
letter-spacing: 0.04em;
color: #000000;
.red {
color: #fa1c1c;
}
}
.disinfect_modal_container { .disinfect_modal_container {
position: fixed; position: fixed;
top: 0; top: 0;

58
src/components/dialogs/LiquidModal.vue
View File

@ -1,40 +1,18 @@
<template> <template>
<div class="liquid_modal_container">
<div class="modal_content">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="69"
height="69"
viewBox="0 0 69 69"
>
<g>
<path
d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
fill="#FA1C1C"
fill-opacity="1"
/>
</g>
</svg>
<p class="warn_info mg">
请<span class="red">检查</span>是否接入排出容器
</p>
<p class="warn_info">
并确认<span class="red">容器是否大于</span>排出液体容积
</p>
<div class="btns">
<div class="ok style-btn" @click="tapLiquid">确定</div>
<div class="cancel style-btn" @click="cancelTap">取消</div>
</div>
</div>
</div>
<my-modal type="confirm" icon="warning"
v-model:visible="visible"
@ok="tapLiquid"
@cancel="cancelTap"
>
<p class="warn_info mg">请<span class="red">检查</span>是否接入排出容器</p>
<p class="warn_info" style="margin-bottom: 50px;">并确认<span class="red">容器是否大于</span>排出液体容积</p>
</my-modal>
</template> </template>
<script setup> <script setup>
import { useWebSocketStore } from '@/store' import { useWebSocketStore } from '@/store'
import { startDrainingJSON } from '@/mock/command' import { startDrainingJSON } from '@/mock/command'
import { ref } from 'vue'
const webSocketStore = useWebSocketStore() const webSocketStore = useWebSocketStore()
@ -44,6 +22,9 @@ const props = defineProps({
}, },
}) })
const visible = ref(true)
const tapLiquid = () => { const tapLiquid = () => {
webSocketStore.sendCommandMsg(startDrainingJSON) webSocketStore.sendCommandMsg(startDrainingJSON)
props?.hideTabLiquid() props?.hideTabLiquid()
@ -55,6 +36,21 @@ const cancelTap = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warn_info {
font-family: Source Han Sans CN;
font-size: 22px;
font-weight: normal;
letter-spacing: 0.04em;
color: #000000;
.red {
color: #fa1c1c;
}
}
.mg {
margin-top: 34px;
margin-bottom: 16px;
}
.liquid_modal_container { .liquid_modal_container {
position: fixed; position: fixed;
top: 0; top: 0;

40
src/components/dialogs/UserModal.vue
View File

@ -1,35 +1,13 @@
<template> <template>
<div class="user_modal_container">
<div class="modal_content">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="69"
height="69"
viewBox="0 0 69 69"
>
<g>
<path
d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
fill="#FA1C1C"
fill-opacity="1"
/>
</g>
</svg>
<p class="tips">
请确认是否将 <span class="red">{{ userWarnInfo }}</span>
</p>
<div class="btns">
<div class="ok style-btn" @click="ok">确定</div>
<div class="cancel style-btn" @click="handleCancel">取消</div>
</div>
</div>
</div>
<my-modal type="confirm" icon="warning"
:content="`请确认是否将 ${userWarnInfo}`"
v-model:visible="visible"
@ok="ok"
@cancel="handleCancel"
></my-modal>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'
const props = defineProps({ const props = defineProps({
userWarnInfo: { userWarnInfo: {
type: String, type: String,
@ -42,6 +20,10 @@ const props = defineProps({
}, },
}) })
/** @var {Boolean} */
const visible = ref(true);
const ok = () => { const ok = () => {
props.handleOk() props.handleOk()
props.hideUserModal() props.hideUserModal()

Write Preview
Loading…
Cancel
Save