<template>
|
<div class="keyword-ring" style="height:calc(100% - 40px)">
|
<!-- width="400" height="400" -->
|
<svg width="100%" height="100%">
|
<circle cx="200" cy="200" r="155" fill="none" stroke-width="3" />
|
<circle cx="200" cy="200" r="125" fill="none" stroke-width="3" />
|
<circle cx="200" cy="200" r="95" fill="none" stroke-width="3" />
|
<circle cx="200" cy="200" r="65" fill="none" stroke-width="3" />
|
<text class="text-item" x="60" y="80" style="fill: rgb(211 211 211); font-weight: bold; padding:5px;
|
font-size:14px;
|
display:inline-block;
|
border-radius:8px;
|
background:#007101;
|
cursor: pointer;postion:absolute;left:200;top:40">
|
误报警
|
</text>
|
<text class="text-item" x="50" y="170" text-anchor="middle"
|
style="padding:5px;
|
font-size:14px;
|
display:inline-block;
|
border-radius:8px;
|
background:#007101;
|
fill: rgb(211 211 211);">管路整动</text>
|
<text class="text-item" x="245" y="250" text-anchor="middle" font-size="20px"
|
style="padding:5px;
|
font-size:14px;
|
display:inline-block;
|
border-radius:8px;
|
background:#007101;
|
fill: rgb(211 211 211);">冷却油度高</text>
|
<text
|
x="50"
|
y="270"
|
class="text-item"
|
style="padding:5px;
|
font-size:14px;
|
display:inline-block;
|
border-radius:8px;
|
background:#007101;
|
fill: rgb(211 211 211);"
|
text-anchor="middle"
|
>
|
清洁度超差
|
</text>
|
<text x="220" class="text-item" y="60" text-anchor="middle" font-size="20px"
|
style="padding:5px;
|
font-size:14px;
|
display:inline-block;
|
border-radius:8px;
|
background:#007101;
|
fill: rgb(211 211 211);">清洁度超差</text>
|
<text x="280" class="text-item" y="110" text-anchor="middle" font-size="20px"
|
style="padding:5px;
|
font-size:14px;
|
display:inline-block;
|
border-radius:8px;
|
background:#007101;
|
fill:rgb(211 211 211)">保护器报警</text>
|
<image xlink:href="../../public/语音.png" x="105" y="100" width="110" height="110" />
|
</svg>
|
</div>
|
</template>
|
<script>
|
const data = {
|
// 您的关键词数据
|
}
|
|
const MyComponent = {
|
data() {
|
return {
|
myImage: "../../public/语音.png"
|
}
|
}
|
}
|
</script>
|
<style>
|
.text-item{
|
width:auto;
|
padding:5px;
|
font-size:14px;
|
display:inline-block;
|
border-radius:8px;
|
background:#007101;
|
color:#fff;
|
cursor: pointer
|
}
|
</style>
|
