设备详情

src/main/java/com/imcs/admin/business/controller/BigScreenDetailController.java

@@ -1,24 +1,21 @@
 package com.imcs.admin.business.controller;
 
 import com.imcs.admin.business.service.BigScreenDetailService;
+import com.imcs.admin.common.PageParam;
 import com.imcs.admin.common.Result;
 import com.imcs.admin.db.service.JdbcService;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
 
-/*@RestController
+@RestController
 @RequestMapping("/bigScreen")
 public class BigScreenDetailController {
     @Resource
     private BigScreenDetailService bigScreenDetailService;
 
-    @RequestMapping("/detail/${id}")
-    public Result getDeviceDetail(@PathVariable Long id){
-        //bigScreenDetailService.getBigScreenDetail(id)
-        return new Result();
+    @RequestMapping("/detail")
+    public Result getDeviceDetail(@RequestBody PageParam pageParam){
+        return new Result(bigScreenDetailService.getBigScreenDetail(pageParam));
     }
-}*/
+}

src/main/java/com/imcs/admin/business/service/BigScreenDetailService.java

@@ -1,8 +1,8 @@
 package com.imcs.admin.business.service;
 
-import com.alibaba.fastjson.JSON;
-import org.springframework.stereotype.Service;
+import com.alibaba.fastjson.JSONObject;
+import com.imcs.admin.common.PageParam;
 
 public interface BigScreenDetailService {
-    public JSON getBigScreenDetail(Long id);
+    public JSONObject getBigScreenDetail(PageParam pageParam);
 }

src/main/java/com/imcs/admin/business/service/impl/BigScreenDetailServiceImpl.java

@@ -1,22 +1,115 @@
 package com.imcs.admin.business.service.impl;
 
-import com.alibaba.fastjson.JSON;
+import cn.hutool.core.collection.CollectionUtil;
+import cn.hutool.core.util.StrUtil;
+import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
 import com.imcs.admin.business.service.BigScreenDetailService;
+import com.imcs.admin.common.PageData;
+import com.imcs.admin.common.PageParam;
+import com.imcs.admin.common.Result;
 import com.imcs.admin.db.service.JdbcDao;
+import com.imcs.admin.util.DateUtils;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
+import java.math.BigDecimal;
+import java.util.*;
+import java.util.stream.Collectors;
 
 @Service
 public class BigScreenDetailServiceImpl implements BigScreenDetailService {
     @Resource
     private JdbcDao jdbcDao;
+
+    /*
+            {
+            "mainProg": "",//主程序号
+            "actFeed": "", //主轴进给率
+            "spindleMagnification": "", //主轴倍率
+            "actSpindle": "", //主轴转速
+            "powerOnTime": "", //开机时长
+        }
+     */
     @Override
-    public JSON getBigScreenDetail(Long id) {
-        StringBuffer stringBuffer=new StringBuffer("select * from a_device");
+    public JSONObject getBigScreenDetail(PageParam pageParam) {
+        StringBuffer sql=new StringBuffer("select ad.*,dc.device_info from a_device ad left join device_collection dc on ad.id=dc.device_id where ad.id = ?");
+        List<Object> args = new ArrayList<>();
+        args.add(StrUtil.format("{}",pageParam.getStr("id")));
+        Result<PageData<Map<String, Object>>> query = jdbcDao.query(pageParam, sql.toString(), args.toArray());
+        List<Map<String, Object>> items = query.getData().getItems();
+        if(CollectionUtil.isEmpty(items)){
+            return null;
+        }
+        Map<String, Object> stringObjectMap = items.get(0);
+        JSONObject json=new JSONObject(stringObjectMap);
+        String deviceInfo = json.get("deviceInfo").toString();
+        cn.hutool.json.JSONObject jsonObject=new cn.hutool.json.JSONObject(deviceInfo);
+        json.putAll(jsonObject);
+        String ip = json.get("ip").toString();
+        List<String> pastDaysDates = DateUtils.getPastDaysDates(new Date(), 5);
+        String collect = pastDaysDates.stream()
+                .map(date -> "'" + date + "'")
+                .collect(Collectors.joining(", "));
+
+        StringBuffer str=new StringBuffer("select * from device_collection_detail where create_date in ( "+collect+" ) and device_ip= ? ");
+        List<Object> detailArgs = new ArrayList<>();
+        detailArgs.add(StrUtil.format("{}",ip));
+        Result<PageData<Map<String, Object>>> detailQuery = jdbcDao.query(pageParam, str.toString(), detailArgs.toArray());
+        List<Map<String, Object>> items1 = detailQuery.getData().getItems();
+        List<Object> deviceRates = items1.stream()
+                .map(map -> map.get("deviceRate")) // 获取 device_rate 字段
+                .collect(Collectors.toList());
+        json.put("deviceRates",deviceRates);
+
+        String currentDateAsString = DateUtils.getCurrentDateAsString();
+
+        Optional<Map<String, Object>> createDate = items1.stream().filter(vo -> vo.get("createDate").equals(currentDateAsString)).findFirst();
+        json.put("detailInfo", JSONArray.parseArray(createDate.get().get("detailInfo").toString()));
+        json.put("deviceRate",createDate.get().get("deviceRate"));
+        json.put("dateList",pastDaysDates);
+        getleftBox(ip,json,pageParam);
+        getEchart3(ip,json,pageParam);
+        return json;
+    }
+
+
+    public void getleftBox(String ip,JSONObject jsonObject,PageParam pageParam){
+        StringBuffer str=new StringBuffer("SELECT ROUND(AVG(device_rate),2) as avg_device_rate,ROUND(100 - AVG(device_rate), 2) AS dif_avg_device_rate\n" +
+                "FROM device_collection_detail\n" +
+                "WHERE MONTH(create_date) = ? and device_ip= ? ");
+        List<Object> detailArgs = new ArrayList<>();
+        detailArgs.add(StrUtil.format("{}",DateUtils.getCurrentMonth()));
+        detailArgs.add(StrUtil.format("{}",ip));
+        Result<PageData<Map<String, Object>>> detailQuery = jdbcDao.query(pageParam, str.toString(), detailArgs.toArray());
+        List<Map<String, Object>> items = detailQuery.getData().getItems();
+        if(!CollectionUtil.isEmpty(items)){
+            jsonObject.putAll(items.get(0));
+        }
+
+
+    }
 
-        //jdbcDao
+    public void getEchart3(String ip,JSONObject jsonObject,PageParam pageParam){
 
-        return null;
+        List<String> pastDaysDates = DateUtils.getLastYearMonths();
+        String collect = pastDaysDates.stream()
+                .map(date -> "'" + date + "'")
+                .collect(Collectors.joining(", "));
+        StringBuffer str=new StringBuffer("SELECT CONCAT(YEAR(create_date), '-', LPAD(MONTH(create_date), 2, '0')) AS year_month_str,\n" +
+                "       ROUND(AVG(device_rate),2) AS average_value\n" +
+                "FROM device_collection_detail\n" +
+                "where DATE_FORMAT(create_date, '%Y-%m') in ("+collect+") and device_ip = ? " +
+                "GROUP BY CONCAT(YEAR(create_date), '-', LPAD(MONTH(create_date), 2, '0')) ");
+        List<Object> detailArgs = new ArrayList<>();
+        detailArgs.add(StrUtil.format("{}",ip));
+        Result<PageData<Map<String, Object>>> detailQuery = jdbcDao.query(pageParam, str.toString(), detailArgs.toArray());
+        List<Map<String, Object>> items = detailQuery.getData().getItems();
+        if(!CollectionUtil.isEmpty(items)){
+            List<String> yearMonthStr = items.stream().map(vo -> vo.get("yearMonthStr").toString()).collect(Collectors.toList());
+            List<BigDecimal> avgYearMonth = items.stream().map(vo -> new BigDecimal(vo.get("averageValue").toString())).collect(Collectors.toList());
+            jsonObject.put("yearMonthList",yearMonthStr);
+            jsonObject.put("avgYearMonth",avgYearMonth);
+        }
     }
 }

src/main/java/com/imcs/admin/util/DateUtils.java

@@ -1,7 +1,12 @@
 package com.imcs.admin.util;
 
+import java.text.SimpleDateFormat;
 import java.time.LocalDateTime;
 import java.time.format.DateTimeFormatter;
+import java.util.ArrayList;
+import java.util.Calendar;
+import java.util.Date;
+import java.util.List;
 
 public class DateUtils {
     public static String getCurrentDate(String dateFormat) {
@@ -9,4 +14,54 @@ public class DateUtils {
         DateTimeFormatter formatter = DateTimeFormatter.ofPattern(dateFormat); // 使用指定格式化器
         return now.format(formatter); // 格式化当前时间为字符串
     }
+
+    // 获取包含今天的前几天日期列表
+    public static List<String> getPastDaysDates(Date date, int days) {
+        List<String> pastDays = new ArrayList<>();
+        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
+
+        Calendar calendar = Calendar.getInstance();
+        calendar.setTime(date);
+        // 获取前几天的日期（包含今天）
+        for (int i = 0; i < days; i++) {
+            pastDays.add(dateFormat.format(calendar.getTime())); // 将今天的日期以字符串形式添加到列表中
+            calendar.add(Calendar.DAY_OF_YEAR, -1); // 减去一天
+        }
+
+        return pastDays;
+    }
+
+    // 获取当前日期并以字符串形式返回
+    public static String getCurrentDateAsString() {
+        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
+        return dateFormat.format(new Date());
+    }
+
+    public static int getCurrentMonth() {
+        Calendar calendar = Calendar.getInstance();
+        return calendar.get(Calendar.MONTH) + 1; // 注意月份是从 0 开始的，所以需要加 1
+    }
+
+    /**
+     * 获取最近一年的年月
+     * @return
+     */
+    public static List<String> getLastYearMonths() {
+        List<String> yearMonths = new ArrayList<>();
+
+        Calendar calendar = Calendar.getInstance();
+        calendar.add(Calendar.MONTH, -1); // 减去当前月份
+
+        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM");
+        for (int i = 0; i < 12; i++) {
+            yearMonths.add(dateFormat.format(calendar.getTime()));
+            calendar.add(Calendar.MONTH, -1); // 继续往前推一个月
+        }
+
+        return yearMonths;
+    }
+
+    public static void main(String[] args) {
+        System.out.println(getLastYearMonths());
+    }
 }

src/main/resources/static/admin/bigScreen/indexDetail.html

@@ -1,160 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../css/indexDetail.css">
-    <title>设备环境监测平台大数据</title>
-    <script src="../js/jquery.min.js"></script>
-    <script src="../js/rem.js"></script>
-    <script src="../js/echarts.min.js"></script>
-    <script src="../js/guangxi.js"></script>
-    <script src="../js/indexDetail.js"></script>
-</head>
-<body>
-    <div class="t_container">
-        <header class="t_header">
-            <span>设备环境监测平台</span>
-        </header>
-        <main class="t_main">
-            <div class="t_left_box">
-                <img class="t_l_line" src="../img/left_line.png" alt="">
-                <div class="t_mbox t_rbox">
-                    <i></i>
-                    <span>本月订单数</span>
-                    <h2>18000</h2>
-                </div>
-                <div class="t_mbox t_gbox">
-                    <i></i>
-                    <span>本月新增会员</span>
-                    <h2>1000</h2>
-                </div>
-                <div class="t_mbox t_ybox">
-                    <i></i>
-                    <span>一次消费会员</span>
-                    <h2>600</h2>
-                </div>
-                <img class="t_r_line" src="../img/right_line.png" alt="">
-            </div>
-            <div class="t_center_box">
-                <div class="t_top_box">
-                    <img class="t_l_line" src="../img/left_line.png" alt="">
-                    <ul class="t_nav">
-                        <li>
-                            <span>设备数</span>
-                            <h1>500</h1>
-                            <i></i>
-                        </li>
-                        <li>
-                            <span>上月设备增加数</span>
-                            <h1>30</h1>
-                            <i></i>
-                        </li>
-                        <li>
-                            <span>增值率</span>
-                            <h1>75%</h1>
-                        </li>
-                    </ul>
-                    <img class="t_r_line" src="../img/right_line.png" alt="">
-                </div>
-                <div class="t_bottom_box">
-                    <img class="t_l_line" src="../img/left_line.png" alt="">
-                    <div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"></div>
-                    <img class="t_r_line" src="../img/right_line.png" alt="">
-                </div>
-            </div>
-            <div class="t_right_box">
-                    <img class="t_l_line" src="../img/left_line.png" alt="">
-                    <div id="chart_4" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
-                    <header class="t_b_h">
-                        <span>开关次数</span>
-                        <img src="../img/end.png"></img>
-                        <h3>15<span>次</span></h3>
-                    </header>
-                    <main class="t_b_m">
-                        <img src="../img/map.png" alt="">
-                        <div class="t_b_box">
-                            <span>溫度</span>
-                            <i></i>
-                            <h2>23℃</h2>
-                        </div>
-                        <div class="t_b_box1">
-                            <span>湿度</span>
-                            <i></i>
-                            <h2>56RH</h2>
-                        </div>
-                        <div class="t_b_box2">
-                            <span>信号</span>
-                            <i></i>
-                            <h2>-90dBm</h2>
-                        </div>
-                        <div class="t_b_box3">
-                            <span>光线</span>
-                            <i></i>
-                            <h2>250LX</h2>
-                        </div>
-                    </main>
-                    <img class="t_r_line" src="../img/right_line.png" alt="">
-            </div>
-            <div class="b_left_box">
-                    <img class="t_l_line" src="../img/left_line.png" alt="">
-                    <div id="chart_2" class="echart" style="width: 100%; height: 3.6rem;"></div>
-                    <img class="t_r_line" src="../img/right_line.png" alt="">
-            </div>
-            <div class="b_center_box">
-                    <img class="t_l_line" src="../img/left_line.png" alt="">
-                    <div id="chart_1" class="echart" style="width: 100%; height: 3.6rem;"></div>
-                    <img class="t_r_line" src="../img/right_line.png" alt="">
-            </div>
-            <div class="b_right_box">
-                    <img class="t_l_line" src="../img/left_line.png" alt="">
-                    <h1 class="t_title">设备维保数据查看</h1>
-                    <table class="t_table">
-                        <thead>
-                            <tr>
-                                <th>维护时间</th>
-                                <th>维保人</th>
-                                <th>维保电话</th>
-                                <th>更换水量</th>  
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <img class="t_r_line" src="../img/right_line.png" alt="">
-            </div>
-        </main>
-    </div>
-</body>
-</html>

src/main/resources/static/admin/bigScreenDetail/css/index.css

@@ -138,7 +138,7 @@ a{
     margin: auto;
 }
 .t_mbox h2{
-    font-size: 0.28rem;
+    font-size: 0.20rem;
     color: #fff;
     position: absolute;
     top: 50%;
@@ -156,11 +156,11 @@ a{
     background-size: 100% 100%;
 }
 .t_gbox i{
-    background: url(../img/vip.png) no-repeat;
+    background: url(../img/icons8-系统-50.png) no-repeat;
     background-size: 100% 100%;
 }
 .t_ybox i{
-    background: url(../img/consumption.png) no-repeat;
+    background: url(../img/icons8.png) no-repeat;
     background-size: 100% 100%;
 }
 .t_nav{

src/main/resources/static/admin/bigScreenDetail/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="css/index.css">
-    <title>设备环境监测平台大数据</title>
+    <title>设备监测平台大数据</title>
     <script src="js/jquery-2.2.1.min.js"></script>
     <script src="js/rem.js"></script>
     <script src="js/echarts.min.js"></script>
@@ -15,87 +15,23 @@
 <body>
     <div class="t_container">
         <header class="t_header">
-            <span>设备环境监测平台</span>
+            <span>设备监测平台</span>
         </header>
         <main class="t_main">
             <div class="t_left_box">
-                <img class="t_l_line" src="img/left_line.png" alt="">
-                <div class="t_mbox t_rbox">
-                    <i></i>
-                    <span>本月订单数</span>
-                    <h2>18000</h2>
-                </div>
-                <div class="t_mbox t_gbox">
-                    <i></i>
-                    <span>本月新增会员</span>
-                    <h2>1000</h2>
-                </div>
-                <div class="t_mbox t_ybox">
-                    <i></i>
-                    <span>一次消费会员</span>
-                    <h2>600</h2>
-                </div>
-                <img class="t_r_line" src="img/right_line.png" alt="">
+
             </div>
             <div class="t_center_box">
                 <div class="t_top_box">
-                    <img class="t_l_line" src="img/left_line.png" alt="">
-                    <ul class="t_nav">
-                        <li>
-                            <span>设备数</span>
-                            <h1>500</h1>
-                            <i></i>
-                        </li>
-                        <li>
-                            <span>上月设备增加数</span>
-                            <h1>30</h1>
-                            <i></i>
-                        </li>
-                        <li>
-                            <span>增值率</span>
-                            <h1>75%</h1>
-                        </li>
-                    </ul>
-                    <img class="t_r_line" src="img/right_line.png" alt="">
                 </div>
                 <div class="t_bottom_box">
                     <img class="t_l_line" src="img/left_line.png" alt="">
-                    <div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"></div>
+                    <div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"><img class="t_r_line" src="img/img.png" alt=""></div>
                     <img class="t_r_line" src="img/right_line.png" alt="">
                 </div>
             </div>
             <div class="t_right_box">
-                    <img class="t_l_line" src="img/left_line.png" alt="">
-                    <div id="chart_4" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
-                    <header class="t_b_h">
-                        <span>开关次数</span>
-                        <img src="img/end.png"></img>
-                        <h3>15<span>次</span></h3>
-                    </header>
-                    <main class="t_b_m">
-                        <img src="img/map.png" alt="">
-                        <div class="t_b_box">
-                            <span>溫度</span>
-                            <i></i>
-                            <h2>23℃</h2>
-                        </div>
-                        <div class="t_b_box1">
-                            <span>湿度</span>
-                            <i></i>
-                            <h2>56RH</h2>
-                        </div>
-                        <div class="t_b_box2">
-                            <span>信号</span>
-                            <i></i>
-                            <h2>-90dBm</h2>
-                        </div>
-                        <div class="t_b_box3">
-                            <span>光线</span>
-                            <i></i>
-                            <h2>250LX</h2>
-                        </div>
-                    </main>
-                    <img class="t_r_line" src="img/right_line.png" alt="">
+
             </div>
             <div class="b_left_box">
                     <img class="t_l_line" src="img/left_line.png" alt="">
@@ -109,47 +45,17 @@
             </div>
             <div class="b_right_box">
                     <img class="t_l_line" src="img/left_line.png" alt="">
-                    <h1 class="t_title">设备维保数据查看</h1>
+                    <h1 class="t_title">设备实时数据</h1>
                     <table class="t_table">
                         <thead>
                             <tr>
-                                <th>维护时间</th>
-                                <th>维保人</th>
-                                <th>维保电话</th>
-                                <th>更换水量</th>  
+                                <th>主轴进给率</th>
+                                <th>主轴倍率</th>
+                                <th>主轴转速</th>
+                                <th>开机时长</th>
                             </tr>
                         </thead>
-                        <tbody>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
-                            <tr>
-                                <td>2018-02-06</td>
-                                <td>张伟</td>
-                                <td>13111345462</td>
-                                <td>1000ml</td>
-                            </tr>
+                        <tbody class="b_right_box_tbody">
                         </tbody>
                     </table>
                     <img class="t_r_line" src="img/right_line.png" alt="">
@@ -163,9 +69,569 @@
     // 解析 URL 获取参数
     var paramStartIndex = currentURL.indexOf('=') + 1; // 获取 "=" 后的位置
     var id = currentURL.substring(paramStartIndex);
+
+    var requestData = {
+            "id": id
+    };
+
+    const leftBox = document.querySelector('.t_left_box');
+    const topBox = document.querySelector('.t_top_box');
+    const rightBox = document.querySelector('.t_right_box');
+    const rightBoxtbody = document.querySelector('.b_right_box_tbody');
+
+
+
+    var echart4date;
+    var echart4titlename;
+    var avgDeviceRate;
+    var difAvgDeviceRate;
+    var yearMonthList;
+    var avgYearMonth;
+
     function init(){
+        $.ajax({
+            url: "/bigScreen/detail",
+            type: "POST", // 指定请求类型为 POST
+            contentType: "application/json", // 设置请求的内容类型为 JSON
+            dataType: "JSON",
+            data: JSON.stringify(requestData), // 将请求数据转换为 JSON 字符串
+            success: function (resp) {
+                var data=resp.data;
+
+                leftBox.innerHTML=`<img class="t_l_line" src="img/left_line.png" alt="">
+                    <div class="t_mbox t_rbox">
+                    <i></i>
+                                        <span>主程序号</span>
+                                        <h2>${data.mainProg}</h2>
+                                    </div>
+                                    <div class="t_mbox t_gbox">
+                                        <i></i>
+                                        <span>设备系统</span>
+                                        <h2>${data.deviceSystem}</h2>
+                                    </div>
+                                    <div class="t_mbox t_ybox">
+                                        <i></i>
+                                        <span>设备型号</span>
+                                        <h2>${data.deviceModel}</h2>
+                                    </div>
+                                    <img class="t_r_line" src="img/right_line.png" alt="">
+                    `;
+                topBox.innerHTML=`
+                    <img class="t_l_line" src="img/left_line.png" alt="">
+                    <ul class="t_nav">
+                        <li>
+                            <span>设备类型</span>
+                            <h1>${data.deviceType}</h1>
+                            <i></i>
+                        </li>
+                        <li>
+                            <span>开机时长</span>
+                            <h1>${data.powerOnTime}</h1>
+                            <i></i>
+                        </li>
+                        <li>
+                            <span>主轴利用率</span>
+                            <h1>${data.deviceRate}%</h1>
+                        </li>
+                    </ul>
+                    <img class="t_r_line" src="img/right_line.png" alt="">
+                    `;
+                rightBox.innerHTML=`
+                <img class="t_l_line" src="img/left_line.png" alt="">
+                    <div id="chart_4" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
+                    <header class="t_b_h">
+                        <span>设备状态</span>
+                        <img src="img/end.png"></img>
+                        <h3>${data.deviceState}</h3>
+                    </header>
+                    <main class="t_b_m">
+                        <img src="img/map.png" alt="">
+                        <div class="t_b_box">
+                            <span>主轴进给率</span>
+                            <i></i>
+                            <h2>${data.actFeed}</h2>
+                        </div>
+                        <div class="t_b_box1">
+                            <span>主轴倍率</span>
+                            <i></i>
+                            <h2>${data.spindleMagnification}</h2>
+                        </div>
+                        <div class="t_b_box2">
+                            <span>主轴转速</span>
+                            <i></i>
+                            <h2>${data.actSpindle}</h2>
+                        </div>
+                        <div class="t_b_box3">
+                            <span>开机时长</span>
+                            <i></i>
+                            <h2>${data.powerOnTime}</h2>
+                        </div>
+                    </main>
+                    <img class="t_r_line" src="img/right_line.png" alt="">
+                    `;
+                var bodyText=``;
+                data.detailInfo.forEach(item => {
+                    bodyText+=`
+                    <tr>
+                        <td>${item.actFeed}</td>
+                        <td>${item.spindleMagnification}</td>
+                        <td>${item.actSpindle}</td>
+                        <td>${item.powerOnTime}</td>
+                    </tr>
+                    `;
+                });
+                rightBoxtbody.innerHTML=bodyText;
+                echart4date=data.deviceRates;
+                echart4titlename=data.dateList;
+                avgDeviceRate=data.avgDeviceRate;
+                difAvgDeviceRate=data.difAvgDeviceRate;
+                yearMonthList=data.yearMonthList;
+                avgYearMonth=data.avgYearMonth;
+                echart_1();
+                echart_2();
+                echart_4();
+            }
+        });
+
+
+
 
     }
+
     init();
+    function echart_1() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('chart_1'));
+        option = {
+            title: {
+                text: '本月设备主轴利用率统计',
+                top: 35,
+                left: 20,
+                textStyle: {
+                    fontSize: 18,
+                    color: '#fff'
+                }
+            },
+            tooltip: {
+                trigger: 'item',
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+
+            },
+            legend: {
+                right: 20,
+                top: 35,
+                data: ['未使用', '主轴利用率'],
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            series: [{
+                name: '设备状态',
+                type: 'pie',
+                radius: ['0', '60%'],
+                center: ['50%', '60%'],
+                color: ['#e72325', '#98e002', '#2ca3fd'],
+                label: {
+                    normal: {
+                        formatter: '{b}\n{d}%'
+                    },
+
+                },
+                data: [{
+                    value: difAvgDeviceRate,
+                    name: '未使用'
+                },
+                    {
+                        value: avgDeviceRate,
+                        name: '主轴利用率',
+                        selected: true
+                    }
+                ]
+            }]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize", function () {
+            myChart.resize();
+        });
+    }
+    function echart_2() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('chart_2'));
+        var data = {
+            id: 'multipleBarsLines',
+            title: '近一年主轴利用率占比',
+            legendBar: ['正面占比', '中立占比', '负面占比'],
+            symbol: '', //数值是否带百分号        --默认为空 ''
+            legendLine: ['同期对比'],
+            xAxis: yearMonthList,
+            yAxis: [
+                avgYearMonth
+            ],
+            barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
+            lineColor: ['#D9523F'], // 折线颜色
+
+        };
+        /////////////end/////////
+
+        var myData = (function test() {
+            var yAxis = data.yAxis || [];
+            var lines = data.lines || [];
+            var legendBar = data.legendBar || [];
+            var legendLine = data.legendLine || [];
+            var symbol = data.symbol || ' ';
+            var seriesArr = [];
+            var legendArr = [];
+            yAxis && yAxis.forEach((item, index) => {
+                legendArr.push({
+                    name: legendBar && legendBar.length > 0 && legendBar[index]
+                });
+                seriesArr.push({
+                    name: legendBar && legendBar.length > 0 && legendBar[index],
+                    type: 'bar',
+                    barGap: '0.5px',
+                    data: item,
+                    barWidth: data.barWidth || 12,
+                    label: {
+                        normal: {
+                            show: true,
+                            formatter: '{c}' + symbol,
+                            position: 'top',
+                            textStyle: {
+                                color: '#fff',
+                                fontStyle: 'normal',
+                                fontFamily: '微软雅黑',
+                                textAlign: 'left',
+                                fontSize: 11,
+                            },
+                        },
+                    },
+                    itemStyle: { //图形样式
+                        normal: {
+                            barBorderRadius: 4,
+                            color: data.barColor[index]
+                        },
+                    }
+                });
+            });
+
+            lines && lines.forEach((item, index) => {
+                legendArr.push({
+                    name: legendLine && legendLine.length > 0 && legendLine[index]
+                })
+                seriesArr.push({
+                    name: legendLine && legendLine.length > 0 && legendLine[index],
+                    type: 'line',
+                    data: item,
+                    itemStyle: {
+                        normal: {
+                            color: data.lineColor[index],
+                            lineStyle: {
+                                width: 3,
+                                type: 'solid',
+                            }
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: false, //折线上方label控制显示隐藏
+                            position: 'top',
+                        }
+                    },
+                    symbol: 'circle',
+                    symbolSize: 10
+                });
+            });
+
+            return {
+                seriesArr,
+                legendArr
+            };
+        })();
+
+
+        option = {
+            title: {
+                show: true,
+                top: '10%',
+                left: '3%',
+                text: data.title,
+                textStyle: {
+                    fontSize: 18,
+                    color: '#fff'
+                },
+                subtext: data.subTitle,
+                link: ''
+            },
+            tooltip: {
+                trigger: 'axis',
+                formatter: function (params) {
+                    var time = '';
+                    var str = '';
+                    for (var i of params) {
+                        time = i.name.replace(/\n/g, '') + '<br/>';
+                        if (i.data == 'null' || i.data == null) {
+                            str += i.seriesName + '：无数据' + '<br/>'
+                        } else {
+                            str += i.seriesName + '：' + i.data + symbol + '%<br/>'
+                        }
+
+                    }
+                    return time + str;
+                },
+                axisPointer: {
+                    type: 'none'
+                },
+            },
+            legend: {
+                right: data.legendRight || '30%',
+                top: '12%',
+                right: '5%',
+                itemGap: 16,
+                itemWidth: 10,
+                itemHeight: 10,
+                data: myData.legendArr,
+                textStyle: {
+                    color: '#fff',
+                    fontStyle: 'normal',
+                    fontFamily: '微软雅黑',
+                    fontSize: 12,
+                }
+            },
+            grid: {
+                x: 30,
+                y: 80,
+                x2: 30,
+                y2: 60,
+            },
+            xAxis: {
+                type: 'category',
+                data: data.xAxis,
+                axisTick: {
+                    show: false,
+                },
+
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#1AA1FD',
+                    },
+                    symbol: ['none', 'arrow']
+                },
+                axisLabel: {
+                    show: true,
+                    interval: '0',
+                    textStyle: {
+                        lineHeight: 16,
+                        padding: [2, 2, 0, 2],
+                        height: 50,
+                        fontSize: 12,
+                    },
+                    rich: {
+                        Sunny: {
+                            height: 50,
+                            // width: 60,
+                            padding: [0, 5, 0, 5],
+                            align: 'center',
+                        },
+                    },
+                    formatter: function (params, index) {
+                        var newParamsName = "";
+                        var splitNumber = 5;
+                        var paramsNameNumber = params && params.length;
+                        if (paramsNameNumber && paramsNameNumber <= 4) {
+                            splitNumber = 4;
+                        } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
+                            splitNumber = 4;
+                        } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
+                            splitNumber = 5;
+                        } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
+                            splitNumber = 5;
+                        } else {
+                            params = params && params.slice(0, 15);
+                        }
+
+                        var provideNumber = splitNumber; //一行显示几个字
+                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
+                        if (paramsNameNumber > provideNumber) {
+                            for (var p = 0; p < rowNumber; p++) {
+                                var tempStr = "";
+                                var start = p * provideNumber;
+                                var end = start + provideNumber;
+                                if (p == rowNumber - 1) {
+                                    tempStr = params.substring(start, paramsNameNumber);
+                                } else {
+                                    tempStr = params.substring(start, end) + "\n";
+                                }
+                                newParamsName += tempStr;
+                            }
+
+                        } else {
+                            newParamsName = params;
+                        }
+                        params = newParamsName;
+                        return '{Sunny|' + params + '}';
+                    },
+                    color: '#1AA1FD',
+                },
+
+            },
+            yAxis: {
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#1AA1FD',
+                    },
+                    symbol: ['none', 'arrow']
+                },
+                type: 'value',
+                axisTick: {
+                    show: false
+                },
+                axisLabel: {
+                    show: false
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#1AA1FD',
+                        type: 'solid'
+                    },
+                }
+            },
+            series: myData.seriesArr
+        }
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize", function () {
+            myChart.resize();
+        });
+    }
+    function echart_4() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('chart_4'));
+        var data = echart4date;
+        var titlename = echart4titlename;
+        var valdata = [100, 100, 100, 100, 100];
+        var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
+        option = {
+            title: {
+                text: '主轴利用率',
+                x: 'center',
+                textStyle: {
+                    color: '#FFF'
+                },
+                left: '6%',
+                top: '10%'
+            },
+            //图标位置
+            grid: {
+                top: '20%',
+                left: '32%'
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: [{
+                show: true,
+                data: titlename,
+                inverse: true,
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLabel: {
+                    color: '#fff',
+                    formatter: (value, index) => {
+                        return [
+
+                            `{lg|${index+1}}  ` + '{title|' + value + '} '
+                        ].join('\n')
+                    },
+                    rich: {
+                        lg: {
+                            backgroundColor: '#339911',
+                            color: '#fff',
+                            borderRadius: 15,
+                            // padding: 5,
+                            align: 'center',
+                            width: 15,
+                            height: 15
+                        },
+                    }
+                },
+
+
+            }, {
+                show: true,
+                inverse: true,
+                data: valdata,
+                axisLabel: {
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#fff',
+                    },
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+
+            }],
+            series: [{
+                name: '条',
+                type: 'bar',
+                yAxisIndex: 0,
+                data: data,
+                barWidth: 10,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: 20,
+                        color: function(params) {
+                            var num = myColor.length;
+                            return myColor[params.dataIndex % num]
+                        },
+                    }
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'inside',
+                        formatter: '{c}%'
+                    }
+                },
+            }, {
+                name: '框',
+                type: 'bar',
+                yAxisIndex: 1,
+                barGap: '-100%',
+                data: [100, 100, 100, 100, 100],
+                barWidth: 15,
+                itemStyle: {
+                    normal: {
+                        color: 'none',
+                        borderColor: '#00c1de',
+                        borderWidth: 3,
+                        barBorderRadius: 15,
+                    }
+                }
+            }, ]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        // window.addEventListener("resize", function () {
+        //     myChart.resize();
+        // });
+    }
 </script>
 </html>

src/main/resources/static/admin/bigScreenDetail/js/index.js

@@ -1,353 +1,82 @@
 $(function () {
-    echart_1();
-    echart_2();
-    echart_3();
-    echart_4();
 
-    function echart_1() {
-        // 基于准备好的dom，初始化echarts实例
-        var myChart = echarts.init(document.getElementById('chart_1'));
-        option = {
-            title: {
-                text: '本月设备状态统计',
-                top: 35,
-                left: 20,
-                textStyle: {
-                    fontSize: 18,
-                    color: '#fff'
-                }
-            },
-            tooltip: {
-                trigger: 'item',
-                formatter: "{a} <br/>{b}: {c} ({d}%)",
-
-            },
-            legend: {
-                right: 20,
-                top: 35,
-                data: ['故障', '正常'],
-                textStyle: {
-                    color: '#fff'
-                }
-            },
-            series: [{
-                name: '设备状态',
-                type: 'pie',
-                radius: ['0', '60%'],
-                center: ['50%', '60%'],
-                color: ['#e72325', '#98e002', '#2ca3fd'],
-                label: {
-                    normal: {
-                        formatter: '{b}\n{d}%'
-                    },
-
-                },
-                data: [{
-                        value: 6,
-                        name: '故障'
-                    },
-                    {
-                        value: 50,
-                        name: '正常',
-                        selected: true
-                    }
-                ]
-            }]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
-        window.addEventListener("resize", function () {
-            myChart.resize();
-        });
-    }
-
-    function echart_2() {
-        // 基于准备好的dom，初始化echarts实例
-        var myChart = echarts.init(document.getElementById('chart_2'));
-        var data = {
-            id: 'multipleBarsLines',
-            title: '2018年前半年检测统计',
-            legendBar: ['正面占比', '中立占比', '负面占比'],
-            symbol: '', //数值是否带百分号        --默认为空 ''
-            legendLine: ['同期对比'],
-            xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
-            yAxis: [
-                [8, 10, 10, 11, 4, 13]
-            ],
-            lines: [
-                [10, 10, 9, 11, 7, 4]
-            ],
-            barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
-            lineColor: ['#D9523F'], // 折线颜色
-
-        };
-        /////////////end/////////
-
-        var myData = (function test() {
-            var yAxis = data.yAxis || [];
-            var lines = data.lines || [];
-            var legendBar = data.legendBar || [];
-            var legendLine = data.legendLine || [];
-            var symbol = data.symbol || ' ';
-            var seriesArr = [];
-            var legendArr = [];
-            yAxis && yAxis.forEach((item, index) => {
-                legendArr.push({
-                    name: legendBar && legendBar.length > 0 && legendBar[index]
-                });
-                seriesArr.push({
-                    name: legendBar && legendBar.length > 0 && legendBar[index],
-                    type: 'bar',
-                    barGap: '0.5px',
-                    data: item,
-                    barWidth: data.barWidth || 12,
-                    label: {
-                        normal: {
-                            show: true,
-                            formatter: '{c}' + symbol,
-                            position: 'top',
-                            textStyle: {
-                                color: '#fff',
-                                fontStyle: 'normal',
-                                fontFamily: '微软雅黑',
-                                textAlign: 'left',
-                                fontSize: 11,
-                            },
-                        },
-                    },
-                    itemStyle: { //图形样式
-                        normal: {
-                            barBorderRadius: 4,
-                            color: data.barColor[index]
-                        },
-                    }
-                });
-            });
-
-            lines && lines.forEach((item, index) => {
-                legendArr.push({
-                    name: legendLine && legendLine.length > 0 && legendLine[index]
-                })
-                seriesArr.push({
-                    name: legendLine && legendLine.length > 0 && legendLine[index],
-                    type: 'line',
-                    data: item,
-                    itemStyle: {
-                        normal: {
-                            color: data.lineColor[index],
-                            lineStyle: {
-                                width: 3,
-                                type: 'solid',
-                            }
-                        }
-                    },
-                    label: {
-                        normal: {
-                            show: false, //折线上方label控制显示隐藏
-                            position: 'top',
-                        }
-                    },
-                    symbol: 'circle',
-                    symbolSize: 10
-                });
-            });
-
-            return {
-                seriesArr,
-                legendArr
-            };
-        })();
-
-
-        option = {
-            title: {
-                show: true,
-                top: '10%',
-                left: '3%',
-                text: data.title,
-                textStyle: {
-                    fontSize: 18,
-                    color: '#fff'
-                },
-                subtext: data.subTitle,
-                link: ''
-            },
-            tooltip: {
-                trigger: 'axis',
-                formatter: function (params) {
-                    var time = '';
-                    var str = '';
-                    for (var i of params) {
-                        time = i.name.replace(/\n/g, '') + '<br/>';
-                        if (i.data == 'null' || i.data == null) {
-                            str += i.seriesName + '：无数据' + '<br/>'
-                        } else {
-                            str += i.seriesName + '：' + i.data + symbol + '%<br/>'
-                        }
-
-                    }
-                    return time + str;
-                },
-                axisPointer: {
-                    type: 'none'
-                },
-            },
-            legend: {
-                right: data.legendRight || '30%',
-                top: '12%',
-                right: '5%',
-                itemGap: 16,
-                itemWidth: 10,
-                itemHeight: 10,
-                data: myData.legendArr,
-                textStyle: {
-                    color: '#fff',
-                    fontStyle: 'normal',
-                    fontFamily: '微软雅黑',
-                    fontSize: 12,
-                }
-            },
-            grid: {
-                x: 30,
-                y: 80,
-                x2: 30,
-                y2: 60,
-            },
-            xAxis: {
-                type: 'category',
-                data: data.xAxis,
-                axisTick: {
-                    show: false,
-                },
-
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#1AA1FD',
-                    },
-                    symbol: ['none', 'arrow']
-                },
-                axisLabel: {
-                    show: true,
-                    interval: '0',
-                    textStyle: {
-                        lineHeight: 16,
-                        padding: [2, 2, 0, 2],
-                        height: 50,
-                        fontSize: 12,
-                    },
-                    rich: {
-                        Sunny: {
-                            height: 50,
-                            // width: 60,
-                            padding: [0, 5, 0, 5],
-                            align: 'center',
-                        },
-                    },
-                    formatter: function (params, index) {
-                        var newParamsName = "";
-                        var splitNumber = 5;
-                        var paramsNameNumber = params && params.length;
-                        if (paramsNameNumber && paramsNameNumber <= 4) {
-                            splitNumber = 4;
-                        } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
-                            splitNumber = 4;
-                        } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
-                            splitNumber = 5;
-                        } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
-                            splitNumber = 5;
-                        } else {
-                            params = params && params.slice(0, 15);
-                        }
-
-                        var provideNumber = splitNumber; //一行显示几个字
-                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
-                        if (paramsNameNumber > provideNumber) {
-                            for (var p = 0; p < rowNumber; p++) {
-                                var tempStr = "";
-                                var start = p * provideNumber;
-                                var end = start + provideNumber;
-                                if (p == rowNumber - 1) {
-                                    tempStr = params.substring(start, paramsNameNumber);
-                                } else {
-                                    tempStr = params.substring(start, end) + "\n";
-                                }
-                                newParamsName += tempStr;
-                            }
-
-                        } else {
-                            newParamsName = params;
-                        }
-                        params = newParamsName;
-                        return '{Sunny|' + params + '}';
-                    },
-                    color: '#1AA1FD',
-                },
-
-            },
-            yAxis: {
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#1AA1FD',
-                    },
-                    symbol: ['none', 'arrow']
-                },
-                type: 'value',
-                axisTick: {
-                    show: false
-                },
-                axisLabel: {
-                    show: false
-                },
-                splitLine: {
-                    show: false,
-                    lineStyle: {
-                        color: '#1AA1FD',
-                        type: 'solid'
-                    },
-                }
-            },
-            series: myData.seriesArr
-        }
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
-        window.addEventListener("resize", function () {
-            myChart.resize();
-        });
-    }
 
+    //echart_3();
     function echart_3() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('chart_3'));
 
         function showProvince() {
             var geoCoordMap = {
-                '河池': [108.085179,24.700488],
-                '柳州': [109.412578,24.354875],
-                '梧州': [111.323462,23.478238],
-                '南宁': [108.359656,22.81328],
-                '北海': [109.171374,21.477419],
-                '崇左': [107.347374,22.377503]
+                '哈尔滨市': [126.642464,45.756967],
+                '齐齐哈尔市': [123.95792,47.342081],
+                '鸡西市': [130.975966,45.300046],
+                '鹤岗市': [130.277487,47.332085],
+                '双鸭山市': [131.157304,46.643442],
+                '大庆市': [125.11272,46.590734],
+                '伊春市': [128.899396,47.724775],
+                '七台河市': [131.015584,45.771266],
+                '牡丹江市': [129.618602,44.582962],
+                '黑河市': [127.499023,50.249585],
+                '绥化市': [126.99293,46.637393],
+                '大兴安岭地区': [124.711526,52.335262]
             };
             var data = [{
-                    name: '河池',
+                    name: '哈尔滨市',
                     value: 100
                 },
                 {
-                    name: '柳州',
+                    name: '齐齐哈尔市',
                     value: 100
                 },
                 {
-                    name: '梧州',
+                    name: '鸡西市',
                     value: 100
                 },
                 {
-                    name: '北海',
+                    name: '鹤岗市',
                     value: 100
                 },
                 {
-                    name: '崇左',
+                    name: '双鸭山市',
+                    value: 100
+                },
+                {
+                    name: '大庆市',
+                    value: 100
+                },
+                {
+                    name: '伊春市',
+                    value: 100
+                }
+                ,
+                {
+                    name: '佳木斯市',
+                    value: 100
+                }
+                ,
+                {
+                    name: '七台河市',
+                    value: 100
+                }
+                ,
+                {
+                    name: '牡丹江市',
+                    value: 100
+                }
+                ,
+                {
+                    name: '黑河市',
+                    value: 100
+                }
+                ,
+                {
+                    name: '绥化市',
+                    value: 100
+                }
+                ,
+                {
+                    name: '大兴安岭地区',
                     value: 100
                 }
             ];
@@ -559,130 +288,5 @@ $(function () {
         });
     }
 
-    function echart_4() {
-        // 基于准备好的dom，初始化echarts实例
-        var myChart = echarts.init(document.getElementById('chart_4'));
-        var data = [70, 34, 60, 78, 69];
-        var titlename = ['1号机', '2号机', '3号机', '4号机', '5号机'];
-        var valdata = [702, 406, 664, 793, 505];
-        var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
-        option = {
-            title: {
-                text: '设备使用频率',
-                x: 'center',
-                textStyle: {
-                    color: '#FFF'
-                },
-                left: '6%',
-                top: '10%'
-            },
-            //图标位置
-            grid: {
-                top: '20%',
-                left: '32%'
-            },
-            xAxis: {
-                show: false
-            },
-            yAxis: [{
-                show: true,
-                data: titlename,
-                inverse: true,
-                axisLine: {
-                    show: false
-                },
-                splitLine: {
-                    show: false
-                },
-                axisTick: {
-                    show: false
-                },
-                axisLabel: {
-                    color: '#fff',
-                    formatter: (value, index) => {
-                        return [
-
-                            `{lg|${index+1}}  ` + '{title|' + value + '} '
-                        ].join('\n')
-                    },
-                    rich: {
-                        lg: {
-                            backgroundColor: '#339911',
-                            color: '#fff',
-                            borderRadius: 15,
-                            // padding: 5,
-                            align: 'center',
-                            width: 15,
-                            height: 15
-                        },
-                    }
-                },
-
 
-            }, {
-                show: true,
-                inverse: true,
-                data: valdata,
-                axisLabel: {
-                    textStyle: {
-                        fontSize: 12,
-                        color: '#fff',
-                    },
-                },
-                axisLine: {
-                    show: false
-                },
-                splitLine: {
-                    show: false
-                },
-                axisTick: {
-                    show: false
-                },
-
-            }],
-            series: [{
-                name: '条',
-                type: 'bar',
-                yAxisIndex: 0,
-                data: data,
-                barWidth: 10,
-                itemStyle: {
-                    normal: {
-                        barBorderRadius: 20,
-                        color: function(params) {
-                            var num = myColor.length;
-                            return myColor[params.dataIndex % num]
-                        },
-                    }
-                },
-                label: {
-                    normal: {
-                        show: true,
-                        position: 'inside',
-                        formatter: '{c}%'
-                    }
-                },
-            }, {
-                name: '框',
-                type: 'bar',
-                yAxisIndex: 1,
-                barGap: '-100%',
-                data: [100, 100, 100, 100, 100],
-                barWidth: 15,
-                itemStyle: {
-                    normal: {
-                        color: 'none',
-                        borderColor: '#00c1de',
-                        borderWidth: 3,
-                        barBorderRadius: 15,
-                    }
-                }
-            }, ]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
-        // window.addEventListener("resize", function () {
-        //     myChart.resize();
-        // });
-    }
 });