liumin
/
zkPCproject
0
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
543 Commit
4 分支
45 MiB
 
 
 
目錄樹: b0543403ee
分支列表 標籤列表
${ item.name }
Create branch ${ searchTerm }
from 'b0543403ee'
${ noResults }
zkPCproject/src/views/Equipment/equipmentDetailList.vue

1844 line
58 KiB
原始文件 Blame 文件歷史 

  1. <template>

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

  3.     <div class="titlebox1" v-if="orgType != 3">

  4.       <div style="

  5.           background: #ffffff;

  6.           padding-left: 18px;

  7.           display: flex;

  8.           padding-top: 18px;

  9.         ">

  10.         <el-select v-model="houseTypes" @change="sysChange" style="width: 100px; margin-right: 10px" placeholder="请选择">

  11.           <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">

  12.           </el-option>

  13.         </el-select>

  14.         <!-- <span class="demonstration">项目名称：</span> -->

  15.         <el-select v-model="selValue" @change="selChange" style="width: 100px" placeholder="请选择">

  16.           <el-option label="代理商" v-if="orgType == 0" value="0"></el-option>

  17.           <el-option label="公司" v-if="orgType != 2" value="1"></el-option>

  18.           <el-option label="项目" value="2"></el-option>

  19.         </el-select>

  20.         <!-- <div style="width: 200px">

  21.           <el-select

  22.             v-model="houseId"

  23.             filterable

  24.             placeholder="请选择"

  25.             @change="change"

  26.           >

  27.             <el-option

  28.               v-for="item in houseList"

  29.               :key="item.id"

  30.               :label="item.propertyName"

  31.               :value="item.id"

  32.             >

  33.             </el-option>

  34.           </el-select>

  35.         </div> -->

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

  37.           <el-select v-model="houseId" filterable placeholder="默认为全部" @change="change">

  38.             <el-option v-for="item in houseList" :key="item.orgCode" :label="item.name" :value="item.orgCode">

  39.             </el-option>

  40.           </el-select>

  41.         </div>

  42.         <!-- 项目 -->

  43.         <div style="margin-left: 26px" v-else-if="selValue == 2">

  44.           <el-select v-model="houseId" filterable placeholder="默认为全部" @change="change">

  45.             <el-option v-for="item in houseList" :key="item.id" :label="item.propertyName" :value="item.id">

  46.             </el-option>

  47.           </el-select>

  48.         </div>

  49.         <div style="margin-left: 26px" v-else>

  50.           <el-select v-model="houseId" filterable placeholder="默认为全部" @change="change">

  51.             <el-option v-for="item in houseList" :key="item.id" :label="item.agentName" :value="item.id">

  52.             </el-option>

  53.           </el-select>

  54.         </div>

  55.         <div style="margin-left: auto; margin-right: 10px" v-if="equ_ed_download">

  56.           <el-button @click="downLoad" icon="el-icon-download">导出</el-button>

  57.         </div>

  58.       </div>

  59.       <div style="

  60.           background: #ffffff;

  61.           padding-left: 18px;

  62.           display: flex;

  63.           padding-top: 18px;

  64.           padding-right: 18px;

  65.         ">

  66.         <span style="min-width: 80px" class="demonstration">使用时间：</span>

  67.         <div style="margin-left:15px">

  68.           <!-- <div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">

  69.             近7天

  70.           </div>

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

  72.             近15天

  73.           </div>

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

  75.             近30天

  76.           </div> -->

  77.           <el-button

  78.                 :class="{ 'el-button--primary': timeType == 4 }"

  79.                 @click="tabtimetap(4)"

  80.                 >近7天</el-button

  81.               >

  82.               <el-button

  83.                 :class="{ 'el-button--primary': timeType == 5 }"

  84.                 @click="tabtimetap(5)"

  85.                 >近15天</el-button

  86.               >

  87.               <el-button

  88.               style="margin-right:15px"

  89.                 :class="{ 'el-button--primary': timeType == 6 }"

  90.                 @click="tabtimetap(6)"

  91.                 >近30天</el-button

  92.               >

  93.         </div>

  94.         <el-date-picker @change="confirmtime" v-model="customtime" type="daterange" range-separator="-"

  95.           :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd" start-placeholder="开始日期"

  96.           end-placeholder="结束日期" :picker-options="pickerOptions">

  97.         </el-date-picker>

  98.         <div style="margin-left: 10px; margin-top: 8px">

  99.           <el-checkbox v-model="checked" @change="radioChange">对比时间段</el-checkbox>

  100.         </div>

  101.         <div v-if="checked" style="

  102.             margin-left: 20px;

  103.             border: 1px solid #dcdfe6;

  104.             min-width: 220px;

  105.             height: 32px;

  106.             border-radius: 4px;

  107.             max-width: 360px;

  108.             font-size: 13px;

  109.             line-height: 32px;

  110.             text-indent: 8px;

  111.             cursor: pointer;

  112.           " @click="show">

  113.           <div style="display: flex">

  114.             <div style="min-width: 60px">

  115.               {{ selectTime1 ? "时段二： " : "请选择： " }}

  116.             </div>

  117.             <div v-if="selectTime1" style="display: flex">

  118.               <!-- {{ selectTime+ "-" + selectTime1}} -->

  119.               <div style="min-width: 120px; text-align: center">

  120.                 {{ selectTime }}

  121.               </div>

  122.               <span>-</span>

  123.               <div style="min-width: 120px; text-align: center; margin-right: 32px">

  124.                 {{ selectTime1 }}

  125.               </div>

  126.             </div>

  127.           </div>

  128.           <el-date-picker style="opacity: 0" v-model="time" @change="timeChange" ref="time" :validate-event="false"

  129.             type="date" placeholder="选择日期" format="yyyy - MM - dd " value-format="yyyy-MM-dd"

  130.             :picker-options="pickerOptions">

  131.           </el-date-picker>

  132.         </div>

  133.       </div>

  134.     </div>

  135. 

  136.     <div class="titlebox" :style="{ 'marginTop': orgType != 3 ? '120px' : '0px' }">

  137. 

  138. 

  139.       <div class="kapiannox">

  140.         <div class="alllistbox tabcard">

  141. 

  142.           <el-card shadow="hover" :class="compareFlag == 0 ? 'tophovese' : 'noactive'">

  143.             <div @click="compareChange(0, '设备总数')">

  144.               <div class="text1">

  145.                 设备总数

  146.               </div>

  147.               <div class="text2">

  148.                 {{ details.equipmentQuantity || 0 }}

  149.               </div>

  150.               <div class="text3" v-if="selectTime1">

  151.                 <span>环比 {{ details1.equipmentQuantity || 0 }}</span>

  152.                 <span class="textUp" v-if="compare.equipmentQuantity > 0">

  153.                   +{{ compare.equipmentQuantity || 0 }}

  154.                   <i class="up"></i>

  155.                 </span>

  156.                 <span class="textDown" v-if="compare.equipmentQuantity < 0">

  157.                   {{ compare.equipmentQuantity || 0 }}

  158.                   <i class="down"></i>

  159.                 </span>

  160.               </div>

  161.             </div>

  162.           </el-card>

  163.           <el-card shadow="hover" :class="compareFlag == 1 ? 'tophovese' : 'noactive'">

  164.             <div @click="compareChange(1, '在线设备数')">

  165.               <div class="text1">

  166.                 在线设备数

  167.                 <el-tooltip effect="light" content="筛选时间内，联网的设备；" placement="bottom-end">

  168.                   <i class="pop"></i>

  169.                 </el-tooltip>

  170.               </div>

  171.               <div class="text2">

  172.                 {{ details.onlineQuantity || 0 }}

  173.               </div>

  174.               <div class="text3" v-if="selectTime1">

  175.                 <span>环比 {{ details1.onlineQuantity || 0 }}</span>

  176.                 <span class="textUp" v-if="compare.onlineQuantity > 0">

  177.                   +{{ compare.onlineQuantity || 0 }}

  178.                   <i class="up"></i>

  179.                 </span>

  180.                 <span class="textDown" v-if="compare.onlineQuantity < 0">

  181.                   {{ compare.onlineQuantity || 0 }}

  182.                   <i class="down"></i>

  183.                 </span>

  184.               </div>

  185.             </div>

  186.           </el-card>

  187.           <el-card shadow="hover" :class="compareFlag == 2 ? 'tophovese' : 'noactive'">

  188.             <div @click="compareChange(2, '在线设备平均占比')">

  189.               <div class="text1">

  190.                 在线设备占比

  191.               </div>

  192.               <div class="text2">

  193.                 {{ details.onlineRate || 0 }}

  194.               </div>

  195.               <div class="text3" v-if="selectTime1">

  196.                 <span>环比 {{ details1.onlineRate || 0 }}</span>

  197.                 <span class="textUp" v-if="compare.onlineRate > 0">

  198.                   +{{ compare.onlineRate || 0 }}

  199.                   <i class="up"></i>

  200.                 </span>

  201.                 <span class="textDown" v-if="compare.onlineRate < 0">

  202.                   {{ compare.onlineRate || 0 }}

  203.                   <i class="down"></i>

  204.                 </span>

  205.               </div>

  206.             </div>

  207.           </el-card>

  208.           <el-card shadow="hover" :class="compareFlag == 3 ? 'tophovese' : 'noactive'">

  209.             <div @click="compareChange(3, '活跃设备数')">

  210.               <div class="text1">

  211.                 活跃设备数

  212.                 <el-tooltip effect="light" content="筛选时间内，有接待并上传录音的设备；" placement="bottom-end">

  213.                   <i class="pop"></i>

  214.                 </el-tooltip>

  215.               </div>

  216.               <div class="text2">

  217.                 {{ details.activeQuantity || 0 }}

  218.               </div>

  219.               <div class="text3" v-if="selectTime1">

  220.                 <span>环比 {{ details1.activeQuantity || 0 }}</span>

  221.                 <span class="textUp" v-if="compare.activeQuantity > 0">

  222.                   +{{ compare.activeQuantity || 0 }}

  223.                   <i class="up"></i>

  224.                 </span>

  225.                 <span class="textDown" v-if="compare.activeQuantity < 0">

  226.                   {{ compare.activeQuantity || 0 }}

  227.                   <i class="down"></i>

  228.                 </span>

  229.               </div>

  230.             </div>

  231.           </el-card>

  232.           <el-card shadow="hover" :class="compareFlag == 4 ? 'tophovese' : 'noactive'">

  233.             <div @click="compareChange(4, '活跃设备平均占比')">

  234.               <div class="text1">

  235.                 活跃设备占比

  236.               </div>

  237.               <div class="text2">

  238.                 {{ details.activeRate || 0 }}

  239.               </div>

  240.               <div class="text3" v-if="selectTime1">

  241.                 <span>环比 {{ details1.activeRate || 0 }}</span>

  242.                 <span class="textUp" v-if="compare.activeRate > 0">

  243.                   +{{ compare.activeRate || 0 }}

  244.                   <i class="up"></i>

  245.                 </span>

  246.                 <span class="textDown" v-if="compare.activeRate < 0">

  247.                   {{ compare.activeRate || 0 }}

  248.                   <i class="down"></i>

  249.                 </span>

  250.               </div>

  251.             </div>

  252.           </el-card>

  253.           <el-card shadow="hover" :class="compareFlag == 5 ? 'tophovese' : 'noactive'">

  254.             <div @click="compareChange(5, '指派次数')">

  255.               <div class="text1">

  256.                 指派次数

  257.                 <el-tooltip effect="light" content="筛选时间内，指派给设备的接待数，不包含接待中；" placement="bottom-end">

  258.                   <i class="pop"></i>

  259.                 </el-tooltip>

  260.               </div>

  261.               <div class="text2">

  262.                 {{ details.assignQuantity || 0 }}

  263.               </div>

  264.               <div class="text3" v-if="selectTime1">

  265.                 <span>环比 {{ details1.assignQuantity || 0 }}</span>

  266.                 <span class="textUp" v-if="compare.assignQuantity > 0">

  267.                   +{{ compare.assignQuantity || 0 }}

  268.                   <i class="up"></i>

  269.                 </span>

  270.                 <span class="textDown" v-if="compare.assignQuantity < 0">

  271.                   {{ compare.assignQuantity || 0 }}

  272.                   <i class="down"></i>

  273.                 </span>

  274.               </div>

  275.             </div>

  276.           </el-card>

  277.           <el-card shadow="hover" :class="compareFlag == 6 ? 'tophovese' : 'noactive'">

  278.             <div @click="compareChange(6, '完整录音次数')">

  279.               <div class="text1">

  280.                 完整录音次数

  281.                 <el-tooltip effect="light" content="筛选时间内，接待中录音正常开启（指派时间与录音开启时间相差小于5分钟）和录音正常关闭（结束录音时间晚于结束接待时间）的接待数；"

  282.                   placement="bottom-end">

  283.                   <i class="pop"></i>

  284.                 </el-tooltip>

  285.               </div>

  286.               <div class="text2">

  287.                 {{ details.normalRecordQuantity || 0 }}

  288.               </div>

  289.               <div class="text3" v-if="selectTime1">

  290.                 <span>环比 {{ details1.normalRecordQuantity || 0 }}</span>

  291.                 <span class="textUp" v-if="compare.normalRecordQuantity > 0">

  292.                   +{{ compare.normalRecordQuantity || 0 }}

  293.                   <i class="up"></i>

  294.                 </span>

  295.                 <span class="textDown" v-if="compare.normalRecordQuantity < 0">

  296.                   {{ compare.normalRecordQuantity || 0 }}

  297.                   <i class="down"></i>

  298.                 </span>

  299.               </div>

  300.             </div>

  301.           </el-card>

  302.           <el-card shadow="hover" :class="compareFlag == 7 ? 'tophovese' : 'noactive'">

  303.             <div @click="compareChange(7, '完整录音占比')">

  304.               <div class="text1">完整录音占比

  305.                 <el-tooltip effect="light" content="筛选时间内，完整录音次数/指派次数*100%;" placement="bottom-end">

  306.                   <i class="pop"></i>

  307.                 </el-tooltip>

  308.               </div>

  309.               <div class="text2">

  310.                 {{ details.fullRecordRate || 0 }}

  311.               </div>

  312.               <div class="text3" v-if="selectTime1">

  313.                 <span>环比 {{ details1.fullRecordRate || 0 }}</span>

  314.                 <span class="textUp" v-if="compare.fullRecordRate > 0">

  315.                   +{{ compare.fullRecordRate || 0 }}

  316.                   <i class="up"></i>

  317.                 </span>

  318.                 <span class="textDown" v-if="compare.fullRecordRate < 0">

  319.                   {{ compare.fullRecordRate || 0 }}

  320.                   <i class="down"></i>

  321.                 </span>

  322.               </div>

  323.             </div>

  324.           </el-card>

  325.           <el-card shadow="hover" :class="compareFlag == 8 ? 'tophovese' : 'noactive'">

  326.             <div @click="compareChange(8, '部分录音')">

  327.               <div class="text1">部分录音次数

  328.                 <el-tooltip effect="light" content="筛选时间内，接待中录音未及时开启（指派时间与录音开启时间相差大于于5分钟）或录音提前关闭（未结束，就关闭了录音）的接待数；"

  329.                   placement="bottom-end">

  330.                   <i class="pop"></i>

  331.                 </el-tooltip>

  332.               </div>

  333.               <div class="text2">

  334.                 {{ details.snippetRecordQuantity || 0 }}

  335.               </div>

  336.               <div class="text3" v-if="selectTime1">

  337.                 <span>环比 {{ details1.snippetRecordQuantity || 0 }}</span>

  338.                 <span class="textUp" v-if="compare.snippetRecordQuantity > 0">

  339.                   +{{ compare.snippetRecordQuantity || 0 }}

  340.                   <i class="up"></i>

  341.                 </span>

  342.                 <span class="textDown" v-if="compare.snippetRecordQuantity < 0">

  343.                   {{ compare.snippetRecordQuantity || 0 }}

  344.                   <i class="down"></i>

  345.                 </span>

  346.               </div>

  347.             </div>

  348.           </el-card>

  349.           <el-card shadow="hover" :class="compareFlag == 9 ? 'tophovese' : 'noactive'">

  350.             <div @click="compareChange(9, '未录音')">

  351.               <div class="text1">未录音次数

  352.                 <el-tooltip effect="light" content="筛选时间内，指派的接待，没有录音的接待；" placement="bottom-end">

  353.                   <i class="pop"></i>

  354.                 </el-tooltip>

  355.               </div>

  356.               <div class="text2">

  357.                 {{ details.noRecordQuantity || 0 }}

  358.               </div>

  359.               <div class="text3" v-if="selectTime1">

  360.                 <span>环比 {{ details1.noRecordQuantity || 0 }}</span>

  361.                 <span class="textUp" v-if="compare.noRecordQuantity > 0">

  362.                   +{{ compare.noRecordQuantity || 0 }}

  363.                   <i class="up"></i>

  364.                 </span>

  365.                 <span class="textDown" v-if="compare.noRecordQuantity < 0">

  366.                   {{ compare.noRecordQuantity || 0 }}

  367.                   <i class="down"></i>

  368.                 </span>

  369.               </div>

  370.             </div>

  371.           </el-card>

  372.           <el-card shadow="hover" :class="compareFlag == 10 ? 'tophovese' : 'noactive'">

  373.             <div @click="compareChange(10, '正常关机次数')">

  374.               <div class="text1">正常关机次数

  375.                 <el-tooltip effect="light" content="筛选时间内，手动关机的次数;" placement="bottom-end">

  376.                   <i class="pop"></i>

  377.                 </el-tooltip>

  378.               </div>

  379.               <div class="text2">

  380.                 {{ details.normalShutdownQuantity || 0 }}

  381.               </div>

  382.               <div class="text3" v-if="selectTime1">

  383.                 <span>环比 {{ details1.normalShutdownQuantity || 0 }}</span>

  384.                 <span class="textUp" v-if="compare.normalShutdownQuantity > 0">

  385.                   +{{ compare.normalShutdownQuantity || 0 }}

  386.                   <i class="up"></i>

  387.                 </span>

  388.                 <span class="textDown" v-if="compare.normalShutdownQuantity < 0">

  389.                   {{ compare.normalShutdownQuantity || 0 }}

  390.                   <i class="down"></i>

  391.                 </span>

  392.               </div>

  393.             </div>

  394.           </el-card>

  395.           <el-card shadow="hover" :class="compareFlag == 11 ? 'tophovese' : 'noactive'">

  396.             <div @click="compareChange(11, '低电关机次数')">

  397.               <div class="text1">低电关机次数

  398.                 <el-tooltip effect="light" content="筛选时间内，由于电量用完关机的次数;" placement="bottom-end">

  399.                   <i class="pop"></i>

  400.                 </el-tooltip>

  401.               </div>

  402.               <div class="text2">

  403.                 {{ details.lowElectricityQuantity || 0 }}

  404.               </div>

  405.               <div class="text3" v-if="selectTime1">

  406.                 <span>环比 {{ details1.lowElectricityQuantity || 0 }}</span>

  407.                 <span class="textUp" v-if="compare.lowElectricityQuantity > 0">

  408.                   +{{ compare.lowElectricityQuantity || 0 }}

  409.                   <i class="up"></i>

  410.                 </span>

  411.                 <span class="textDown" v-if="compare.lowElectricityQuantity < 0">

  412.                   {{ compare.lowElectricityQuantity || 0 }}

  413.                   <i class="down"></i>

  414.                 </span>

  415.               </div>

  416.             </div>

  417.           </el-card>

  418.           <el-card shadow="hover" :class="compareFlag == 12 ? 'tophovese' : 'noactive'">

  419.             <div @click="compareChange(12, '异常关机次数')">

  420.               <div class="text1">异常关机次数

  421.               </div>

  422.               <div class="text2">

  423.                 {{ details.abnormalShutdownQuantity || 0 }}

  424.               </div>

  425.               <div class="text3" v-if="selectTime1">

  426.                 <span>环比 {{ details1.abnormalShutdownQuantity || 0 }}</span>

  427.                 <span class="textUp" v-if="compare.abnormalShutdownQuantity > 0">

  428.                   +{{ compare.abnormalShutdownQuantity || 0 }}

  429.                   <i class="up"></i>

  430.                 </span>

  431.                 <span class="textDown" v-if="compare.abnormalShutdownQuantity < 0">

  432.                   {{ compare.abnormalShutdownQuantity || 0 }}

  433.                   <i class="down"></i>

  434.                 </span>

  435.               </div>

  436.             </div>

  437.           </el-card>

  438.         </div>

  439.       </div>

  440.     </div>

  441.     <!-- v-if="selectTime1" -->

  442.     <div style="margin-top: 15px">

  443.       <div class="zgutteruo">

  444.         <div class="zgutteruo-tit">对比</div>

  445.         <div id="compare" style="width: 100%; height: 360px"></div>

  446.       </div>

  447.     </div>

  448.     <div style="margin-top: 15px" v-if="!selectTime1">

  449.       <el-row :gutter="40">

  450.         <el-col :span="12">

  451.           <div class="zgutteruo">

  452.             <div class="zgutteruo-tit">录音结果占比</div>

  453.             <img v-if="odata1" style="width: 260px; height: 260px;margin: 50px auto;display: block;"

  454.               src="/img/Elementcircle.png" alt="" />

  455.             <div v-else id="mane" style="width: 100%; height: 360px;"></div>

  456.           </div>

  457.         </el-col>

  458.         <el-col :span="12">

  459.           <div class="zgutteruo">

  460.             <div class="zgutteruo-tit">关机类型占比</div>

  461.             <img v-if="odata2" style="width: 260px; height: 260px;margin: 50px auto;display: block;"

  462.               src="/img/Elementcircle.png" alt="" />

  463.             <div v-else id="mane2" style="width: 100%; height: 360px;"></div>

  464.           </div>

  465.         </el-col>

  466.       </el-row>

  467.     </div>

  468.     <div class="tablebox" v-if="!selectTime1">

  469.       <template>

  470.         <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#333333'}">

  471.           <el-table-column prop="createTime" label="日期" width="100" align="center">

  472.           </el-table-column>

  473.           <el-table-column prop="equipmentQuantity" label="设备总数" align="center">

  474.           </el-table-column>

  475.           <el-table-column prop="onlineQuantity " label="在线设备" align="center">

  476.             <template slot-scope="scope">

  477.               {{ scope.row.onlineQuantity || 0 }}

  478.             </template>

  479.           </el-table-column>

  480.           <el-table-column prop="onlineRate" label="在线设备占比" align="center">

  481.             <template slot-scope="scope">

  482.               {{ (scope.row.onlineRate || 0) + "%" }}

  483.             </template>

  484.           </el-table-column>

  485.           <el-table-column prop="activeQuantity" label="活跃设备" align="center">

  486.           </el-table-column>

  487.           <el-table-column prop="activeRate" label="活跃设备占比" align="center">

  488.             <template slot-scope="scope">

  489.               {{ (scope.row.activeRate || 0) + "%" }}

  490.             </template>

  491.           </el-table-column>

  492.           <el-table-column prop="assignQuantity" label="指派次数" align="center">

  493.           </el-table-column>

  494.           <el-table-column prop="normalRecordQuantity" label="完整录音次数" align="center">

  495.           </el-table-column>

  496.           <el-table-column prop="fullRecordRate" label="完整录音占比" align="center">

  497.             <template slot-scope="scope">

  498.               {{ (scope.row.fullRecordRate || 0) + "%" }}

  499.             </template>

  500.           </el-table-column>

  501.           <el-table-column prop="snippetRecordQuantity" label="部分录音" align="center">

  502.           </el-table-column>

  503.           <el-table-column prop="noRecordQuantity" label="未录音" align="center">

  504.           </el-table-column>

  505.           <el-table-column prop="normalShutdownQuantity" label="正常关机次数" align="center">

  506.           </el-table-column>

  507.           <el-table-column prop="lowElectricityQuantity" label="低电关机次数" align="center">

  508.           </el-table-column>

  509.           <el-table-column prop="abnormalShutdownQuantity" label="异常关机次数" align="center">

  510.           </el-table-column>

  511.           <el-table-column v-if="equ_ed_online" prop="" label="操作" fixed="right" width="200" align="center">

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

  513.               <el-button @click.native.prevent="goinfo(row, 0)" type="text" size="small">在线记录</el-button>

  514.               <el-button @click.native.prevent="goinfo(row, 1)" type="text" size="small">指派记录</el-button>

  515.             </template>

  516.           </el-table-column>

  517.         </el-table>

  518.       </template>

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

  520.         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"

  521.           :current-page="page.pageNum" :page-sizes="[10, 30, 50]" :page-size="page.pageSize"

  522.           layout="total, sizes, prev, pager, next, jumper" :total="page.total">

  523.         </el-pagination>

  524.       </div>

  525.     </div>

  526. 

  527.     <div class="tablebox" v-if="selectTime1">

  528.       <template>

  529.         <el-table :data="compareList" style="width: 100%" height="640" :header-cell-style="{background:'#F5F7FA',color:'#333333'}">

  530.           <el-table-column prop="name" label="时间" align="center">

  531.           </el-table-column>

  532.           <el-table-column prop="time" label="时段一" align="center">

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

  534.               <span v-if="compareFlag == 4 || compareFlag == 7 || compareFlag == 2">

  535.                 {{ row.time }}%</span>

  536.               <span v-else> {{ row.time }}</span>

  537.             </template>

  538.           </el-table-column>

  539.           <el-table-column prop="time1" label="时段二" align="center">

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

  541.               <span v-if="compareFlag == 4 || compareFlag == 7 || compareFlag == 2">

  542.                 {{ row.time1 }}%</span>

  543.               <span v-else> {{ row.time1 }}</span>

  544.             </template>

  545.           </el-table-column>

  546.           <el-table-column prop="time2" label="变化" align="center">

  547.             <template slot-scope="scope">

  548.               <span :style="

  549.                 scope.row.time2.substring(0, 1) == '-' ||

  550.                   scope.row.time2.substring(0, 1) == '0'

  551.                   ? 'color:green;'

  552.                   : 'color:red;'

  553.               ">{{ scope.row.time2 }}</span>

  554.             </template>

  555.           </el-table-column>

  556.         </el-table>

  557.       </template>

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

  559.         <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="pageSize"

  560.           :page-sizes="[10, 30, 50]" :page-size="pageNum" layout="total, sizes, prev, pager, next, jumper"

  561.           :total="total">

  562.         </el-pagination>

  563.       </div>

  564.     </div>

  565.   </div>

  566. </template>

  567. 

  568. <script>

  569. import * as echarts from "echarts";

  570. import { mapGetters } from "vuex";

  571. import { exportMethodPost } from "@/util/util";

  572. import colorTheme from "@/util/theme.color"

  573. export default {

  574.   data() {

  575.     return {

  576.       houseId: "",

  577.       timeType: 0,

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

  579.       selValue:

  580.         localStorage.getItem("orgType") == 0

  581.           ? "0"

  582.           : localStorage.getItem("orgType") == 1

  583.             ? "1"

  584.             : "2",

  585.       time: "",

  586.       compareFlag: "0",

  587.       selectTime: "",

  588.       selectTime1: "",

  589.       customtime: [],

  590.       tableData: [],

  591.       currentPage4: 1,

  592.       currentPage3: 1,

  593.       checked: false,

  594.       houseList: [],

  595.       compareList: [],

  596.       flag: false,

  597.       page: {

  598.         pageNum: 1,

  599.         pageSize: 10,

  600.         openTime: "",

  601.         closeTime: "",

  602.         houseName: "",

  603.         accountName: "",

  604.         imei: "",

  605.         total: 10,

  606.         recording: "",

  607.       },

  608.       pickerOptions: {

  609.         disabledDate(time) {

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

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

  612.         },

  613.       },

  614.       details: {

  615.         equipmentQuantity: "",

  616.         onlineQuantity: "",

  617.         onlineRate: "",

  618.         activeQuantity: "",

  619.         activeRate: "",

  620.         assignQuantity: "",

  621.         normalRecordQuantity: "",

  622.         fullRecordRate: "",

  623.         snippetRecordQuantity: "",

  624.         noRecordQuantity: "",

  625.         normalShutdownQuantity: "",

  626.         lowElectricityQuantity: "",

  627.         abnormalShutdownQuantity: "",

  628.       },

  629.       details1: {

  630.         equipmentQuantity: "",

  631.         onlineQuantity: "",

  632.         onlineRate: "",

  633.         activeQuantity: "",

  634.         activeRate: "",

  635.         assignQuantity: "",

  636.         normalRecordQuantity: "",

  637.         fullRecordRate: "",

  638.         snippetRecordQuantity: "",

  639.         noRecordQuantity: "",

  640.         normalShutdownQuantity: "",

  641.         lowElectricityQuantity: "",

  642.         abnormalShutdownQuantity: "",

  643.       },

  644.       compare: {

  645.         equipmentQuantity: "",

  646.         onlineQuantity: "",

  647.         onlineRate: "",

  648.         activeQuantity: "",

  649.         activeRate: "",

  650.         assignQuantity: "",

  651.         normalRecordQuantity: "",

  652.         fullRecordRate: "",

  653.         snippetRecordQuantity: "",

  654.         noRecordQuantity: "",

  655.         normalShutdownQuantity: "",

  656.         lowElectricityQuantity: "",

  657.         abnormalShutdownQuantity: "",

  658.       },

  659.       pageSize: 30,

  660.       pageNum: 1,

  661.       total: 10,

  662.       allCompare: {},

  663.       options: [

  664.         {

  665.           value: "0",

  666.           label: "无录音",

  667.         },

  668.         {

  669.           value: "1",

  670.           label: "部分录音",

  671.         },

  672.         {

  673.           value: "2",

  674.           label: "完整录音",

  675.         },

  676.       ],

  677.       options2: [

  678.         {

  679.           label: "正式数据",

  680.           value: "0,1",

  681.         },

  682.         {

  683.           label: "测试数据",

  684.           value: "2,3",

  685.         },

  686.       ],

  687.       houseTypes: "0,1",

  688.       odata1: false,

  689.       odata2: false,

  690.     };

  691.   },

  692.   computed: {

  693.     ...mapGetters(["permissions"]),

  694.   },

  695.   created() {

  696.     this.equ_ed_online = this.permissions["equ_ed_online"];

  697.     this.equ_ed_download = this.permissions["equ_ed_download"];

  698.   },

  699.   mounted() {

  700.     // return;

  701.     let theRequest = this.$route.query;

  702.     console.log(theRequest, '123') //此时的theRequest就是我们需要的参数；

  703.     if (theRequest.houseId) {

  704.       this.flag = true;

  705.       this.houseId = theRequest.houseId;

  706.       this.timeType = theRequest.timeType || -1;

  707.       this.selValue = "2"

  708.     } else {

  709.       this.flag = false;

  710.       // console.log(1);

  711.       this.timeType = 4;

  712.     }

  713.     if (theRequest.startDate) {

  714.       this.page.openTime = theRequest.startDate;

  715.       this.page.closeTime = theRequest.endDate;

  716.       this.customtime = [theRequest.startDate, theRequest.endDate];

  717.       // console.log(this.customtime);

  718.       this.$forceUpdate();

  719.     }

  720.     this.getHouseList();

  721.     // this.customtime=[] ;

  722.     this.tableData = [];

  723.     this.tableData1 = [];

  724.     // this.getTableList()

  725.   },

  726.   methods: {

  727.     downLoad() {

  728.       // this.searchForm

  729.       let obj = {

  730.         startDate: this.page.openTime,

  731.         endDate: this.page.closeTime,

  732.         agentId:

  733.           localStorage.getItem("orgType") == 1

  734.             ? localStorage.getItem("agentId")

  735.             : this.selValue == 0

  736.               ? this.houseId

  737.               : null,

  738.         orgCode:

  739.           localStorage.getItem("orgType") == 2

  740.             ? localStorage.getItem("orgCode")

  741.             : this.selValue == 1

  742.               ? this.houseId

  743.               : null,

  744.         houseId:

  745.           localStorage.getItem("orgType") == 3

  746.             ? localStorage.getItem("houseId")

  747.             : this.selValue == 2

  748.               ? this.houseId

  749.               : null,

  750.         timeType: this.timeType,

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

  752.         queryOrgType: this.selValue / 1 + 1,

  753.         houseTypes: this.houseTypes,

  754.       };

  755.       obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);

  756.       exportMethodPost(

  757.         "autoSR/zk/equipment/detail/equipmentCountDetailExport",

  758.         "设备使用统计",

  759.         obj

  760.       );

  761.     },

  762.     sysChange() {

  763.       this.selValue = "0";

  764.       this.choicValue = "";

  765.       this.timeType = 4;

  766.       this.houseId = "";

  767.       this.getHouseList();

  768.     },

  769.     selChange() {

  770.       this.choicValue = "";

  771.       this.timeType = 4;

  772.       this.houseId = "";

  773.       this.getHouseList();

  774.       // this.getTableList();

  775.       // this.getdetail();

  776.       // // 获取对比列表

  777.       // this.getcompare();

  778.     },

  779.     // 没有对比时的折线图

  780.     getNoCompare() {

  781.       this.compareFlag = 0;

  782.       let obj = {

  783.         // current: this.pageNum,

  784.         // pageSize: this.pageNum,

  785.         startDate: this.page.openTime,

  786.         endDate: this.page.closeTime,

  787.         agentId:

  788.           localStorage.getItem("orgType") == 1

  789.             ? localStorage.getItem("agentId")

  790.             : this.selValue == 0

  791.               ? this.houseId

  792.               : null,

  793.         orgCode:

  794.           localStorage.getItem("orgType") == 2

  795.             ? localStorage.getItem("orgCode")

  796.             : this.selValue == 1

  797.               ? this.houseId

  798.               : null,

  799.         houseId:

  800.           localStorage.getItem("orgType") == 3

  801.             ? localStorage.getItem("houseId")

  802.             : this.selValue == 2

  803.               ? this.houseId

  804.               : null,

  805.         timeType: this.timeType,

  806.         contrastStartDate: this.selectTime,

  807.         contrastEndDate: this.selectTime1,

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

  809.         queryOrgType: this.selValue / 1 + 1,

  810.         houseTypes: this.houseTypes,

  811.       };

  812.       obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);

  813.       obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);

  814.       axios({

  815.         url: `autoSR/zk/equipment/detail/usageTrendContrast`,

  816.         method: "get",

  817.         params: obj,

  818.       }).then((res) => {

  819.         console.log(res);

  820.       });

  821.     },

  822.     radioChange() {

  823.       this.selectTime = "";

  824.       this.selectTime1 = "";

  825.       this.compareList = [];

  826.       this.$set(this, "time", null);

  827.       this.getcompare();

  828.     },

  829.     goinfo(row, idx) {

  830.       console.log(row, "信息");

  831.       this.$router.push({

  832.         path: "/Equipment/equipmentOnlineRecordList",

  833.         query: {

  834.           houseId: this.houseId,

  835.           startDate: row.createTime,

  836.           endDate: row.createTime,

  837.           flag: idx,

  838.         },

  839.       });

  840.     },

  841.     compareChange(idx, str) {

  842.       // if (!this.selectTime1) return;

  843.       this.compareFlag = idx;

  844.       this.tabChange(idx, str);

  845.     },

  846.     timeChange(e) {

  847.       this.selectTime = "";

  848.       this.selectTime1 = "";

  849.       this.pageNum = 1;

  850.       // this.page.pageNum=1

  851.       this.timeSelect(e);

  852.       this.getdetail();

  853.       this.getcompare();

  854.     },

  855.     timeSelect(e) {

  856.       console.log(this.$refs.time);

  857.       if (this.timeType == -1) {

  858.         this.selectTime = e;

  859.         this.selectTime1 = this.timestampToTime(

  860.           new Date(e).getTime() +

  861.           new Date(this.page.closeTime).getTime() -

  862.           new Date(this.page.openTime).getTime()

  863.         );

  864.       } else {

  865.         //	获取今天昨天近一周

  866.         //	获取一天的时间戳

  867.         let num = 24 * 3600 * 1000;

  868.         //	获取当前时间戳转换为日期格式

  869.         if (this.timeType == 4) {

  870.           num = 24 * 3600 * 1000 * 6;

  871.         }

  872.         if (this.timeType == 5) {

  873.           num = 24 * 3600 * 1000 * 14;

  874.         }

  875.         if (this.timeType == 6) {

  876.           num = 24 * 3600 * 1000 * 29;

  877.         }

  878.         this.selectTime = e;

  879.         this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);

  880.       }

  881.     },

  882.     timestampToTime(timestamp) {

  883.       var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000

  884.       var yyyy = date.getFullYear() + "-";

  885. 

  886.       var MM =

  887.         (date.getMonth() + 1 < 10

  888.           ? "0" + (date.getMonth() + 1)

  889.           : date.getMonth() + 1) + "-";

  890. 

  891.       var dd =

  892.         (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

  893. 

  894.       return yyyy + MM + dd;

  895.     },

  896.     change() {

  897.       this.checked = false;

  898.       this.selectTime = "";

  899.       this.selectTime1 = "";

  900.       this.getTableList();

  901.       this.getdetail();

  902.       // 获取对比列表

  903.       this.getcompare();

  904.     },

  905.     show() {

  906.       this.$refs.time.pickerVisible = true;

  907.     },

  908.     //时间补0

  909.     Zeropadding(s) {

  910.       return s < 10 ? "0" + s : s;

  911.     },

  912.     tabtimetap(i) {

  913.       this.timeType = i;

  914.       // this.getTableList()

  915.       this.checked = false;

  916.       this.selectTime = "";

  917.       this.selectTime1 = "";

  918.       this.pageNum = 1;

  919.       this.page.pageNum = 1;

  920.       //给时间选择器赋值

  921.       let num = 24 * 3600 * 1000;

  922.       //	获取当前时间戳转换为日期格式

  923.       if (this.timeType == 4) {

  924.         num = 24 * 3600 * 1000 * 7;

  925.       }

  926.       if (this.timeType == 5) {

  927.         num = 24 * 3600 * 1000 * 15;

  928.       }

  929.       if (this.timeType == 6) {

  930.         num = 24 * 3600 * 1000 * 30;

  931.       }

  932.       console.log('ashjdklasjkldasjdlks')

  933.       if (i != -1) {

  934.         this.customtime = [

  935.           this.timestampToTime(new Date().getTime() - num),

  936.           this.timestampToTime(new Date().getTime() - 24 * 3600 * 1000),

  937.         ];

  938.       }

  939. 

  940.       this.$set(this, "time", null);

  941.       this.getTableList();

  942.       this.getdetail();

  943.       this.getcompare();

  944.     },

  945.     screening() {

  946.       this.page.pageNum = 1;

  947.       this.page.pageSize = 10;

  948.       this.getTableList();

  949.     },

  950.     empty() {

  951.       this.page = {

  952.         pageNum: 1,

  953.         pageSize: 10,

  954.         openTime: "",

  955.         closeTime: "",

  956.         houseName: "",

  957.         accountName: "",

  958.         imei: "",

  959.         total: "",

  960.       };

  961.       this.customtime = "";

  962.       this.getTableList();

  963.     },

  964.     //时间选择

  965.     confirmtime(e) {

  966.       this.timeType = "-1";

  967.       this.checked = false;

  968.       this.selectTime = "";

  969.       this.pageNum = 1;

  970.       this.page.pageNum = 1;

  971.       this.selectTime1 = "";

  972.       this.$set(this, "time", null);

  973.       console.log(e);

  974.       if (!e) return;

  975.       this.page.openTime = this.customtime[0];

  976.       this.page.closeTime = this.customtime[1];

  977.       this.getTableList();

  978.       this.getdetail();

  979.       this.getcompare();

  980.     },

  981.     //获取项目数据

  982.     getHouseList() {

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

  984.         this.$api.api

  985.           .findMyOrg({

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

  987.             agentId: localStorage.getItem("agentId"),

  988.           })

  989.           .then((res) => {

  990.             this.houseList = res.data;

  991.             this.tabtimetap(this.timeType);

  992.             this.getTableList();

  993.           });

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

  995.         this.$api.api

  996.           .findHouseByUser({

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

  998.             houseId: localStorage.getItem("houseId"),

  999.             houseTypes: this.houseTypes,

  1000.           })

  1001.           .then((res) => {

  1002.             this.houseList = res.data;

  1003.             this.tabtimetap(this.timeType);

  1004.             this.getTableList();

  1005.           });

  1006.       } else {

  1007.         this.$api.api

  1008.           .findMyAgent({

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

  1010.           })

  1011.           .then((res) => {

  1012.             this.houseList = res.data;

  1013.             this.tabtimetap(this.timeType);

  1014.             this.getTableList();

  1015.           });

  1016.       }

  1017. 

  1018.       // this.$api.api.findHouseByUser({

  1019.       //     orgType: localStorage.getItem("orgType"),

  1020.       //     agentId: localStorage.getItem("agentId"),

  1021.       //   })

  1022.       //   .then((res) => {

  1023.       //     this.houseList = res.data;

  1024.       //     if (!this.flag) {

  1025.       //       if (localStorage.getItem("orgType") == 3) {

  1026.       //         this.houseId = localStorage.getItem("houseId");

  1027.       //       } else {

  1028.       //         this.houseId = res.data[0].id;

  1029.       //       }

  1030.       //     }

  1031.       //     this.tabtimetap(this.timeType);

  1032.       //     this.getTableList();

  1033.       //   });

  1034.     },

  1035.     handleSizeChange(val) {

  1036.       console.log("每页条" + val);

  1037.       this.page.pageSize = val;

  1038.       this.getTableList();

  1039.     },

  1040.     handleCurrentChange(val) {

  1041.       console.log("当前页" + val);

  1042.       this.page.pageNum = val;

  1043.       this.getTableList();

  1044.     },

  1045.     handleSizeChange1(val) {

  1046.       console.log("每页条" + val);

  1047.       this.pageSize = val;

  1048.       this.getcompare();

  1049.     },

  1050.     handleCurrentChange1(val) {

  1051.       console.log("当前页" + val);

  1052.       this.pageNum = val;

  1053.       this.getcompare();

  1054.     },

  1055.     //获取对比列表接口

  1056.     getcompare() {

  1057.       this.compareFlag = 0;

  1058.       let obj = {

  1059.         current: this.pageNum,

  1060.         size: this.pageSize,

  1061.         startDate: this.page.openTime,

  1062.         endDate: this.page.closeTime,

  1063.         agentId:

  1064.           localStorage.getItem("orgType") == 1

  1065.             ? localStorage.getItem("agentId")

  1066.             : this.selValue == 0

  1067.               ? this.houseId

  1068.               : null,

  1069.         orgCode:

  1070.           localStorage.getItem("orgType") == 2

  1071.             ? localStorage.getItem("orgCode")

  1072.             : this.selValue == 1

  1073.               ? this.houseId

  1074.               : null,

  1075.         houseId:

  1076.           localStorage.getItem("orgType") == 3

  1077.             ? localStorage.getItem("houseId")

  1078.             : this.selValue == 2

  1079.               ? this.houseId

  1080.               : null,

  1081.         timeType: this.timeType,

  1082.         contrastStartDate: this.selectTime,

  1083.         contrastEndDate: this.selectTime1,

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

  1085.         queryOrgType: this.selValue / 1 + 1,

  1086.         houseTypes: this.houseTypes,

  1087.       };

  1088.       obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);

  1089.       axios({

  1090.         url: `autoSR/zk/equipment/detail/usageTrendContrast`,

  1091.         method: "get",

  1092.         params: obj,

  1093.       })

  1094.         .then((res) => {

  1095.           console.log(res, "获取数据");

  1096.           this.allCompare = res;

  1097.           this.total = res.data.firstPage.total;

  1098.           //	数据处理

  1099.           let arr = [];

  1100.           if (this.pageNum == 1) {

  1101.             let obj1 = {

  1102.               name: "项目合计",

  1103.               first: this.details,

  1104.               second: this.details1,

  1105.               contrast: res.data.total,

  1106.               // time:'',

  1107.               // time1:''

  1108.             };

  1109.             arr.push(obj1);

  1110.           }

  1111.           res.data.firstPage.records.map((item, index) => {

  1112.             let obj = {};

  1113.             //当他为0的时候

  1114.             obj.name =

  1115.               res.data.firstPage.records[index].createTime.substring(5, 10) +

  1116.               "VS" +

  1117.               res.data.secondPage.records[index].createTime.substring(5, 10);

  1118.             obj.first = res.data.firstPage.records[index];

  1119.             obj.second = res.data.secondPage.records[index];

  1120.             obj.contrast = res.data.contrast[index];

  1121.             // obj.time=''

  1122.             // obj.time1=''

  1123.             arr.push(obj);

  1124.           });

  1125.           this.compareList = arr;

  1126.           // console.log(this.compareList,'123')

  1127.           this.tabChange(0, "设备总数");

  1128.         })

  1129.         .catch((err) => {

  1130.           // console.log(err)

  1131.           this.compareList = [];

  1132.           this.tabChange(0, "设备总数");

  1133.         });

  1134.     },

  1135.     //处理数据

  1136.     tabChange(idx, str1) {

  1137.       //首先获取到给定的标志，对数据进行操作和赋值

  1138.       //判断情况

  1139.       // 	console.log(idx)

  1140.       let str = "";

  1141.       if (idx == 0) {

  1142.         str = "equipmentQuantity";

  1143.       }

  1144.       if (idx == 1) {

  1145.         str = "onlineQuantity";

  1146.       }

  1147.       if (idx == 2) {

  1148.         str = "onlineRate";

  1149.       }

  1150.       if (idx == 3) {

  1151.         str = "activeQuantity";

  1152.       }

  1153.       if (idx == 4) {

  1154.         str = "activeRate";

  1155.       }

  1156.       if (idx == 5) {

  1157.         str = "assignQuantity";

  1158.       }

  1159.       if (idx == 6) {

  1160.         str = "normalRecordQuantity";

  1161.       }

  1162.       if (idx == 7) {

  1163.         str = "fullRecordRate";

  1164.       }

  1165.       if (idx == 8) {

  1166.         str = "snippetRecordQuantity";

  1167.       }

  1168.       if (idx == 9) {

  1169.         str = "noRecordQuantity";

  1170.       }

  1171.       if (idx == 10) {

  1172.         str = "normalShutdownQuantity";

  1173.       }

  1174.       if (idx == 11) {

  1175.         str = "lowElectricityQuantity";

  1176.       }

  1177.       if (idx == 12) {

  1178.         str = "abnormalShutdownQuantity";

  1179.       }

  1180.       //	获取到数据后对数据进行操作

  1181.       //	循环大数组，赋值

  1182.       if (this.selectTime1) {

  1183.         let timeDate = [];

  1184.         let arr1 = [];

  1185.         let arr2 = [];

  1186.         this.compareList.map((item, index) => {

  1187.           item.time = item.first[str];

  1188.           item.time1 = item.second[str];

  1189.           item.time2 = item.contrast[str] + "";

  1190. 

  1191.           // if (index > 0) {

  1192.           //   timeDate.push(item.name);

  1193.           //   arr1.push(item.first[str]);

  1194.           //   arr2.push(item.second[str]);

  1195.           // }

  1196.         });

  1197.         this.allCompare.data.first.map((item, idx) => {

  1198.           timeDate.push(

  1199.             item.createTime.substring(5) +

  1200.             "VS" +

  1201.             this.allCompare.data.second[idx].createTime.substring(5)

  1202.           );

  1203.           arr1.push(item[str]);

  1204.           arr2.push(this.allCompare.data.second[idx][str]);

  1205.         });

  1206.         this.compareList = Object.assign([], this.compareList);

  1207.         this.$forceUpdate();

  1208.         var chartDom = document.getElementById("compare");

  1209.         echarts.init(chartDom).dispose();

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

  1211.         var option;

  1212. 

  1213.         option = {

  1214.           color: colorTheme.colorArr,

  1215.           tooltip: {

  1216.             trigger: "axis",

  1217.           },

  1218.           legend: {

  1219.             data: ["时段一", "对比时段"],

  1220.             bottom: "10",

  1221.           icon:"roundRect"

  1222.           },

  1223.           grid: {

  1224.             left: 10,

  1225.             right: 10,

  1226.           bottom:18,

  1227.             containLabel: true,

  1228.           },

  1229.           xAxis: {

  1230.             type: "category",

  1231.             data: timeDate,

  1232.             axisLabel: {

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

  1234.               textStyle: {

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

  1236.               },

  1237.             },

  1238.             axisLine: {

  1239.               lineStyle: {

  1240.                 type: "solid",

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

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

  1243.               },

  1244.             },

  1245.           },

  1246.           yAxis: {

  1247.             type: "value",

  1248.             splitNumber: 4,

  1249.             axisLabel: {

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

  1251.               textStyle: {

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

  1253.               },

  1254.             },

  1255.             axisLine: {

  1256.               lineStyle: {

  1257.                 ype: "solid",

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

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

  1260.               },

  1261.             },

  1262.             splitLine: {

  1263.               lineStyle: {

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

  1265.               },

  1266.             },

  1267.             axisTick: {

  1268.               //y轴刻度线

  1269.               show: false,

  1270.             },

  1271.           },

  1272.           series: [

  1273.             {

  1274.               name: "时段一",

  1275.               data: arr1,

  1276.               type: "line",

  1277.               smooth: true,

  1278.             },

  1279.             {

  1280.               name: "对比时段",

  1281.               data: arr2,

  1282.               type: "line",

  1283.               smooth: true,

  1284.             },

  1285.           ],

  1286.         };

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

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

  1289.           myChart.resize();

  1290.         });

  1291.       } else {

  1292.         // console.log(this.allCompare,"第一种");

  1293.         let timeDate = [];

  1294.         let arr1 = [];

  1295.         this.allCompare.data.first.map((item) => {

  1296.           timeDate.push(item.createTime.substring(5));

  1297.           arr1.push(item[str]);

  1298.         });

  1299.         // console.log(timeDate,arr1);

  1300.         var chartDom = document.getElementById("compare");

  1301.         echarts.init(chartDom).dispose();

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

  1303.         var option;

  1304.         option = {

  1305.           color: colorTheme.colorArr[0],

  1306.           tooltip: {

  1307.             trigger: "axis",

  1308.           },

  1309.           legend: {

  1310.             data: [str1],

  1311.             top: "10",

  1312.           icon:"roundRect"

  1313.           },

  1314.           grid: {

  1315.             left: 10,

  1316.             right: 10,

  1317.           bottom:18,

  1318.             containLabel: true,

  1319.           },

  1320.           xAxis: {

  1321.             type: "category",

  1322.             data: timeDate,

  1323.             axisLabel: {

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

  1325.               textStyle: {

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

  1327.               },

  1328.             },

  1329.             axisLine: {

  1330.               lineStyle: {

  1331.                 type: "solid",

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

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

  1334.               },

  1335.             },

  1336.           },

  1337.           yAxis: {

  1338.             type: "value",

  1339.             splitNumber: 4,

  1340.             axisLabel: {

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

  1342.               textStyle: {

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

  1344.               },

  1345.             },

  1346.             axisLine: {

  1347.               lineStyle: {

  1348.                 ype: "solid",

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

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

  1351.               },

  1352.             },

  1353.             splitLine: {

  1354.               lineStyle: {

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

  1356.               },

  1357.             },

  1358.             axisTick: {

  1359.               //y轴刻度线

  1360.               show: false,

  1361.             },

  1362.           },

  1363.           series: [

  1364.             {

  1365.               name: str1,

  1366.               data: arr1,

  1367.               type: "line",

  1368.               smooth: true,

  1369.               areaStyle: {

  1370.                 color: new echarts.graphic.LinearGradient(

  1371.                   0, 0, 0, 1,

  1372.                   [

  1373.                     { offset: 0, color: colorTheme.colorArr[0] },

  1374.                     { offset: 1, color: "#fff" }

  1375.                   ]

  1376.                 ),

  1377.                 opacity: 0.1

  1378.               }

  1379.             },

  1380.           ],

  1381.         };

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

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

  1384.           myChart.resize();

  1385.         });

  1386.       }

  1387.     },

  1388.     //获取统计数据

  1389.     getdetail() {

  1390.       let obj = {

  1391.         startDate: this.page.openTime,

  1392.         endDate: this.page.closeTime,

  1393.         agentId:

  1394.           localStorage.getItem("orgType") == 1

  1395.             ? localStorage.getItem("agentId")

  1396.             : this.selValue == 0

  1397.               ? this.houseId

  1398.               : null,

  1399.         orgCode:

  1400.           localStorage.getItem("orgType") == 2

  1401.             ? localStorage.getItem("orgCode")

  1402.             : this.selValue == 1

  1403.               ? this.houseId

  1404.               : null,

  1405.         houseId:

  1406.           localStorage.getItem("orgType") == 3

  1407.             ? localStorage.getItem("houseId")

  1408.             : this.selValue == 2

  1409.               ? this.houseId

  1410.               : null,

  1411.         timeType: this.timeType,

  1412.         contrastStartDate: this.selectTime,

  1413.         contrastEndDate: this.selectTime1,

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

  1415.         queryOrgType: this.selValue / 1 + 1,

  1416.         houseTypes: this.houseTypes,

  1417.       };

  1418.       obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);

  1419.       axios({

  1420.         url: `autoSR/zk/equipment/detail/usageTrend`,

  1421.         method: "get",

  1422.         params: obj,

  1423.       }).then((res) => {

  1424.         // console.log(res)

  1425.         if (res.code == 0) {

  1426.           this.details = res.data.first;

  1427.           if (res.data.second) {

  1428.             this.details1 = res.data.second;

  1429.             this.compare = res.data.contrast;

  1430.           }

  1431.           let itemobj = {

  1432.             objopts: [

  1433.               {

  1434.                 value: this.details.normalRecordQuantity || 0,

  1435.                 name: "完整录音",

  1436.               },

  1437.               {

  1438.                 value: this.details.snippetRecordQuantity || 0,

  1439.                 name: "部分录音",

  1440.               },

  1441.               { value: this.details.noRecordQuantity || 0, name: "未录音" },

  1442.             ],

  1443.           };

  1444.           this.odata1 = itemobj.objopts.every(i => {

  1445.             if (i.value == 0) {

  1446.               return true

  1447.             }

  1448.           })

  1449.           let arr = itemobj.objopts.filter((item) => {

  1450.             return item.value;

  1451.           });

  1452.           // console.log(arr,'123')

  1453.           if (arr.length > 0) {

  1454.             itemobj.objopts = arr;

  1455.           }

  1456.           let itemobj1 = {

  1457.             objopts: [

  1458.               {

  1459.                 value: this.details.normalShutdownQuantity || 0,

  1460.                 name: "正常关机",

  1461.               },

  1462.               {

  1463.                 value: this.details.lowElectricityQuantity || 0,

  1464.                 name: "低电关机",

  1465.               },

  1466.               {

  1467.                 value: this.details.abnormalShutdownQuantity || 0,

  1468.                 name: "异常关机",

  1469.               },

  1470.             ],

  1471.           };

  1472.           this.odata2 = itemobj1.objopts.every(i => {

  1473.             if (i.value == 0) {

  1474.               return true

  1475.             }

  1476.           })

  1477.           let arr1 = itemobj1.objopts.filter((item) => {

  1478.             return item.value;

  1479.           });

  1480.           if (arr1.length > 0) {

  1481.             itemobj1.objopts = arr1;

  1482.           }

  1483.           var myChart = echarts.init(document.getElementById("mane"));

  1484.           var myChart1 = echarts.init(document.getElementById("mane2"));

  1485.           var option = {

  1486.             color: colorTheme.colorArr,

  1487.             tooltip: {

  1488.               trigger: "item",

  1489.             },

  1490.             legend: {

  1491.               bottom: "1%",

  1492.           icon:"roundRect",

  1493.               left: "center",

  1494.             },

  1495.             series: [

  1496.               {

  1497.                 name: "",

  1498.                 type: "pie",

  1499.                 radius: ["48%", "70%"],

  1500.                 avoidLabelOverlap: false,

  1501.                 data: itemobj.objopts,

  1502.               },

  1503.             ],

  1504.           };

  1505.           var option1 = {

  1506.             color: colorTheme.colorArr,

  1507.             tooltip: {

  1508.               trigger: "item",

  1509.             },

  1510.             legend: {

  1511.               bottom: "1%",

  1512.           icon:"roundRect",

  1513.               left: "center",

  1514.             },

  1515.             series: [

  1516.               {

  1517.                 name: "",

  1518.                 type: "pie",

  1519.                 radius: ["48%", "70%"],

  1520.                 avoidLabelOverlap: false,

  1521.                 data: itemobj1.objopts,

  1522.               },

  1523.             ],

  1524.           };

  1525.           myChart.setOption(option);

  1526.           myChart1.setOption(option1);

  1527.         }

  1528.       });

  1529.     },

  1530.     //获取table数据、

  1531.     getTableList() {

  1532.       var url = "";

  1533.       this.tableData = [];

  1534.       let obj = {

  1535.         current: this.page.pageNum,

  1536.         pageSize: this.page.pageSize,

  1537.         startDate: this.page.openTime,

  1538.         endDate: this.page.closeTime,

  1539.         agentId:

  1540.           localStorage.getItem("orgType") == 1

  1541.             ? localStorage.getItem("agentId")

  1542.             : this.selValue == 0

  1543.               ? this.houseId

  1544.               : null,

  1545.         orgCode:

  1546.           localStorage.getItem("orgType") == 2

  1547.             ? localStorage.getItem("orgCode")

  1548.             : this.selValue == 1

  1549.               ? this.houseId

  1550.               : null,

  1551.         houseId:

  1552.           localStorage.getItem("orgType") == 3

  1553.             ? localStorage.getItem("houseId")

  1554.             : this.selValue == 2

  1555.               ? this.houseId

  1556.               : null,

  1557.         timeType: this.timeType,

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

  1559.         queryOrgType: this.selValue / 1 + 1,

  1560.         houseTypes: this.houseTypes,

  1561.       };

  1562.       obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);

  1563.       axios({

  1564.         url: `autoSR/zk/equipment/detail/equipmentCountDetail`,

  1565.         method: "get",

  1566.         params: obj,

  1567.       }).then((res) => {

  1568.         if (res.code == 0) {

  1569.           res.data.records.forEach((item, index) => {

  1570.             item.index = index + 1;

  1571.           });

  1572.           this.tableData = res.data.records;

  1573.           this.page.total = res.data.total;

  1574.         }

  1575.       });

  1576.     },

  1577.   },

  1578. };

  1579. </script>

  1580. 

  1581. <style lang='less' scoped>

  1582. .box-center {

  1583.   width: 100%;

  1584.   padding: 5px 15px 20px;

  1585.   min-width: 1000px;

  1586. }

  1587. 

  1588. .toptimeqhuan {

  1589.   width: 230px;

  1590.   height: 32px;

  1591.   background: #ffffff;

  1592.   border-radius: 4px;

  1593.   border: 1px solid #e0e0e0;

  1594.   display: flex;

  1595.   align-items: center;

  1596.   overflow: hidden;

  1597.   cursor: pointer;

  1598.   margin-right: 10px;

  1599. }

  1600. 

  1601. .toptimeqhuan div {

  1602.   flex: 1;

  1603.   text-align: center;

  1604.   line-height: 32px;

  1605.   font-size: 16px;

  1606. }

  1607. 

  1608. .tophove {

  1609.   color: #ffffff;

  1610.   background: #2671e2;

  1611. }

  1612. 

  1613. .titlebox1 {

  1614.   // width: 100%;

  1615.   width: calc(100% - 270px);

  1616.   position: fixed;

  1617.   z-index: 999;

  1618.   margin-top: -16px;

  1619.   background: #ffffff;

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

  1621.   box-shadow: 0px 0px 10px 0px #dadada;

  1622.   border-radius: 8px;

  1623.   padding-bottom: 18px;

  1624. }

  1625. 

  1626. .titlebox {

  1627.   width: 100%;

  1628.   background: #ffffff;

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

  1630.   border-radius: 8px;

  1631.   margin-top: 120px;

  1632.   padding: 10px 0;

  1633. }

  1634. 

  1635. .tablebox {

  1636.   width: 100%;

  1637.   background: #ffffff;

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

  1639.   border-radius: 8px;

  1640.   margin-top: 10px;

  1641.   padding: 15px;

  1642. }

  1643. 

  1644. .kapiannox {

  1645.   width: 98%;

  1646.   margin-top: 20px;

  1647. }

  1648. 

  1649. .tabcard {

  1650.   display: grid !important;

  1651.   grid-template-columns: repeat(4, 24%);

  1652.   grid-column-gap: 12px;

  1653.   grid-row-gap: 18px;

  1654. 

  1655.   /deep/ .el-card__body {

  1656.     padding: 8px;

  1657.     cursor: pointer;

  1658.   }

  1659. 

  1660.   .text1 {

  1661.     height: 16px;

  1662.     font-size: 16px;

  1663.     font-weight: 400;

  1664.     line-height: 16px;

  1665.     text-indent: 20px;

  1666.     margin-top: 10px;

  1667.     color: #666666;

  1668.             display: flex;

  1669.             align-items: center;

  1670.   }

  1671. 

  1672.   .text2 {

  1673.     height: 32px;

  1674.     font-size: 32px;

  1675.     font-weight: normal;

  1676.     line-height: 32px;

  1677.     text-indent: 20px;

  1678.     margin-top: 10px;

  1679.   }

  1680. 

  1681.   .text3 {

  1682.     font-size: 14px;

  1683.     margin: 10px 0;

  1684.     width: 100%;

  1685.     text-indent: 20px;

  1686.     display: flex;

  1687.     align-items: center;

  1688. 

  1689. 

  1690.     .textUp {

  1691.       font-size: 14px;

  1692.       display: flex;

  1693.       font-weight: 600;

  1694.       color: rgba(231, 72, 60, 1);

  1695.       background: rgba(253, 240, 239, 1);

  1696.       align-items: center;

  1697.       padding: 3px 12px 3px 0;

  1698.       border-radius: 3px;

  1699.       margin-left: 8px;

  1700. 

  1701.       .up {

  1702.         font-size: 14px;

  1703.         display: block;

  1704.         width: 20px;

  1705.         height: 15px;

  1706.         background: url("../../../public/img/indexIcon/indexCardUp.png") no-repeat;

  1707.         background-size: 100%;

  1708.         margin-left: 8px;

  1709.       }

  1710.     }

  1711. 

  1712.     .textDown {

  1713.       font-size: 14px;

  1714.       display: flex;

  1715.       font-weight: 600;

  1716.       color: rgba(7, 183, 157, 1);

  1717.       background: rgba(235, 250, 246, 1);

  1718.       align-items: center;

  1719.       padding: 3px 12px 3px 0;

  1720.       border-radius: 3px;

  1721.       margin-left: 8px;

  1722. 

  1723.       .down {

  1724.         display: block;

  1725.         width: 20px;

  1726.         height: 15px;

  1727.         background: url("../../../public/img/indexIcon/indexCardDown.png") no-repeat;

  1728.         background-size: 100%;

  1729.         margin-left: 8px;

  1730.       }

  1731.     }

  1732.   }

  1733. 

  1734.   .tophovese {

  1735.     border: 1px solid #2671e2 !important;

  1736.     background: rgba(38, 113, 226, 0.04);

  1737.     color: #666 !important;

  1738.   }

  1739. }

  1740. 

  1741. .alllistbox {

  1742.   width: 98%;

  1743.   margin: 0 auto;

  1744.   display: flex;

  1745.   flex-wrap: wrap;

  1746. }

  1747. 

  1748. .alllist {

  1749.   width: 16.66%;

  1750.   border: 1px solid #e0e0e0;

  1751.   padding-bottom: 2px;

  1752.   padding-top: 4px;

  1753.   cursor: pointer;

  1754. }

  1755. 

  1756. .alllist-text1 {

  1757.   width: 100%;

  1758.   font-size: 16px;

  1759.   font-family: PingFangSC-Regular, PingFang SC;

  1760.   font-weight: 400;

  1761.   color: #333333;

  1762.   line-height: 26px;

  1763.   /*text-align: center;*/

  1764.   padding: 5px 10px;

  1765. }

  1766. 

  1767. .zgutteruo {

  1768.   width: 100%;

  1769.   padding-bottom: 20px;

  1770.   background: #ffffff;

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

  1772.   border-radius: 4px;

  1773. }

  1774. 

  1775. .zgutteruo-tit {

  1776.   width: 100%;

  1777.   height: 50px;

  1778.   line-height: 50px;

  1779.   font-size: 16px;

  1780.   color: #32363d;

  1781.   font-weight: 500;

  1782.   text-indent: 30px;

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

  1784. }

  1785. 

  1786. .active {

  1787.   background: #eef1f4;

  1788.   // border: 1px solid #2671E2;

  1789. }

  1790. 

  1791. .timeSel {

  1792.   margin-top: 8px;

  1793.   margin-left: 20px;

  1794.   border: 1px solid #ccc;

  1795.   padding: 0 5px;

  1796.   cursor: pointer;

  1797.   color: #606266;

  1798. }

  1799. 

  1800. .alllist-text2 {

  1801.   display: flex;

  1802.   justify-content: space-between;

  1803. }

  1804. 

  1805. .alllist-f1 {

  1806.   font-size: 22px;

  1807.   font-weight: bold;

  1808. }

  1809. 

  1810. .alllist-f2 {

  1811.   font-size: 12px;

  1812. }

  1813. 

  1814. .demonstration {

  1815.   line-height: 36px;

  1816. }

  1817. 

  1818. /deep/ .el-table__header-wrapper {

  1819.   thead {

  1820.     tr {

  1821.       th {

  1822.         background: #F5F7FA;

  1823.         color: #333333;

  1824.       }

  1825.     }

  1826.   }

  1827. }

  1828. .pop{

  1829.   display: inline-block;

  1830.   width: 18px;

  1831.   height: 18px;

  1832.   background: url('../../../public/img/pop.png') no-repeat;

  1833.   background-size: 100%;

  1834.   margin-left: 6px;

  1835. }

  1836. /deep/ .el-button--text{

  1837.   color: #2671E2;

  1838. }

  1839. /deep/ .el-button--primary{

  1840.   background: #2671E2 !important;

  1841.   border: 1px solid #2671E2 !important;

  1842. }

  1843. </style>