liumin
/
zkPCproject
0
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
318 Revīzijas
4 Atzari
45 MiB
 
 
 
Koks: 34662dcd0e
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no '34662dcd0e'
${ noResults }
zkPCproject/src/views/Statistics/dataScreeSys.vue

1482 rindas
41 KiB
Neapstrādāts Vainot Vēsture 

  1. <template>

  2.   <div class="box-center">

  3.     <!-- 头 -->

  4.     <div class="app-top">

  5.       <div class="app-titel" style="margin-left: 15px">

  6.         <el-select

  7.           v-model="houseTypes"

  8.           @change="sysChange"

  9.           style="width: 100px; margin-right: 10px"

  10.           placeholder="请选择"

  11.         >

  12.           <el-option

  13.             v-for="item in options2"

  14.             :key="item.value"

  15.             :label="item.label"

  16.             :value="item.value"

  17.           >

  18.           </el-option>

  19.         </el-select>

  20.         <el-select

  21.           v-model="selValue"

  22.           @change="selChange"

  23.           style="width: 100px"

  24.           placeholder="请选择"

  25.         >

  26.           <el-option

  27.             v-for="item in options"

  28.             :key="item.value"

  29.             :label="item.label"

  30.             :value="item.value"

  31.           >

  32.           </el-option>

  33.         </el-select>

  34.         <div style="margin-left: 26px" v-if="selValue == 1 || operaFlag">

  35.           <el-select

  36.             v-model="choicValue"

  37.             @change="valuechange"

  38.             placeholder="默认为全部"

  39.             filterable

  40.             clearable

  41.           >

  42.             <el-option

  43.               v-for="item in houseList"

  44.               :key="item.orgCode"

  45.               :label="item.name"

  46.               :value="item.orgCode"

  47.             >

  48.             </el-option>

  49.           </el-select>

  50.         </div>

  51.         <div style="margin-left: 26px" v-if="selValue == 0 || operaFlag">

  52.           <el-select

  53.             v-model="choicValue"

  54.             @change="valuechange"

  55.             clearable

  56.             filterable

  57.             placeholder="默认为全部"

  58.           >

  59.             <el-option

  60.               v-for="item in houseList"

  61.               :key="item.id"

  62.               :label="item.agentName"

  63.               :value="item.id"

  64.             >

  65.             </el-option>

  66.           </el-select>

  67.         </div>

  68.       </div>

  69.     </div>

  70. 

  71.     <!-- 二 -->

  72.     <div class="app-box-er">

  73.       <div class="container">

  74.         <div v-if="agentissow" class="grid-content">

  75.           <div class="text1">代理商数</div>

  76.           <div class="text2">{{ firstTab.agentQuantity || 0 }}</div>

  77.         </div>

  78.         <div v-if="agentissow" class="grid-content">

  79.           <div class="text1">服务期内代理商数</div>

  80.           <div class="text2">{{ firstTab.agentQofEnough || 0 }}</div>

  81.         </div>

  82.         <div v-if="agentissow" class="grid-content">

  83.           <div class="text1">过期代理商数</div>

  84.           <div class="text2">

  85.             {{ firstTab.agentQofUnenough || 0 }}

  86.           </div>

  87.         </div>

  88. 

  89.         <div class="grid-content">

  90.           <div class="text1">楼盘总数</div>

  91.           <div class="text2">{{ firstTab.houseQuantity || 0 }}</div>

  92.         </div>

  93.         <div class="grid-content">

  94.           <div class="text1">服务期内楼盘总数</div>

  95.           <div class="text2">{{ firstTab.houseQofEnough || 0 }}</div>

  96.         </div>

  97.         <div class="grid-content">

  98.           <div class="text1">试用楼盘数</div>

  99.           <div class="text2">{{ firstTab.houseQuantityOfTryOut || 0 }}</div>

  100.         </div>

  101.         <div class="grid-content">

  102.           <div class="text1">过期楼盘数</div>

  103.           <div class="text2">{{ firstTab.houseQofUnenough || 0 }}</div>

  104.         </div>

  105.         <div class="grid-content">

  106.           <div class="text1">设备总数</div>

  107.           <div class="text2">{{ firstTab.equipmentQuantity || 0 }}</div>

  108.         </div>

  109.         <div class="grid-content">

  110.           <div class="text1">已售设备数</div>

  111.           <div class="text2">{{ firstTab.equipmentQuantityWithSold || 0 }}</div>

  112.         </div>

  113.         <div class="grid-content">

  114.           <div class="text1">待售设备数</div>

  115.           <div class="text2">

  116.             {{ firstTab.equipmentQuantityWithNotSold || 0 }}

  117.           </div>

  118.         </div>

  119. 

  120.         <!-- <div class="grid-content">

  121.           <div class="text1">待验收设备数</div>

  122.           <div class="text2">

  123.             {{ firstTab.equipmentQuantityWithNotAccept || 0 }}

  124.           </div>

  125.         </div>

  126.         <div class="grid-content">

  127.           <div class="text1">已报废设备数</div>

  128.           <div class="text2">{{ firstTab.damageEquipmentQuantity || 0 }}</div>

  129.         </div>

  130.         <div class="grid-content">

  131.           <div class="text1">正常设备数</div>

  132.           <div class="text2">{{ firstTab.normalequipmentQuantity || 0 }}</div>

  133.         </div> -->

  134. 

  135.         <div class="grid-content">

  136.           <div class="text1">用户数</div>

  137.           <div class="text2">{{ firstTab.userQuantity || 0 }}</div>

  138.         </div>

  139.         <div class="grid-content">

  140.           <div class="text1">顾问数</div>

  141.           <div class="text2">{{ firstTab.accountQuantity || 0 }}</div>

  142.         </div>

  143.         <div class="grid-content">

  144.           <div class="text1">接待量</div>

  145.           <div class="text2">{{ firstTab.receptionQuantity || 0 }}</div>

  146.         </div>

  147.         <div class="grid-content">

  148.           <div class="text1">接待客户</div>

  149.           <div class="text2">

  150.             {{ firstTab.customerQuantity || 0 }}

  151.           </div>

  152.         </div>

  153.         <div class="grid-content">

  154.           <div class="text1">接待时长(小时)</div>

  155.           <div class="text2">

  156.             {{ Math.floor(firstTab.receptionTime / 60) || 0 }}

  157.           </div>

  158.         </div>

  159.         <div class="grid-content">

  160.           <div class="text1">平均接待时长(分钟)</div>

  161.           <div class="text2">{{ firstTab.receptionTimeWithAvg || 0 }}</div>

  162.         </div>

  163.       </div>

  164.       <!-- <div id="main"></div> -->

  165.     </div>

  166. 

  167.     <div class="app-box-er">

  168.       <div class="app_titile" style="margin-bottom: 10px">

  169.         <div style="line-height: 40px; font-weight: bold">时段统计</div>

  170.         <div>

  171.           <div class="app-titel">

  172.             <div class="toptimeqhuan">

  173.               <div :class="{ tophove: dateType1 == 1 }" @click="tabtimetap1(1)">

  174.                 近7天

  175.               </div>

  176.               <div :class="{ tophove: dateType1 == 3 }" @click="tabtimetap1(3)">

  177.                 近15天

  178.               </div>

  179.               <div :class="{ tophove: dateType1 == 2 }" @click="tabtimetap1(2)">

  180.                 近30天

  181.               </div>

  182.             </div>

  183.             <div style="margin-left: 26px">

  184.               <el-date-picker

  185.                 @change="confirmtime1()"

  186.                 v-model="customtime1"

  187.                 type="daterange"

  188.                 range-separator="-"

  189.                 :default-time="['00:00:00', '23:59:59']"

  190.                 value-format="yyyy-MM-dd"

  191.                 start-placeholder="开始日期"

  192.                 end-placeholder="结束日期"

  193.                 :picker-options="pickerOptions"

  194.               >

  195.               </el-date-picker>

  196.             </div>

  197.             <el-select

  198.               v-model="echarValue1"

  199.               style="width: 100px; margin-left: 10px"

  200.               placeholder="请选择"

  201.             >

  202.               <el-option

  203.                 v-for="item in options1"

  204.                 :key="item.value"

  205.                 :label="item.label"

  206.                 :value="item.value"

  207.               >

  208.               </el-option>

  209.             </el-select>

  210.           </div>

  211.         </div>

  212.       </div>

  213. 

  214.       <div class="container" v-if="echarValue1 == 0">

  215.         <div

  216.           class="grid-content"

  217.           style="cursor: pointer"

  218.           @click="secondChange('1')"

  219.         >

  220.           <div class="text1" :class="{ tophovese: secindex == 1 }">接待量</div>

  221.           <div class="text2" :class="{ tophovese: secindex == 1 }">

  222.             {{ secondTab.receptionQuantityInToday || 0 }}

  223.           </div>

  224.         </div>

  225.         <div

  226.           class="grid-content"

  227.           style="cursor: pointer"

  228.           @click="secondChange('2')"

  229.         >

  230.           <div class="text1" :class="{ tophovese: secindex == 2 }">

  231.             活跃用户

  232.           </div>

  233.           <div class="text2" :class="{ tophovese: secindex == 2 }">

  234.             {{ secondTab.activeUserQuantity || 0 }}

  235.           </div>

  236.         </div>

  237.         <div

  238.           class="grid-content"

  239.           style="cursor: pointer"

  240.           @click="secondChange('3')"

  241.         >

  242.           <div class="text1" :class="{ tophovese: secindex == 3 }">

  243.             活跃设备

  244.           </div>

  245.           <div class="text2" :class="{ tophovese: secindex == 3 }">

  246.             {{ secondTab.activeEquipmentQuantity || 0 }}

  247.           </div>

  248.         </div>

  249.       </div>

  250.       <div v-if="echarValue1 == 0" id="main"></div>

  251.       <div v-if="echarValue1 == 1">

  252.         <el-table :data="echarList1" stripe style="width: 100%">

  253.           <!-- <el-table-column type="index" label="序号" width="50">

  254.         </el-table-column> -->

  255.           <el-table-column prop="time" label="时间" align="center">

  256.           </el-table-column>

  257.           <el-table-column

  258.             prop="receptionQuantityInToday"

  259.             label="接待量"

  260.             align="center"

  261.           >

  262.           </el-table-column>

  263. 

  264.           <el-table-column

  265.             prop="activeUserQuantity"

  266.             label="活跃用户"

  267.             align="center"

  268.           >

  269.           </el-table-column>

  270. 

  271.           <el-table-column

  272.             prop="activeEquipmentQuantity"

  273.             label="活跃设备"

  274.             align="center"

  275.           >

  276.           </el-table-column>

  277.           <!--  scope -->

  278.           <el-table-column label="操作" align="center">

  279.             <template slot-scope="{ row }">

  280.               <el-button type="text" @click="goDetail(row)">查看详情</el-button>

  281.             </template>

  282.           </el-table-column>

  283.         </el-table>

  284.       </div>

  285.     </div>

  286. 

  287.     <div class="app-box-er">

  288.       <div class="app_titile" style="margin-bottom: 10px">

  289.         <div style="line-height: 30px; font-weight: bold">整体看板</div>

  290.         <div>

  291.           <div class="app-titel">

  292.             <div class="toptimeqhuan">

  293.               <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">

  294.                 近7天

  295.               </div>

  296.               <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">

  297.                 近15天

  298.               </div>

  299.               <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">

  300.                 近30天

  301.               </div>

  302.             </div>

  303.             <div style="margin-left: 26px">

  304.               <el-date-picker

  305.                 @change="confirmtime()"

  306.                 v-model="customtime"

  307.                 type="daterange"

  308.                 range-separator="-"

  309.                 :default-time="['00:00:00', '23:59:59']"

  310.                 value-format="yyyy-MM-dd"

  311.                 start-placeholder="开始日期"

  312.                 end-placeholder="结束日期"

  313.                 :picker-options="pickerOptions"

  314.               >

  315.               </el-date-picker>

  316.             </div>

  317.             <el-select

  318.               v-model="echarValue"

  319.               style="width: 100px; margin-left: 10px"

  320.               placeholder="请选择"

  321.               @change="echarChange"

  322.             >

  323.               <el-option

  324.                 v-for="item in options1"

  325.                 :key="item.value"

  326.                 :label="item.label"

  327.                 :value="item.value"

  328.               >

  329.               </el-option>

  330.             </el-select>

  331.           </div>

  332.         </div>

  333.       </div>

  334.       <div class="container" v-if="echarValue == 0">

  335.         <div

  336.           class="grid-content"

  337.           style="cursor: pointer"

  338.           @click="Overviewxlick('1')"

  339.         >

  340.           <div class="text1" :class="{ tophovese: cardindex == 1 }">

  341.             购买服务楼盘数

  342.           </div>

  343.           <div

  344.             class="text2"

  345.             style="cursor: pointer"

  346.             :class="{ tophovese: cardindex == 1 }"

  347.           >

  348.             {{ thirdTab.houseQuantity || 0 }}

  349.           </div>

  350.         </div>

  351.         <!-- <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('2')">

  352.           <div class="text1" :class="{ tophovese: cardindex == 2 }">

  353.             服务期内楼盘数

  354.           </div>

  355.           <div class="text2" :class="{ tophovese: cardindex == 2 }">

  356.             {{ thirdTab.houseQofEnough || 0 }}

  357.           </div>

  358.         </div> -->

  359.         <!-- <div class="grid-content" @click="Overviewxlick('3')">

  360.           <div class="text1" :class="{ tophovese: cardindex == 3 }">

  361.             销售设备数

  362.           </div>

  363.           <div class="text2" :class="{ tophovese: cardindex == 3 }">

  364.             {{ thirdTab.avgDuration || 0 }}

  365.           </div>

  366.         </div> -->

  367.         <div

  368.           class="grid-content"

  369.           style="cursor: pointer"

  370.           @click="Overviewxlick('4')"

  371.         >

  372.           <div class="text1" :class="{ tophovese: cardindex == 4 }">

  373.             活跃用户数

  374.           </div>

  375.           <div class="text2" :class="{ tophovese: cardindex == 4 }">

  376.             {{ thirdTab.activeUserQuantity || 0 }}

  377.           </div>

  378.         </div>

  379.         <div

  380.           class="grid-content"

  381.           style="cursor: pointer"

  382.           @click="Overviewxlick('5')"

  383.         >

  384.           <div class="text1" :class="{ tophovese: cardindex == 5 }">

  385.             新增用户数

  386.           </div>

  387.           <div class="text2" :class="{ tophovese: cardindex == 5 }">

  388.             {{ thirdTab.userCountWithNewJoin || 0 }}

  389.           </div>

  390.         </div>

  391.         <div

  392.           class="grid-content"

  393.           style="cursor: pointer"

  394.           @click="Overviewxlick('6')"

  395.         >

  396.           <div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>

  397.           <div class="text2" :class="{ tophovese: cardindex == 6 }">

  398.             {{ thirdTab.receptionQuantity || 0 }}

  399.           </div>

  400.         </div>

  401.         <div

  402.           class="grid-content"

  403.           style="cursor: pointer"

  404.           @click="Overviewxlick('7')"

  405.         >

  406.           <div class="text1" :class="{ tophovese: cardindex == 7 }">

  407.             平均接待时长

  408.           </div>

  409.           <div class="text2" :class="{ tophovese: cardindex == 7 }">

  410.             {{ thirdTab.receptionTimeWithAvg || 0 }}

  411.           </div>

  412.         </div>

  413.         <div

  414.           class="grid-content"

  415.           style="cursor: pointer"

  416.           @click="Overviewxlick('8')"

  417.         >

  418.           <div class="text1" :class="{ tophovese: cardindex == 8 }">

  419.             活跃设备数

  420.           </div>

  421.           <div class="text2" :class="{ tophovese: cardindex == 8 }">

  422.             {{ thirdTab.activeEquipmentQuantity || 0 }}

  423.           </div>

  424.         </div>

  425.         <div

  426.           class="grid-content"

  427.           style="cursor: pointer"

  428.           @click="Overviewxlick('9')"

  429.         >

  430.           <div class="text1" :class="{ tophovese: cardindex == 9 }">

  431.             销售设备数

  432.           </div>

  433.           <div class="text2" :class="{ tophovese: cardindex == 9 }">

  434.             {{ thirdTab.buyEquipQuantity || 0 }}

  435.           </div>

  436.         </div>

  437.       </div>

  438. 

  439.       <div v-if="echarValue == 0" id="echar2"></div>

  440.       <div v-if="echarValue == 1">

  441.         <el-table :data="echarList" stripe style="width: 100%">

  442.           <!-- <el-table-column type="index" label="序号" width="50">

  443.         </el-table-column> -->

  444.           <el-table-column prop="date" label="日期" align="center">

  445.           </el-table-column>

  446.           <el-table-column

  447.             prop="buyHouseQuantity"

  448.             label="购买服务楼盘数"

  449.             align="center"

  450.           >

  451.             <template slot-scope="{ row }">

  452.               <span

  453.                 @click="goDetail1(row, '购买服务楼盘数', 0)"

  454.                 style="cursor: pointer"

  455.                 >{{ row.buyHouseQuantity || 0 }}</span

  456.               >

  457.             </template>

  458.           </el-table-column>

  459.           <el-table-column

  460.             prop="activeUserQuantity"

  461.             label="活跃用户数"

  462.             align="center"

  463.           >

  464.             <template slot-scope="{ row }">

  465.               <span

  466.                 @click="goDetail1(row, '活跃用户数', 1)"

  467.                 style="cursor: pointer"

  468.                 >{{ row.activeUserQuantity }}</span

  469.               >

  470.             </template>

  471.           </el-table-column>

  472.           <el-table-column

  473.             prop="newJoinUserQuantity"

  474.             label="新增用户数"

  475.             align="center"

  476.           >

  477.             <template slot-scope="{ row }">

  478.               <span

  479.                 @click="goDetail1(row, '新增用户数', 2)"

  480.                 style="cursor: pointer"

  481.                 >{{ row.newJoinUserQuantity || 0 }}</span

  482.               >

  483.             </template>

  484.           </el-table-column>

  485.           <el-table-column

  486.             prop="receptionQuantity"

  487.             label="接待量"

  488.             align="center"

  489.           >

  490.             <template slot-scope="{ row }">

  491.               <span

  492.                 @click="goDetail1(row, '接待量', 3)"

  493.                 style="cursor: pointer"

  494.                 >{{ row.receptionQuantity || 0 }}</span

  495.               >

  496.             </template>

  497.           </el-table-column>

  498.           <el-table-column

  499.             prop="avgReceptionTime"

  500.             label="平均接待时长"

  501.             align="center"

  502.           >

  503.             <template slot-scope="{ row }">

  504.               <span

  505.                 @click="goDetail1(row, '平均接待时长', 4)"

  506.                 style="cursor: pointer"

  507.                 >{{ row.avgReceptionTime || 0 }}</span

  508.               >

  509.             </template>

  510.           </el-table-column>

  511.           <el-table-column

  512.             prop="activeEquipmentQuantity"

  513.             label="活跃设备数"

  514.             align="center"

  515.           >

  516.             <template slot-scope="{ row }">

  517.               <span

  518.                 @click="goDetail1(row, '活跃设备数', 5)"

  519.                 style="cursor: pointer"

  520.                 >{{ row.activeEquipmentQuantity || 0 }}</span

  521.               >

  522.             </template>

  523.           </el-table-column>

  524.           <el-table-column

  525.             prop="buyEquipQuantity"

  526.             label="销售设备数"

  527.             align="center"

  528.           >

  529.             <template slot-scope="{ row }">

  530.               <span

  531.                 @click="goDetail1(row, '销售设备数', 6)"

  532.                 style="cursor: pointer"

  533.                 >{{ row.buyEquipQuantity || 0 }}</span

  534.               >

  535.             </template>

  536.           </el-table-column>

  537.         </el-table>

  538.         <div style="display: flex; justify-content: flex-end; margin-top: 10px">

  539.           <el-pagination

  540.             @size-change="handleSizeChange1"

  541.             @current-change="handleCurrentChange1"

  542.             :current-page="currentPage1"

  543.             :page-sizes="[10, 30, 50]"

  544.             :page-size="size1"

  545.             layout="total, sizes, prev, pager, next, jumper"

  546.             :total="total1"

  547.           >

  548.           </el-pagination>

  549.         </div>

  550.       </div>

  551.     </div>

  552.     <el-dialog :title="elTitle" :visible.sync="dialogVisible">

  553.       <div class="cen-tab">

  554.         <div style="font-size: 20px">{{ timeStr }}</div>

  555.         <el-table :data="detailList" stripe style="width: 100%">

  556.           <el-table-column

  557.             v-if="visible1"

  558.             prop="houseName"

  559.             label="楼盘"

  560.             align="center"

  561.           >

  562.           </el-table-column>

  563.           <el-table-column

  564.             v-if="visible1"

  565.             prop="receptionQuantity"

  566.             label="接待量"

  567.             align="center"

  568.           >

  569.           </el-table-column>

  570. 

  571.           <el-table-column

  572.             v-if="visible5"

  573.             prop="imei"

  574.             label="设备编号"

  575.             align="center"

  576.           >

  577.           </el-table-column>

  578.           <el-table-column

  579.             v-if="visible5"

  580.             prop="agentName"

  581.             label="代理商"

  582.             align="center"

  583.           >

  584.           </el-table-column>

  585.           <el-table-column

  586.             v-if="visible5"

  587.             prop="houseName"

  588.             label="公司"

  589.             align="center"

  590.           >

  591.           </el-table-column>

  592.           <el-table-column

  593.             v-if="visible5"

  594.             prop="orgName"

  595.             label="楼盘"

  596.             align="center"

  597.           >

  598.           </el-table-column>

  599.         </el-table>

  600.         <div style="display: flex; justify-content: flex-end; margin-top: 10px">

  601.           <el-pagination

  602.             @size-change="handleSizeChange"

  603.             @current-change="handleCurrentChange"

  604.             :current-page="currentPage"

  605.             :page-sizes="[10, 30, 50]"

  606.             :page-size="size"

  607.             layout="total, sizes, prev, pager, next, jumper"

  608.             :total="total"

  609.           >

  610.           </el-pagination>

  611.         </div>

  612.       </div>

  613.     </el-dialog>

  614.   </div>

  615. </template>

  616. 

  617. <script>

  618. import * as echarts from "echarts";

  619. import { getStore, setStore } from "@/util/store";

  620. export default {

  621.   data() {

  622.     return {

  623.       pickerOptions: {

  624.         disabledDate(time) {

  625.           //根据当前日期 --- 禁止选中之后的日期

  626.           // return time.getTime() > Date.now();

  627.         },

  628.       },

  629.       firstTab: {},

  630.       secondTab: {},

  631.       thirdTab: {},

  632.       selValue: "0",

  633.       houseTypes: "0,1",

  634.       operaFlag: true,

  635.       echarValue: "0",

  636.       echarValue1: "0",

  637.       choicValue: "",

  638.       detailList: [],

  639.       houseList: [],

  640.       secindex: "1",

  641.       dateType: 4,

  642.       currentPage: 1,

  643.       size: 10,

  644.       total: 10,

  645.       currentPage1: 1,

  646.       size1: 10,

  647.       total1: 10,

  648.       customtime: [],

  649.       cardindex: "1",

  650.       options: [

  651.         {

  652.           label: "代理商",

  653.           value: "0",

  654.         },

  655.         {

  656.           label: "公司",

  657.           value: "1",

  658.         },

  659.       ],

  660.       options1: [

  661.         {

  662.           label: "趋势图",

  663.           value: "0",

  664.         },

  665.         {

  666.           label: "表格",

  667.           value: "1",

  668.         },

  669.       ],

  670.       options2: [

  671.         {

  672.           label: "正式数据",

  673.           value: "0,1",

  674.         },

  675.         {

  676.           label: "测试数据",

  677.           value: "2,3",

  678.         },

  679.       ],

  680.       agentissow: true,

  681.       dateType1: 1,

  682.       customtime1: [],

  683.       echarList1: [],

  684.       echarList: [],

  685.       dialogVisible: false,

  686.       dialogVisible1: false,

  687.       visible1: false,

  688.       visible2: false,

  689.       visible3: false,

  690.       visible4: false,

  691.       visible5: false,

  692.       info: {},

  693.       elTitle: "",

  694.       timeStr: "",

  695.     };

  696.   },

  697.   mounted() {

  698.     // 获取用户信息

  699.     this.info = getStore({ name: "userInfo" });

  700.     // 当他系统后台时

  701.     if (localStorage.getItem("orgType") == 0 && this.info.userRoleType == 1) {

  702.       console.log("有全部");

  703.       this.options.push({

  704.         label: "全部",

  705.         value: "3",

  706.       });

  707.       this.selValue = "3";

  708.       this.agentissow = true;

  709.       this.operaFlag = false;

  710.     } else {

  711.       this.operaFlag = true;

  712.     }

  713.     this.getList();

  714.     // this.tabtimetap(4);

  715.   },

  716.   methods: {

  717.     goDetail1(row, str, idx) {

  718.       console.log(row);

  719.       this.dialogVisible = true;

  720.       this.timeStr = "";

  721.       this.elTitle = str;

  722.       this.detailList = [];

  723.       if (idx == 0) {

  724.       } else if (idx == 1) {

  725.         // this.visible1 = true;

  726.         // this.visible2 = false;

  727.         // this.visible3 = false;

  728.         // this.visible4 = false;

  729.         // this.visible5 = false;

  730.       } else if (idx == 2) {

  731.       } else if (idx == 3) {

  732.       } else if (idx == 4) {

  733.       } else if (idx == 5) {

  734.       } else if (idx == 6) {

  735.       this.visible1 = false;

  736.       this.visible2 = false;

  737.       this.visible3 = false;

  738.       this.visible4 = false;

  739.       this.visible5 = true;

  740.         this.buyEquipmentQuantity(row.date);

  741.       }

  742.     },

  743.     buyEquipmentQuantity(date) {

  744.       this.$api.api

  745.         .buyEquipmentQuantity({

  746.           agentId: this.selValue == 0 ? this.choicValue : null,

  747.           orgCode: this.selValue == 1 ? this.choicValue : null,

  748.           orgType: localStorage.getItem("orgType"),

  749.           startDate: date,

  750.           endDate: date,

  751.           dateType: null,

  752.           houseTypes: this.houseTypes,

  753.           current: this.currentPage,

  754.           size: this.size,

  755.         })

  756.         .then((res) => {

  757.           // console.log(res);

  758.           this.detailList = res.data.records;

  759.           this.total = res.data.total;

  760.         });

  761.     },

  762.     echarChange(e) {

  763.       if (e == 0) {

  764.         this.dataOverviewWithSystemWithLook();

  765.       } else {

  766.         //获取表格数据

  767.         this.dataOverviewWithSystemWithLookWithTable();

  768.       }

  769.     },

  770.     dataOverviewWithSystemWithLookWithTable() {

  771.       this.$api.api

  772.         .dataOverviewWithSystemWithLookWithTable({

  773.           agentId: this.selValue == 0 ? this.choicValue : null,

  774.           orgCode: this.selValue == 1 ? this.choicValue : null,

  775.           orgType: localStorage.getItem("orgType"),

  776.           startDate: this.dateType1 ? "" : this.customtime1[0],

  777.           endDate: this.dateType1 ? "" : this.customtime1[1],

  778.           dateType: this.dateType1,

  779.           houseTypes: this.houseTypes,

  780.           current: this.currentPage1,

  781.           size: this.size1,

  782.           // hour

  783.         })

  784.         .then((res) => {

  785.           // console.log(res);

  786.           this.echarList = res.data.records;

  787.           this.total1 = res.data.total;

  788.         });

  789.     },

  790.     handleSizeChange(val) {

  791.       console.log(`每页 ${val} 条`);

  792.       this.size = val;

  793.       // this.correctFindbypage();

  794.     },

  795.     handleCurrentChange(val) {

  796.       console.log(`当前页: ${val}`);

  797.       this.currentPage = val;

  798.       // this.correctFindbypage();

  799.     },

  800.     handleSizeChange1(val) {

  801.       console.log(`每页 ${val} 条`);

  802.       this.size1 = val;

  803.       // this.correctFindbypage();

  804.     },

  805.     handleCurrentChange1(val) {

  806.       console.log(`当前页: ${val}`);

  807.       this.currentPage1 = val;

  808.       // this.correctFindbypage();

  809.     },

  810.     goDetail(row) {

  811.       this.dialogVisible = true;

  812.       this.timeStr = row.time;

  813.       this.elTitle = "楼盘实时统计";

  814.       this.realTimeStatisticsOfTime(row.hour);

  815.       this.visible1 = true;

  816.       this.visible2 = false;

  817.       this.visible3 = false;

  818.       this.visible4 = false;

  819.     },

  820.     realTimeStatisticsOfTime(hour) {

  821.       this.$api.api

  822.         .realTimeStatisticsOfTime({

  823.           agentId: this.selValue == 0 ? this.choicValue : null,

  824.           orgCode: this.selValue == 1 ? this.choicValue : null,

  825.           orgType: localStorage.getItem("orgType"),

  826.           startDate: this.dateType1 ? "" : this.customtime1[0],

  827.           endDate: this.dateType1 ? "" : this.customtime1[1],

  828.           dateType: this.dateType1,

  829.           houseTypes: this.houseTypes,

  830.           current: this.currentPage,

  831.           size: this.size,

  832.           hour,

  833.         })

  834.         .then((res) => {

  835.           console.log(res);

  836.           this.detailList = res.data.records;

  837.           this.total = res.data.total;

  838.         });

  839.     },

  840.     valuechange() {

  841.       this.dateType = 4;

  842.       this.cardindex = 1;

  843.       this.secindex = 1;

  844.       if (this.choicValue == "") {

  845.       }

  846.       if (this.selValue == 1) {

  847.         this.agentissow = false;

  848.       } else {

  849.         if (this.choicValue == "") {

  850.           this.agentissow = true;

  851.         } else {

  852.           this.agentissow = false;

  853.         }

  854.       }

  855.       this.dataOverViewWithSystem();

  856.       this.dataOverviewWithSystemWithDay();

  857.       this.dataOverviewWithSystemWithLook();

  858.     },

  859.     // 当选择的代理商或者楼盘切换时

  860.     selChange(e) {

  861.       if (e == 3) {

  862.         this.operaFlag = false;

  863.         this.agentissow = true;

  864.         return;

  865.       }

  866.       this.choicValue = "";

  867.       this.dateType = 4;

  868.       this.cardindex = 1;

  869.       this.secindex = 1;

  870.       this.getList();

  871.       if (this.selValue == 1) {

  872.         this.agentissow = false;

  873.       } else {

  874.         if (this.choicValue == "") {

  875.           this.agentissow = true;

  876.         } else {

  877.           this.agentissow = false;

  878.         }

  879.       }

  880.     },

  881.     sysChange() {

  882.       this.dataOverViewWithSystem();

  883.       this.dataOverviewWithSystemWithDay();

  884.       this.dataOverviewWithSystemWithLook();

  885.     },

  886.     // 获取下拉框数据

  887.     getList() {

  888.       console.log(this.selValue);

  889.       // 当为楼盘选择时

  890.       if (this.selValue == 1) {

  891.         this.$api.api

  892.           .findMyOrg({

  893.             orgType: localStorage.getItem("orgType"),

  894.           })

  895.           .then((res) => {

  896.             this.houseList = res.data;

  897.             this.dataOverViewWithSystem();

  898.             this.dataOverviewWithSystemWithDay();

  899.             this.dataOverviewWithSystemWithLook();

  900.           });

  901.       } else if (this.selValue == 2) {

  902.         this.$api.api

  903.           .findMyAgent({

  904.             orgType: localStorage.getItem("orgType"),

  905.           })

  906.           .then((res) => {

  907.             this.houseList = res.data;

  908.             this.dataOverViewWithSystem();

  909.             this.dataOverviewWithSystemWithDay();

  910.             this.dataOverviewWithSystemWithLook();

  911.           });

  912.       } else {

  913.         this.dataOverViewWithSystem();

  914.         this.dataOverviewWithSystemWithDay();

  915.         this.dataOverviewWithSystemWithLook();

  916.       }

  917.     },

  918.     dataOverviewWithSystemWithDay() {

  919.       this.$api.api

  920.         .dataOverviewWithSystemWithDay({

  921.           agentId: this.selValue == 0 ? this.choicValue : null,

  922.           orgCode: this.selValue == 1 ? this.choicValue : null,

  923.           orgType: localStorage.getItem("orgType"),

  924.           startDate: this.dateType1 ? "" : this.customtime1[0],

  925.           endDate: this.dateType1 ? "" : this.customtime1[1],

  926.           dateType: this.dateType1,

  927.           houseTypes: this.houseTypes,

  928.         })

  929.         .then((res) => {

  930.           this.secondTab = res.data;

  931.           // 调用方法

  932.           // 处理数据

  933.           let arr = [];

  934.           res.data.todayActiveUserList.map((item, index) => {

  935.             let obj = {};

  936.             if (index == 23) {

  937.               obj.time =

  938.                 item.time.substring(11, 16) +

  939.                 "-" +

  940.                 res.data.todayActiveUserList[0].time.substring(11, 16);

  941.               // return

  942.             } else {

  943.               // console.log(item.time,res.data.todayActiveUserList[index/1+1].time);

  944.               obj.time =

  945.                 item.time.substring(11, 16) +

  946.                 "-" +

  947.                 res.data.todayActiveUserList[index / 1 + 1].time.substring(

  948.                   11,

  949.                   16

  950.                 );

  951.             }

  952.             obj.hour = index;

  953.             // 接待量

  954.             obj.receptionQuantityInToday =

  955.               res.data.todayReceptionList[index].data;

  956.             // 活跃用户

  957.             obj.activeUserQuantity = res.data.todayActiveUserList[index].data;

  958.             // 活跃设备

  959.             obj.activeEquipmentQuantity =

  960.               res.data.todayActiveEquipmentList[index].data;

  961.             arr.push(obj);

  962.           });

  963.           // console.log(arr);

  964.           this.echarList1 = arr;

  965.           this.getChars1(1);

  966.         });

  967.     },

  968.     // 整体看板

  969.     dataOverviewWithSystemWithLook() {

  970.       this.$api.api

  971.         .dataOverviewWithSystemWithLook({

  972.           startDate: this.dateType ? "" : this.customtime[0],

  973.           endDate: this.dateType ? "" : this.customtime[1],

  974.           dateType: this.dateType,

  975.           agentId: this.selValue == 0 ? this.choicValue : null,

  976.           orgCode: this.selValue == 1 ? this.choicValue : null,

  977.           houseTypes: this.houseTypes,

  978.           orgType: localStorage.getItem("orgType"),

  979.         })

  980.         .then((res) => {

  981.           // console.log(res);

  982.           this.thirdTab = res.data;

  983.           this.getChars2(this.cardindex);

  984.         });

  985.     },

  986.     // echars生成

  987.     getChars1(idx) {

  988.       // console.log(idx);

  989.       let Strname = ["时段一", "时段二"];

  990.       let timeDate = [];

  991.       // 判断是第几个然后对数据进行渲染

  992.       // 先处理时间

  993.       let arr1 = [];

  994.       let arr2 = [];

  995.       // console.log(timeDate);

  996.       if (idx == 1) {

  997.         // 接待量

  998.         this.secondTab.todayReceptionList.map((item) => {

  999.           timeDate.push(item.time.substring(11, 16));

  1000.           arr1.push(item.data);

  1001.         });

  1002.         this.secondTab.yesterdayReceptionList.map((item) => {

  1003.           arr2.push(item.data);

  1004.         });

  1005.       }

  1006.       if (idx == 2) {

  1007.         // 活跃用户

  1008.         this.secondTab.todayActiveUserList.map((item) => {

  1009.           timeDate.push(item.time.substring(11, 16));

  1010.           arr1.push(item.data);

  1011.         });

  1012.         this.secondTab.yesterdayActiveUserList.map((item) => {

  1013.           arr2.push(item.data);

  1014.         });

  1015.       }

  1016.       if (idx == 3) {

  1017.         // 活跃设备

  1018.         this.secondTab.todayActiveEquipmentList.map((item) => {

  1019.           timeDate.push(item.time.substring(11, 16));

  1020.           arr1.push(item.data);

  1021.         });

  1022.         this.secondTab.yesterdayActiveEquipmentList.map((item) => {

  1023.           arr2.push(item.data);

  1024.         });

  1025.       }

  1026.       let arr = [

  1027.         {

  1028.           name: Strname[0],

  1029.           data: arr1,

  1030.           type: "line",

  1031.           smooth: true,

  1032.         },

  1033.         {

  1034.           name: Strname[1],

  1035.           data: arr2,

  1036.           type: "line",

  1037.           smooth: true,

  1038.         },

  1039.       ];

  1040.       // console.log(arr1,arr2);

  1041.       this.SwitchCARDS(arr, "main", timeDate, Strname);

  1042.     },

  1043.     getChars2(idx) {

  1044.       // console.log(idx);

  1045.       let Strname = [];

  1046.       let timeDate = [];

  1047.       let arr1 = [];

  1048.       // 判断是第几个然后对数据进行渲染

  1049.       // 先处理时间

  1050.       // console.log(timeDate);

  1051.       if (idx == 1) {

  1052.         Strname = ["购买服务楼盘数"];

  1053.         this.thirdTab.buyHouseList.map((item) => {

  1054.           timeDate.push(item.time.substring(5, 10));

  1055.           arr1.push(item.data);

  1056.         });

  1057.       } else if (idx == 2) {

  1058.         Strname = ["服务期内楼盘数"];

  1059.         this.thirdTab.houseQofEnoughList.map((item) => {

  1060.           timeDate.push(item.time.substring(5, 10));

  1061.           arr1.push(item.data);

  1062.         });

  1063.       } else if (idx == 4) {

  1064.         Strname = ["活跃用户数"];

  1065.         this.thirdTab.activeUserList.map((item) => {

  1066.           timeDate.push(item.time.substring(5, 10));

  1067.           arr1.push(item.data);

  1068.         });

  1069.       } else if (idx == 5) {

  1070.         Strname = ["新增用户数"];

  1071.         this.thirdTab.newJoinUserList.map((item) => {

  1072.           timeDate.push(item.time.substring(5, 10));

  1073.           arr1.push(item.data);

  1074.         });

  1075.       } else if (idx == 6) {

  1076.         Strname = ["接待量"];

  1077.         this.thirdTab.receptionList.map((item) => {

  1078.           timeDate.push(item.time.substring(5, 10));

  1079.           arr1.push(item.data);

  1080.         });

  1081.       } else if (idx == 7) {

  1082.         Strname = ["平均接待时长"];

  1083.         this.thirdTab.avgReceptionList.map((item) => {

  1084.           timeDate.push(item.time.substring(5, 10));

  1085.           arr1.push(item.data);

  1086.         });

  1087.       } else if (idx == 8) {

  1088.         Strname = ["活跃设备数"];

  1089.         this.thirdTab.activeEquipmentList.map((item) => {

  1090.           timeDate.push(item.time.substring(5, 10));

  1091.           arr1.push(item.data);

  1092.         });

  1093.       } else if (idx == 9) {

  1094.         Strname = ["销售设备数"];

  1095.         this.thirdTab.buyEquipQuantityList.map((item) => {

  1096.           timeDate.push(item.time.substring(5, 10));

  1097.           arr1.push(item.data);

  1098.         });

  1099.       }

  1100.       let arr = [

  1101.         {

  1102.           name: Strname[0],

  1103.           data: arr1,

  1104.           type: "line",

  1105.           smooth: true,

  1106.         },

  1107.       ];

  1108.       this.SwitchCARDS(arr, "echar2", timeDate, Strname);

  1109.     },

  1110.     // 获取总览数据

  1111.     dataOverViewWithSystem() {

  1112.       this.$api.api

  1113.         .dataOverViewWithSystem({

  1114.           agentId: this.selValue == 0 ? this.choicValue : null,

  1115.           orgCode: this.selValue == 1 ? this.choicValue : null,

  1116.           orgType: localStorage.getItem("orgType"),

  1117.           houseTypes: this.houseTypes,

  1118.         })

  1119.         .then((res) => {

  1120.           this.firstTab = res.data;

  1121.         });

  1122.     },

  1123.     Overviewxlick(i) {

  1124.       this.cardindex = i;

  1125.       this.getChars2(i);

  1126.     },

  1127.     secondChange(i) {

  1128.       this.secindex = i;

  1129.       this.getChars1(i);

  1130.     },

  1131.     confirmtime1(e) {

  1132.       this.dateType1 = null;

  1133.       this.dataOverviewWithSystemWithDay();

  1134.     },

  1135.     tabtimetap1(i) {

  1136.       this.dateType1 = i;

  1137.       this.customtime1 = [];

  1138.       if (this.echarValue == 0) {

  1139.         this.dataOverviewWithSystemWithDay();

  1140.       } else {

  1141.         this.dataOverviewWithSystemWithLookWithTable();

  1142.       }

  1143.     },

  1144.     confirmtime(e) {

  1145.       this.dateType = null;

  1146.       this.dataOverviewWithSystemWithLook();

  1147.     },

  1148.     tabtimetap(i) {

  1149.       this.dateType = i;

  1150.       this.customtime = [];

  1151.       this.dataOverviewWithSystemWithLook();

  1152.     },

  1153.     //卡片下折线图

  1154.     SwitchCARDS(arr, str, timeDate, Strname) {

  1155.       var chartDom = document.getElementById(str);

  1156.       var myChart = echarts.init(chartDom);

  1157.       var option;

  1158. 

  1159.       option = {

  1160.         color: [

  1161.           "#6F8EDC",

  1162.           "#EE6666",

  1163.           "#F98120",

  1164.           "#1CC99E",

  1165.           "#9474FB",

  1166.           "#66AFF5",

  1167.           "#FABD2B",

  1168.           "#FFCF8F",

  1169.           "#657292",

  1170.           "#7A6A99",

  1171.           "#BF5D52",

  1172.           "#77B7E4",

  1173.           "#E6A065",

  1174.           "#9D5139",

  1175.           "#C1AA88",

  1176.           "#F87F7A",

  1177.           "#F6CF74",

  1178.           "#7F5506",

  1179.           "#88BB9B",

  1180.           "#6E99AA",

  1181.           "#5789D0",

  1182.         ],

  1183.         tooltip: {

  1184.           trigger: "axis",

  1185.         },

  1186.         legend: {

  1187.           data: Strname,

  1188.           bottom: "10",

  1189.         },

  1190.         grid: {

  1191.           left: 10,

  1192.           right: 10,

  1193. 

  1194.           containLabel: true,

  1195.         },

  1196.         xAxis: {

  1197.           type: "category",

  1198.           data: timeDate,

  1199.           axisLabel: {

  1200.             //重点在这一块，其余可以忽略

  1201.             textStyle: {

  1202.               color: "#212121", //更改坐标轴文字颜色

  1203.             },

  1204.           },

  1205.           axisLine: {

  1206.             lineStyle: {

  1207.               type: "solid",

  1208.               color: "#DDE1EE", //x线的颜色

  1209.               width: "1", //坐标线的宽度

  1210.             },

  1211.           },

  1212.         },

  1213.         yAxis: {

  1214.           type: "value",

  1215.           splitNumber: 4,

  1216.           axisLabel: {

  1217.             //重点在这一块，其余可以忽略

  1218.             textStyle: {

  1219.               color: "#212121", //更改坐标轴文字颜色

  1220.             },

  1221.           },

  1222.           axisLine: {

  1223.             lineStyle: {

  1224.               ype: "solid",

  1225.               color: "#DDE1EE", //x线的颜色

  1226.               width: "1", //坐标线的宽度

  1227.             },

  1228.           },

  1229.           splitLine: {

  1230.             lineStyle: {

  1231.               type: "dashed", // y轴分割线类型

  1232.             },

  1233.           },

  1234.           axisTick: {

  1235.             //y轴刻度线

  1236.             show: false,

  1237.           },

  1238.         },

  1239.         series: arr,

  1240.       };

  1241.       option && myChart.setOption(option);

  1242.       window.addEventListener("resize", () => {

  1243.         myChart.resize();

  1244.       });

  1245.     },

  1246.   },

  1247. };

  1248. </script>

  1249. 

  1250. <style scoped="scoped" lang="scss" >

  1251. .box-center {

  1252.   width: 100%;

  1253.   padding: 15px;

  1254.   min-width: 1000px;

  1255.   padding-bottom: 100px;

  1256. }

  1257. 

  1258. .container {

  1259.   display: grid;

  1260.   grid-template-columns: repeat(6, 16%);

  1261.   grid-column-gap: 12px;

  1262.   grid-row-gap: 18px;

  1263. }

  1264. 

  1265. // 进度条

  1266. .jinbox {

  1267.   width: 100%;

  1268.   height: 18px;

  1269.   line-height: 18px;

  1270.   display: flex;

  1271.   font-size: 16px;

  1272.   color: #2c3542;

  1273.   margin-top: 20px;

  1274.   .jinboxtit {

  1275.     width: 14%;

  1276.     height: 18px;

  1277.     padding-right: 6px;

  1278.     white-space: nowrap;

  1279.     text-overflow: ellipsis;

  1280.     overflow: hidden;

  1281.   }

  1282.   .jinbox-box {

  1283.     width: 75%;

  1284.     height: 100%;

  1285.     border-radius: 8px;

  1286.     background: #f2f2f2;

  1287.   }

  1288.   .boxbaifenbi {

  1289.     height: 100%;

  1290.     background: #60d7a0;

  1291.     border-radius: 8px;

  1292.   }

  1293.   .boxbaifenbi2 {

  1294.     height: 100%;

  1295.     background: #5b8ff9;

  1296.   }

  1297.   .jinboxbott {

  1298.     width: 16%;

  1299.     text-indent: 20px;

  1300.   }

  1301. }

  1302. 

  1303. #main {

  1304.   width: 100%;

  1305.   height: 380px;

  1306. }

  1307. #echar2 {

  1308.   width: 100%;

  1309.   height: 380px;

  1310. }

  1311. #Brokenline1 {

  1312.   width: 100%;

  1313.   height: 350px;

  1314. }

  1315. #Brokenline2 {

  1316.   width: 100%;

  1317.   height: 350px;

  1318. }

  1319. #Pinspeak1 {

  1320.   width: 100%;

  1321.   height: 350px;

  1322. }

  1323. #Pinspeak2 {

  1324.   width: 100%;

  1325.   height: 350px;

  1326. }

  1327. .app-box-san {

  1328.   width: 100%;

  1329.   // height: 400px;

  1330.   display: flex;

  1331.   margin-top: 15px;

  1332.   .zuo {

  1333.     flex: 1;

  1334.     height: 100%;

  1335.     margin-right: 15px;

  1336.     background: #ffffff;

  1337.     border-radius: 4px;

  1338.     .title {

  1339.       width: 100%;

  1340.       height: 55px;

  1341.       border-bottom: 1px solid #e0e0e0;

  1342.       display: flex;

  1343.       align-content: center;

  1344.       .text1 {

  1345.         flex: 2;

  1346.         line-height: 55px;

  1347.         text-indent: 20px;

  1348.         font-weight: 500;

  1349.         font-size: 16px;

  1350.         color: #333333;

  1351.       }

  1352.       .text2 {

  1353.         flex: 1;

  1354.         height: 55px;

  1355.         display: flex;

  1356.         align-items: center;

  1357.       }

  1358.     }

  1359.   }

  1360.   .you {

  1361.     height: 100%;

  1362.     flex: 1;

  1363.     background: #ffffff;

  1364.     border-radius: 4px;

  1365.     .title {

  1366.       width: 100%;

  1367.       height: 55px;

  1368.       border-bottom: 1px solid #e0e0e0;

  1369.       display: flex;

  1370.       align-content: center;

  1371.       .text1 {

  1372.         flex: 2;

  1373.         line-height: 55px;

  1374.         text-indent: 20px;

  1375.         font-weight: 500;

  1376.         font-size: 16px;

  1377.         color: #333333;

  1378.       }

  1379.       .text2 {

  1380.         flex: 1;

  1381.         height: 55px;

  1382.         display: flex;

  1383.         align-items: center;

  1384.       }

  1385.     }

  1386.   }

  1387. }

  1388. 

  1389. .app-box-er {

  1390.   width: 100%;

  1391.   background: #ffffff;

  1392.   box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);

  1393.   border-radius: 4px;

  1394.   margin-top: 15px;

  1395.   padding: 15px;

  1396. }

  1397. .grid-content {

  1398.   background: #ffffff;

  1399.   height: 90px;

  1400.   border: 1px solid #e0e0e0;

  1401.   .text1 {

  1402.     height: 16px;

  1403.     font-size: 16px;

  1404.     font-weight: 400;

  1405.     line-height: 16px;

  1406.     text-indent: 20px;

  1407.     margin-top: 20px;

  1408.   }

  1409.   .text2 {

  1410.     height: 32px;

  1411.     font-size: 32px;

  1412.     font-weight: normal;

  1413.     line-height: 32px;

  1414.     text-indent: 20px;

  1415.     margin-top: 10px;

  1416.   }

  1417. }

  1418. 

  1419. .tophove {

  1420.   color: #ffffff;

  1421.   background: #2671e2;

  1422. }

  1423. .tophovese {

  1424.   color: #2671e2;

  1425. }

  1426. .app-top {

  1427.   width: 100%;

  1428.   background: #ffffff;

  1429.   box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);

  1430.   border-radius: 4px;

  1431.   padding-top: 15px;

  1432.   padding-bottom: 15px;

  1433. }

  1434. .app-titel {

  1435.   width: 100%;

  1436.   display: flex;

  1437.   align-items: center;

  1438.   .titel-text {

  1439.     height: 100%;

  1440.     font-size: 16px;

  1441.     font-weight: 600;

  1442.     color: #32363d;

  1443.     text-indent: 30px;

  1444.   }

  1445.   .toptimeqhuan {

  1446.     width: 190px;

  1447.     height: 32px;

  1448.     background: #ffffff;

  1449.     border-radius: 4px;

  1450.     border: 1px solid #e0e0e0;

  1451.     display: flex;

  1452.     align-items: center;

  1453.     overflow: hidden;

  1454.     margin-left: 20px;

  1455.     cursor: pointer;

  1456.   }

  1457.   .toptimeqhuan div {

  1458.     flex: 1;

  1459.     text-align: center;

  1460.     line-height: 32px;

  1461.     font-size: 14px;

  1462.   }

  1463. }

  1464. .hejisan {

  1465.   width: 92%;

  1466.   margin: 0 auto;

  1467.   display: flex;

  1468.   margin-top: 15px;

  1469.   .text1-1 {

  1470.     color: #666666;

  1471.   }

  1472.   .text1-2 {

  1473.     color: #333333;

  1474.     margin-top: 10px;

  1475.   }

  1476. }

  1477. .app_titile {

  1478.   display: flex;

  1479.   justify-content: space-between;

  1480. }

  1481. </style>