<template>
  <div>
    <svg
      :width="props.dataStyle.topWidth"
      :height="props.dataStyle.topHeight"
      viewBox="0 0 71 71"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1524, -831)">
          <g id="可视化" transform="translate(-0.5, -1)">
            <g id="模块" transform="translate(46, 88)">
              <g id="标题模块--右侧1" transform="translate(1450, 684)">
                <g id="a" transform="translate(28.5, 60)">
                  <g id="编组-10" transform="translate(0.5, 0.5)">
                    <rect
                      id="矩形"
                      :stroke="props.dataStyle.rectStrokeColor"
                      :fill="props.dataStyle.rectFillColor"
                      x="0.5"
                      y="1"
                      width="69"
                      height="69"
                    ></rect>
                    <line
                      x1="2.10281963"
                      y1="2.60281963"
                      x2="67.5754289"
                      y2="68.0754289"
                      id="路径-3"
                      stroke="#3D4D3F"
                      opacity="0.299999982"
                    ></line>
                    <line
                      x1="2.10281963"
                      y1="2.49742212"
                      x2="68.8474931"
                      y2="69.2420956"
                      id="路径-3"
                      stroke="#3D4D3F"
                      opacity="0.299999982"
                      transform="translate(35.1054, 35.5) scale(1, -1) translate(-35.1054, -35.5)"
                    ></line>
                    <g id="装饰" transform="translate(0, 0)" :fill="props.dataStyle.gFillColor">
                      <rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
                      <rect
                        id="矩形备份-16"
                        transform="translate(2.25, 6.25) rotate(90) translate(-2.25, -6.25)"
                        x="-3.75"
                        y="4"
                        width="12"
                        height="4.5"
                      ></rect>
                    </g>
                    <g
                      id="装饰"
                      transform="translate(64.025, 64.125) scale(-1, -1) translate(-64.025, -64.125)translate(58, 58)"
                      :fill="props.dataStyle.gFillColor"
                    >
                      <rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
                      <rect
                        id="矩形备份-16"
                        transform="translate(2.25, 6.25) rotate(90) translate(-2.25, -6.25)"
                        x="-3.75"
                        y="4"
                        width="12"
                        height="4.5"
                      ></rect>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <image
        :x="props.dataStyle.iconX"
        :y="props.dataStyle.iconY"
        :width="props.dataStyle.iconSize"
        :height="props.dataStyle.iconSize"
        :href="`/src/assets/images/chart/zhigan/component/WuRenJiFeiXingShuJu${props.item.icon}.png`"
      />
    </svg>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps(['item', 'dataStyle']);
</script>

<style lang="scss" scoped>
  .icon01 {
    position: absolute;
    top: 0px;
  }
</style>
