<script setup>
|
import { ref, computed, onMounted } from "vue";
|
import svgLock from "./svgLock.vue";
|
const emit = defineEmits(["showInfo"]);
|
|
const props = defineProps({
|
offset: {
|
type: Array,
|
default: [0, 0],
|
},
|
width: {
|
type: [Number, String],
|
default: 80,
|
},
|
lineWidth: {
|
type: [Number, String],
|
default: 2,
|
},
|
color: {
|
type: String,
|
default: "#804000",
|
},
|
offColor: {
|
type: String,
|
// default: '#888',
|
default: '#f00',
|
},
|
onColor: {
|
type: String,
|
default: '#0f0',
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
onLine0: {
|
type: Boolean,
|
default: false,
|
},
|
onLine1: {
|
type: Boolean,
|
default: false,
|
},
|
lock0: {
|
type: Boolean,
|
default: false,
|
},
|
lock1: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
/**
|
* 0 ------- 1
|
/| /|
|
/ | / |
|
3 ------- 2 |
|
| | | |
|
| 4 ---- |-- 5
|
| / | /
|
|/ |/
|
7 ------- 6
|
*/
|
const x0 = computed(() => {
|
return props.width / 2 - props.width / 6;
|
});
|
|
const x1 = computed(() => {
|
return props.width;
|
});
|
|
const x2 = computed(() => {
|
return props.width / 2 + props.width / 6;
|
});
|
|
const x3 = computed(() => {
|
return 0;
|
});
|
|
const y0 = computed(() => {
|
return 0;
|
});
|
|
const y1 = computed(() => {
|
return props.width * 2 / 4;
|
});
|
|
const y2 = computed(() => {
|
return props.width * 2 * 3 / 4;
|
});
|
|
const y3 = computed(() => {
|
return props.width * 2;
|
});
|
|
const y4 = computed(() => {
|
return props.width * 2 * 5 / 8;
|
});
|
|
const y5 = computed(() => {
|
return props.width * 2 * 3 / 8;
|
});
|
|
const strokeColor = computed(() => {
|
return props.disabled ? 'rgba(125,125,125,0.2)' : props.color;
|
});
|
|
const statusColor0 = computed(() => {
|
if (props.disabled || !props.onLine0) return '#888';
|
return props.lock0 ? props.onColor : props.offColor;
|
});
|
|
const statusColor1 = computed(() => {
|
if (props.disabled || !props.onLine1) return '#888';
|
return props.lock1 ? props.onColor : props.offColor;
|
});
|
|
const onLineColor0 = computed(() => {
|
if (props.disabled) return '#888';
|
return props.onLine0 ? props.onColor : props.offColor;
|
});
|
|
const onLineColor1 = computed(() => {
|
if (props.disabled) return '#888';
|
return props.onLine1 ? props.onColor : props.offColor;
|
});
|
|
function showInfo(idx, event) {
|
if (props.disabled) return;
|
emit("showInfo", { idx, event });
|
}
|
|
|
|
</script>
|
|
<template>
|
<g ref="g" :transform="'translate(' + offset.join(',') + ')'">
|
<!-- 0-1 -->
|
<line :x1="x0" :x2="x1" :y1="y0" :y2="y0" :stroke="strokeColor" :stroke-width="lineWidth" />
|
<!-- 0-3 -->
|
<line
|
:x1="x0"
|
:y1="y0"
|
:x2="x3"
|
:y2="y1"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 3-2 -->
|
<line
|
:x1="x3"
|
:y1="y1"
|
:x2="x2"
|
:y2="y1"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 2-1 -->
|
<line
|
:x1="x2"
|
:y1="y1"
|
:x2="x1"
|
:y2="y0"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 3-7 -->
|
<line :x1="x3" :x2="x3" :y1="y1" :y2="y3" :stroke="strokeColor" :stroke-width="lineWidth" />
|
<!-- 7-6 -->
|
<line
|
:x1="x3"
|
:y1="y3"
|
:x2="x2"
|
:y2="y3"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 2-6 -->
|
<line
|
:x1="x2"
|
:y1="y1"
|
:x2="x2"
|
:y2="y3"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 5-6 -->
|
<line
|
:x1="x1"
|
:y1="y2"
|
:x2="x2"
|
:y2="y3"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 1-5 -->
|
<line :x1="x1" :x2="x1" :y1="y0" :y2="y2" :stroke="strokeColor" :stroke-width="lineWidth" />
|
<!-- 0-4 -->
|
<line
|
:x1="x0"
|
:y1="y0"
|
:x2="x0"
|
:y2="y2"
|
stroke-dasharray="4,2"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 4-5 -->
|
<line
|
:x1="x0"
|
:y1="y2"
|
:x2="x1"
|
:y2="y2"
|
stroke-dasharray="4,2"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 4-7 -->
|
<line
|
:x1="x0"
|
:y1="y2"
|
:x2="x3"
|
:y2="y3"
|
stroke-dasharray="4,2"
|
:stroke="strokeColor"
|
:stroke-width="lineWidth"
|
/>
|
<!-- 前门锁 -->
|
<svg-lock :offset="[x3 + 6, y4 - 14]"
|
:lockFillColor="statusColor0"
|
:stateColor="onLineColor0"
|
@mouseenter="showInfo(0, $event)"
|
></svg-lock>
|
<!-- 后门锁 -->
|
<svg-lock :offset="[x1 - 14, y5 - 10]"
|
:lockFillColor="statusColor1"
|
:stateColor="onLineColor1"
|
@mouseenter="showInfo(1, $event)"
|
></svg-lock>
|
</g>
|
</template>
|
|
<style scoped lang="less"></style>
|
