feat:svg样式调整

shuishen

2025-11-10 35129b1dee77210d0a33883ad2e8fc8d525a694d

feat:svg样式调整

 src/views/home/components/rightContainer.vue

@@ -42,7 +42,8 @@
      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
        </use>
      </svg>
    </div> -->
@@ -52,22 +53,25 @@
        <div class="title">
          警情统计
          <div class="timer">
            <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="caseTimeChange"
              :picker-options="pickerOptions"></el-date-picker>
                        <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right"
                            unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            @change="caseTimeChange" :picker-options="pickerOptions"></el-date-picker>
          </div>
        </div>
        <el-main v-loading="eventChangeEchartsLoading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
          style="height: calc(100% - 17.6%);">
          <div class="sub-tab">
            <div class="tab" :class="{ 'select-on-tab': caseInfoType == 0 }" @click="initEventChangeEcharts(0)">
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 0 }"
                            @click="initEventChangeEcharts(0)">
              <div class="tab-title-small">警情变化趋势</div>
            </div>
            <div class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }" @click="initEventChangeEcharts(1)">
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }"
                            @click="initEventChangeEcharts(1)">
              <div class="tab-title-small">社区警情排行</div>
            </div>
            <div class="tab" :class="{ 'select-on-tab': caseInfoType == 2 }" @click="initEventChangeEcharts(2)">
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 2 }"
                            @click="initEventChangeEcharts(2)">
              <div class="tab-title-small">辖区警情排行</div>
            </div>
          </div>
@@ -78,7 +82,8 @@
      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
        </use>
      </svg>
    </div> -->
@@ -92,17 +97,11 @@
                </div>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="acttype == 0 ? underwayArr : historyArr"
                <el-table size="small" :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
@@ -111,7 +110,7 @@
            </div>
        </div>-->

    <!-- <div class="crowd-box" ref="crowdBox">
        <div class="crowd-box" ref="crowdBox">
      <div class="box">
        <div class="title">现有设备</div>
        <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
@@ -130,12 +129,66 @@
      </div>

      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
                <defs>
                    <path id="border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,2.58,0.63,2.04,3,3c0,1.005,0,1.995,0,3c0.67,0,1.33,0,2,0
c0.01,156.87,0.01,309.66,0,454.5c-1.43,1.17-4.01,4.155-5,6c-12,0-24,0-36,0c-2.67-4.995-5.33-10.005-8-15c-21,0-42,0-63,0
c-1.08,3.48-2.35,6.375-4,9c-0.67,0.495-1.33,1.005-2,1.5c-0.33,1.5-0.67,3-1,4.5c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
c-1.28-2.355-2.76-3.375-4-6c-0.33,0-0.67,0-1,0c0-13.005,0-25.995,0-39c0-29.49,0-59.01,0-88.5C0.27,240.06,0.27,120.03,0.27,0.045z" fill="transparent" />
                    <radialGradient id="border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-9-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.045c52.66,0,105.34,0,158,0c1.67,3,3.33,6,5,9c1,0.495,2,1.005,3,1.5c1.33,2.505,2.67,4.995,4,7.5
c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,2.58,0.63,2.04,3,3c0,1.005,0,1.995,0,3c0.67,0,1.33,0,2,0
c0.01,156.87,0.01,309.66,0,454.5c-1.43,1.17-4.01,4.155-5,6c-12,0-24,0-36,0c-2.67-4.995-5.33-10.005-8-15c-21,0-42,0-63,0
c-1.08,3.48-2.35,6.375-4,9c-0.67,0.495-1.33,1.005-2,1.5c-0.33,1.5-0.67,3-1,4.5c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
c-1.28-2.355-2.76-3.375-4-6c-0.33,0-0.67,0-1,0c0-13.005,0-25.995,0-39c0-29.49,0-59.01,0-88.5C0.27,240.06,0.27,120.03,0.27,0.045z"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
                </defs>

                <use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
        </use>
      </svg>
    </div> -->
        </div>

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <div class="title">现有设备</div>
                <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
                            <div class="tab-title-small">设备种类</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
                            <div class="tab-title-small">设备状态</div>
                        </div>
                    </div>
                    <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-9-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-9-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
  </div>
</template>