svg path changes

shuishen

2023-01-03 e5315e6d0bf6b01dfd503b62b6e0c61eed5e7e0f

svg path changes

 src/views/home/components/bottomContainer.vue

@@ -1,5 +1,6 @@
<template>
    <div class="container">
        <div class="box">
        <div class="header">
            <div class="bottom-title">警情动态</div>
            <div class="timeTab" v-show="historytype">
@@ -8,11 +9,14 @@
            </div>
            <div class="timeSeclect" v-show="historytype">
                <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                        start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
            </div>
            <div class="history-tab">
                <span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span>
                <span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span>
                    <span class="beforetime" :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)">实时</span>
                    <span class="beforetime" :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)">历史</span>
            </div>

        </div>
@@ -50,6 +54,36 @@
                </ul>
            </vue-seamless-scroll>
        </div>
        </div>

        <svg class="border-svg">
            <defs>
                <path id="bottom-box-path" d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent">
                </path>
                <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
                </radialGradient>
                <mask id="border-box-mask">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
                        <animateMotion dur="8s" path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite"></animateMotion>
                    </circle>
                </mask>
            </defs>

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

@@ -242,6 +276,15 @@
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }

    .header {
        position: relative;
        width: 100%;
@@ -399,5 +442,15 @@
            }
        }
    }


    .border-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}
</style>

 src/views/home/components/leftContainer.vue

@@ -1,6 +1,7 @@
<template>
    <div class="container">
        <div class="person-box" style="position: relative;">
            <div class="box">
            <div class="title">
                <div class="title-tab">
                    <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/
@@ -28,6 +29,7 @@
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
            </div>

            <svg class="border-svg">
                <defs>
@@ -56,9 +58,8 @@
                        </circle>
                    </mask>
                </defs>
                <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7">
                </use>
                <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"

                <use stroke-width="4" 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">
@@ -67,6 +68,7 @@
            </svg>
        </div>
        <div class="house-box" style="position: relative;">
            <div class="box">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
@@ -79,6 +81,7 @@
                </div>
            </div>
            <div id="houseEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
                <defs>
@@ -107,9 +110,8 @@
                        </circle>
                    </mask>
                </defs>
                <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7">
                </use>
                <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"

                <use stroke-width="4" 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">
@@ -118,6 +120,7 @@
            </svg>
        </div>
        <div class="land-box" style="position: relative;">
            <div class="box">
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
@@ -130,6 +133,7 @@
                </div>
            </div>
            <div id="landEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
                <defs>
@@ -158,9 +162,8 @@
                        </circle>
                    </mask>
                </defs>
                <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7">
                </use>
                <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"

                <use stroke-width="4" 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">
@@ -1046,6 +1049,18 @@
        background-size: 100% 100%;
        background-repeat: no-repeat;


        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            padding: 0 18px 0 18px;
            position: relative;
@@ -1152,7 +1167,7 @@
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    z-index: 1;
}

.mypath {

 src/views/home/components/rightContainer.vue

@@ -1,6 +1,7 @@
<template>
    <div class="container" ref="Container">
        <div class="case-box" ref="caseBox">
            <div class="box">
            <div class="title" ref="alertBoxTitle">
                <div>值班信息(当日)</div>
            </div>
@@ -13,6 +14,7 @@
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="contact" label="联系方式"></el-table-column>
                </el-table>
                </div>
            </div>

            <svg class="border-svg">
@@ -54,15 +56,17 @@
        </div>

        <div class="alert-box" ref="alertBox ">
            <div class="box">
            <div class="title">
                案件统计
                <div class="timer">
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期"
                        <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </div>
            </div>
            <div id="EventChangeEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
                <defs>
@@ -131,6 +135,7 @@
        </div>-->

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
            <div class="title">
                <div>现有设备</div>
                <div class="title-tab">
@@ -139,6 +144,7 @@
                </div>
            </div>
            <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
                <defs>
@@ -782,6 +788,17 @@
        //     margin-left: 8px;
        // }

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            display: flex;
            justify-content: space-between;
@@ -887,7 +904,7 @@
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        z-index: 1;
    }
}
</style>

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-03 10:02:49
 * @LastEditTime: 2023-01-03 11:18:43
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *