123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887 |
- <template>
- <div class="home">
- <timeing></timeing>
- <p class="backtitle">居家老年人巡视关爱探访平台</p>
- <div class="left">
- <!-- 左一 -->
- <div class="p1 bj">
- <div class="p1title bj">
- <router-link to="/home/oldStatistics">
- <p>老年人信息统计</p>
- </router-link>
- </div>
- <div class="p1chart bj">
- <com1 ref="c1"></com1>
- </div>
- </div>
- <!-- 左二 -->
- <div class="p2 bj">
- <!-- <div class="p2title bj">-->
- <!-- <router-link to="/home/EnterpriseInformation">-->
- <!-- <p>巡访员信息统计</p>-->
- <!-- </router-link>-->
- <!-- <span :class="isTure ? 'kaung1': 'kaung2' " style="margin-left: 10px" @click="right1">个人探访数据</span>-->
- <!-- <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>-->
- <!-- </div>-->
- <div class="p2title bj">
- <p>
- <router-link to="/home/PatrolmanStatistics">
- <span>巡访员信息统计</span>
- </router-link>
- <span :class="isleftbtnTure1 ? 'left-kaung3': 'left-selectkaung3' " style="margin-right: 10px"
- @click="left2">性别</span>
- <span :class="isleftbtnTure ? 'left-selectkaung': 'left-kaung' " style="margin-right: 10px"
- @click="left1">认证数据</span>
- </p>
- </div>
- <div class="p2chart bj">
- <!-- <div class="p2legend">-->
- <!-- <span class="span2">群众</span>-->
- <!-- <img src="../assets/index/lv.png"/>-->
- <!-- <span class="span2">党员</span>-->
- <!-- <img src="../assets/index/huang.png"/>-->
- <!-- </div>-->
- <com2 ref="c2"></com2>
- </div>
- </div>
- <!-- 左三 -->
- <div class="p3 bj">
- <div class="p3title bj">
- <p>采集巡访数据统计</p>
- </div>
- <div class="p3chart bj">
- <!-- <div class="p3legend">-->
- <!-- <span class="span1">巡访数据</span>-->
- <!-- <img src="../assets/index/huang.png"/>-->
- <!-- <span class="span2">采集数据</span>-->
- <!-- <img src="../assets/index/lan.png"/>-->
- <!-- </div>-->
- <com3 ref="c3"></com3>
- </div>
- </div>
- </div>
- <!-- 中间部分 -->
- <div class="center">
- <!-- 中间部分上方数据 -->
- <div class="topdatabox">
- <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
- <el-col :span="5">老年人信息(人)</el-col>
- <el-col :span="5">认证巡访员(人)</el-col>
- <el-col :span="4">累计巡访量(次)</el-col>
- <el-col :span="5">累计积分(分)</el-col>
- <el-col :span="5">今日探访(次)</el-col>
- </el-row>
- </div>
- <div class="topdatabox2">
- <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
- <el-col :span="5">
- <span>
- <span class="num">{{count1}}</span> <!--老年人信息(人)-->
- </span>
- </el-col>
- <el-col :span="5">
- <span>
- <span class="num">{{count2}}</span> <!--认证巡访员(人)-->
- </span>
- </el-col>
- <el-col :span="4">
- <span>
- <span class="num">{{count3}}</span> <!--累计巡访量(次)-->
- </span>
- </el-col>
- <el-col :span="5">
- <span>
- <span class="num">{{count4}}</span> <!--累计积分(分)-->
- </span>
- </el-col>
- <el-col :span="5">
- <span>
- <span class="num">{{count5}}</span> <!--今日探访(次)-->
- </span>
- </el-col>
- </el-row>
- </div>
- <!-- 地图组件 -->
- <div class="mapbox">
- <img src="../assets/index/dq.gif" class="aa"/>
- <img src="../assets/index/diqiu.png" class="bb"/>
- <jlMap :data1="mapDataArr" :data2="mapprodata"></jlMap>
- </div>
- </div>
- <div class="right">
- <!-- 右一 -->
- <div class="p4 bj">
- <div class="p4title bj">
- <router-link to="/home/Ranking">
- <p>当月探访数据排行榜</p>
- </router-link>
- <span :class="isTure ? 'kaung1': 'kaung2' " style="margin-left: 10px" @click="right1">个人探访数据</span>
- <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>
- </div>
- <div class="p4chart bj">
- <com4></com4>
- </div>
- </div>
- <!-- 右二 -->
- <div class="p5 bj">
- <div class="p5title bj">
- <p>运营分析</p>
- </div>
- <div class="p5chart">
- <com5 ref="c5"></com5>
- </div>
- </div>
- <!-- 右三 -->
- <div class="p6 bj">
- <div class="p6title bj">
- <p>实时信息</p>
- </div>
- <vueSeamlessScroll :data="listData" class="seamless-warp">
- <ul class="item" style="height:100%">
- <li v-for="(item, index) in listData" :key="index">
- <el-row
- style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff"
- type="flex"
- justify="center"
- align="middle"
- :class="{'sc0': index%2==0}"
- >
- <!-- <el-col :span="4" class="col4">-->
- <!-- <el-image class="img" :src="scrollTextisColor(index)"></el-image>-->
- <!-- </el-col>-->
- <el-col :span="4">{{item.date}}</el-col>
- <el-col :span="4">{{item.time}}</el-col>
- <!-- <el-col :span="4">
- <img src="../assets/index/block.png" alt />
- </el-col>-->
- <el-col :span="12">{{item.address}}</el-col>
- </el-row>
- </li>
- </ul>
- </vueSeamlessScroll>
- </div>
- </div>
- </div>
- </template>
- <script>
- import jlMap from "../components/index/jlMap.vue";
- import com1 from "../components/index/1.vue";
- import com2 from "../components/index/2.vue";
- import com3 from "../components/index/3.vue";
- import com4 from "../components/index/4.vue";
- import com5 from "../components/index/5.vue";
- import vueSeamlessScroll from "vue-seamless-scroll";
- import {
- selectUserByAuth,
- oldPersonSelectDeptValue,
- oldnum,
- visitnum
- } from "../api";
- export default {
- name: "Home",
- components: {com1, com2, com3, com4, com5, jlMap, vueSeamlessScroll},
- data() {
- return {
- count1: 0, //老年人信息(人)
- count2: 0, //认证巡访员(人)
- count3: 0, //累计巡访量(次)
- count4: 0, //累计积分(分)
- count5: 0, //今日探访(次)
- month: "",
- isTure: true,
- isleftbtnTure: true,
- isleftbtnTure1: true,
- isleftbtnTure2: true,
- isTure2: false,
- num: 0,
- zhuce: 0,
- maptopResult: {},
- // 右三实时对接数据
- listData: [
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- }, {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- },
- {
- date:'06-09',
- time:'08:17',
- address:'长春市朝阳区老人张翠芳探访',
- }
- ],
- step: 20, // 数值越大速度滚动越快
- limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
- hoverStop: true, // 是否开启鼠标悬停stop
- direction: 0, // 0向下 1向上 2向左 3向右
- openWatch: true, // 开启数据实时监控刷新dom
- singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
- singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
- waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
- mapdata: [],
- mapdata1: [],
- mapprodata: [],
- data4: [],
- mapDataArr: [],
- mapDide: {
- //长春
- cc: [
- [125.35, 43.88],
- [125.35, 44.58],
- [126.35, 44.88],
- [125.85, 44.11],
- [125.85, 44.55]
- ],
- //四平
- sp: [
- [124.8, 43.47],
- [123.8, 43.77],
- [124.5, 43.87],
- [124.3, 43.47],
- [124.88, 43.77]
- ],
- // 辽源市
- ly: [
- [125.13, 42.88],
- [125.38, 42.9],
- [125.5, 43],
- [125.5, 42.6],
- [125.2, 42.6]
- ],
- // 吉林市
- jl: [
- [126.55, 43.83],
- [126.88, 43.99],
- [126.11, 43.11],
- [126.66, 43.33],
- [126.99, 43.66]
- ],
- //松原市
- sy: [
- [124.82, 45.11],
- [125.82, 45.11],
- [123.82, 44.66],
- [124.11, 44.33],
- [124.11, 45.11]
- ],
- // 白城市
- bc: [
- [122.84, 45.61],
- [123.33, 45.61],
- [122.84, 45.11],
- [123.33, 45.11],
- [122.66, 44.55]
- ],
- // //白山市
- bs: [
- [126.997839, 41.992505],
- [126.447839, 41.992505],
- [126.997839, 42.662505],
- [127.667839, 41.662505],
- [127.667839, 41.992505]
- ],
- // 通化市
- th: [
- [125.93, 41.73],
- [125.93, 41.11],
- [125.93, 42.11],
- [125.93, 42.55],
- [125.66, 42.11]
- ],
- // 延边朝鲜族自治州
- yb: [
- [129.5, 42.88],
- [128.5, 42.88],
- [128.5, 42.22],
- [128.5, 43.44],
- [129.5, 43.44]
- ]
- }
- };
- },
- mounted() {
- this.timer = setInterval(() => {
- this.mapsec();
- }, 60000);
- this.timer = setInterval(() => {
- this.ssdj();
- }, 60000);
- // this.fiveNum();
- this.count1_method();
- this.count2_method();
- this.count3_method();
- this.count4_method();
- this.count5_method();
- },
- methods: {
- async count1_method() {
- const result = await oldnum({}, 'POST');
- this.count1 = result.oldnum;
- },
- async count2_method() {
- const result = await selectUserByAuth({}, 'POST');
- this.count2 = result[0].count;
- },
- async count3_method() {
- const result = await visitnum({}, 'POST');
- this.count3 = result.visitnum;
- },
- async count4_method() {
- const result = await oldPersonSelectDeptValue({}, 'POST');
- this.count4 = result.totalValue;
- },
- async count5_method() {
- },
- // 右边第一个 地区探访数据 按钮
- right1() {
- this.isTure = false;
- },
- // 右边第二个
- right2() {
- this.isTure = true;
- },
- // 认证数据 按钮切换
- left1() {
- this.isleftbtnTure = true;
- this.isleftbtnTure2 = true;
- this.isleftbtnTure1 = true;
- this.$refs.c2.draw1();
- },
- // 性别 按钮切换
- left2() {
- this.isleftbtnTure1 = false;
- this.isleftbtnTure2 = true;
- this.isleftbtnTure = false;
- this.$refs.c2.draw2();
- },
- // // 地图上5个统计
- // async fiveNum() {
- // const response = await fiveNum();
- // this.maptopResult = response;
- // this.circledata0 = Number(((this.maptopResult.ljfknum / this.maptopResult.sqjenum) * 100).toFixed(0));
- // },
- // async mapsec() {
- // const response = await mapsec();
- // // console.log(response);
- // let data = [];
- // for (let arr in response) {
- // response[arr].forEach((item, index) => {
- // data.push({
- // ...item,
- // value: this.mapDide[arr][index].concat(parseInt(item.intllmoney)),
- // name: item.company_name
- // });
- // });
- // }
- // this.mapDataArr = data;
- // // }
- // },
- scrollTextisColor: function (i) {
- let inde = i % 3;
- //console.log(inde)
- if (inde === 0) {
- return require("../assets/index/red.png")
- } else if (inde === 1) {
- return require("../assets/index/lv.png")
- } else if (inde === 2) {
- return require("../assets/index/huang.png")
- }
- },
- },
- computed: {
- }
- };
- </script>
- <style scoped lang="less" type="text/css">
- .backtitle {
- background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- font-size: 32px;
- font-weight: 900;
- position: absolute;
- left: 40%;
- top: 1%;
- }
- .seamless-warp {
- width: 85%;
- margin-left: 5%;
- height: 80%;
- margin-top: 2%;
- overflow: hidden;
- }
- .home {
- height: 100%;
- position: fixed;
- width: 100%;
- background: url("../assets/index/bj.png");
- background-size: 100% 100%;
- display: flex;
- }
- .bj {
- width: 100%;
- }
- .left {
- width: 26%;
- height: 99%;
- position: relative;
- }
- .center {
- width: 48%;
- height: 99%;
- position: relative;
- }
- .right {
- width: 26%;
- height: 99%;
- position: relative;
- }
- .p1 {
- height: 36%;
- position: absolute;
- top: 0%;
- left: 0%;
- }
- .p2 {
- height: 30%;
- position: absolute;
- top: 36%;
- left: 0%;
- }
- .p3 {
- height: 32%;
- position: absolute;
- top: 66%;
- left: 0%;
- }
- .p4 {
- height: 29.7%;
- margin-top: 18%;
- padding-top: 17px;
- }
- .p5 {
- height: 29%;
- }
- .p6 {
- height: 26%;
- /*margin-top: 3%;*/
- padding-top: 10px
- }
- .p1title {
- height: 10%;
- color: #fff;
- position: absolute;
- top: 30%;
- left: 13%;
- font-size: 1.2em;
- }
- .p2title {
- height: 10%;
- position: absolute;
- left: 13%;
- top: 15%;
- font-size: 1.2em;
- color: #fff;
- width: 85%;
- /*height: 12%;*/
- /*color: #fff;*/
- /*position: relative;*/
- }
- .p3title {
- height: 16%;
- position: absolute;
- left: 13%;
- top: 13.5%;
- font-size: 1.2em;
- color: #fff;
- }
- .p1chart {
- height: 70%;
- position: absolute;
- top: 40%;
- left: 0%;
- }
- .p2chart {
- height: 80%;
- position: absolute;
- top: 35%;
- left: 0%;
- }
- .p1legend img {
- float: right;
- margin-right: 2%;
- }
- .p3chart {
- height: 80%;
- position: absolute;
- top: 30%;
- left: 0%;
- }
- .p4chart {
- height: 82%;
- }
- .p1legend {
- width: 95%;
- height: 10%;
- }
- .p2legend {
- width: 95%;
- height: 10%;
- }
- .p3legend {
- width: 95%;
- height: 10%;
- }
- .p4legend {
- width: 90%;
- height: 10%;
- }
- .p2legend img {
- float: right;
- margin-right: 2%;
- margin-top: 1%;
- }
- .p3legend img {
- float: right;
- margin-right: 2%;
- margin-top: 1%;
- }
- .p4legend img {
- float: right;
- margin-right: 2%;
- margin-top: 1%;
- }
- .p6title {
- height: 15%;
- position: relative;
- color: white;
- }
- .p6title p {
- position: absolute;
- bottom: 20%;
- left: 6%;
- font-size: 1.2em;
- }
- .p4title {
- height: 12%;
- color: #fff;
- position: relative;
- }
- .p5title {
- height: 18%;
- color: #fff;
- position: relative;
- font-size: 1.2em;
- }
- .p5title p {
- position: absolute;
- top: 20%;
- left: 6%;
- }
- .p4title p {
- position: absolute;
- bottom: 4%;
- left: 6%;
- font-size: 1.2em;
- }
- .p5chart {
- width: 100%;
- height: 84%;
- margin-left:4%;
- }
- .span1box {
- width: 85%;
- margin-left: 5%;
- height: 12%;
- border-bottom: 1px dashed #006273;
- }
- .progress .el-row {
- height: 25%;
- border-bottom: 1px dashed #006273;
- }
- .topdatabox {
- width: 100%;
- height: 5%;
- position: absolute;
- top: 13%;
- text-align: center;
- letter-spacing: 2px;
- color: white;
- }
- .topdatabox2 {
- width: 100%;
- height: 5%;
- position: absolute;
- top: 18%;
- text-align: center;
- color: #fff;
- font-size: 22px;
- }
- .num {
- font-size: 35px;
- font-family: AgencyFB;
- font-weight: normal;
- color: rgba(247, 255, 63, 1);
- }
- .dw {
- color: #ffc809;
- }
- .name {
- color: #fff;
- font-size: 25px;
- }
- .sc0 {
- background-color: #0d274c;
- }
- .span1 {
- float: right;
- color: #fff;
- font-size: 1em;
- /*font-size:13px;*/
- }
- .span2 {
- float: right;
- color: #fff;
- font-size: 1em;
- margin-right: 2%;
- }
- .p5box {
- width: 45%;
- height: 48%;
- margin-top: 2%;
- float: left;
- position: relative;
- top: -3%;
- }
- .aa {
- opacity: 0.1;
- width: 735px;
- height: 735px;
- position: absolute;
- top: 24%;
- left: 10%;
- }
- .bb {
- width: 735px;
- height: 735px;
- position: absolute;
- top: 24%;
- left: 10%;
- -webkit-animation: rotateImg 8s linear infinite;
- vertical-align: middle;
- }
- .bb {
- -webkit-animation: rotateImg 5s linear infinite;
- vertical-align: middle;
- }
- @keyframes rotateImg {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(-360deg);
- }
- }
- @-webkit-keyframes rotateImg {
- 0% {
- -webkit-transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(-360deg);
- }
- }
- .mapbox {
- width: 100%;
- height: 76%;
- margin-top: 25%;
- }
- .item {
- font-size: 16px;
- }
- .left-kaung {
- float: right;
- cursor: pointer;
- padding: 2px 5px;
- display: inline-block;
- background: url("../assets/index/leftkuang.png");
- font-size: 16px;
- }
- .left-selectkaung {
- float: right;
- cursor: pointer;
- padding: 2px 5px;
- display: inline-block;
- background: url("../assets/index/leftselectkuang.png");
- font-size: 16px;
- }
- .left-kaung2 {
- float: right;
- cursor: pointer;
- padding: 2px 5px;
- display: inline-block;
- background: url("../assets/index/leftkuang2.png");
- font-size: 16px;
- }
- .left-selectkaung2 {
- float: right;
- cursor: pointer;
- padding: 2px 5px;
- display: inline-block;
- font-size: 16px;
- background: url("../assets/index/leftselectkuang2.png");
- }
- .left-kaung3 {
- float: right;
- cursor: pointer;
- padding: 2px 5px;
- display: inline-block;
- background: url("../assets/index/leftkuang2.png");
- font-size: 16px;
- }
- .left-selectkaung3 {
- float: right;
- cursor: pointer;
- padding: 2px 5px;
- display: inline-block;
- font-size: 16px;
- background: url("../assets/index/leftselectkuang2.png");
- }
- .kaung1 {
- float: right;
- margin-top: 2%;
- cursor: pointer;
- padding: 2px 5px;
- display: inline-block;
- background: url("../assets/index/biankuang2.png");
- }
- .kaung2 {
- float: right;
- margin-top: 2%;
- background: url("../assets/index/biankuang1.png");
- padding: 2px 5px;
- display: inline-block;
- cursor: pointer;
- }
- </style>
|