地质所 沉降监测网建设项目
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
zmk
2024-05-28 b2ce4cf46bda0570ad91636fab8760694cf0b3f0 
 javaweb-plus/javaweb-admin/src/main/resources/templates/main.html


@@ -2,61 +2,341 @@


<html lang="zh" xmlns:th="http://www.thymeleaf.org">


<head>


<th:block th:include="include :: header('弹层组件')" />


<link href="../static/css/bootstrap.min.css"


   th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />


<link href="../static/css/font-awesome.min.css"


   th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />


<link href="../static/css/main/animate.min.css"


   th:href="@{/css/main/animate.min.css}" rel="stylesheet" />


<link href="../static/css/main/style.min862f.css"


   th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />


<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />


<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />


<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />


<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />


<link rel="stylesheet" th:href="@{/css/custom/main.css}" />


   <th:block th:include="include :: datetimepicker-css" />


   <style type="text/css">


      .content {


         width: 100%;


         background-color: rgba(0,0,0,0.01) !important;


      }


   </style>


<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />




<style type="text/css">


   .content {


      width: 100%;


      background-color: rgba(0,0,0,0.01) !important;


      padding:10px;


   }


   [v-cloak]{


      display: none;


   }


   .el-card__header{


      height: 40px;


      padding: 8px 20px;


   }


   .active-red{


      width: 20px;


      height: 20px;


      border-radius: 50%;


      font-size: 14px;


      color: white;


      background: #F56C6C;


      text-align: center;


      line-height: 20px;


      float: left;


   }




   .active-yellow{


      width: 20px;


      height: 20px;


      border-radius: 50%;


      font-size: 14px;


      color: white;


      background: #E6A23C;


      text-align: center;


      line-height: 20px;


      float: left;


   }




   .active-blue{


      width: 20px;


      height: 20px;


      border-radius: 50%;


      font-size: 14px;


      color: white;


      background: #67C23A;


      text-align: center;


      line-height: 20px;


      float: left;


   }


   .cdcode{


      width: 15%;


      float: left;


      margin-left: 10px;


      font-size: 16px;


      line-height: 20px;


   }


   .cdstatus{


      width: 15%;


      float: left;


      margin-left: 0px;


      font-size: 16px;


      line-height: 20px;


   }


   .cdprocess{


      width: 60%;


      float: left;


      margin-left: 10px;


   }


   .rankrow{


      margin-top: 12px;


      cursor: pointer;


   }


   .ilblock{


      border-left: 1px solid #e3e5e7;


      padding: 0 40px;


      align-content: center;


   }


   .ilblock>span{


      display: block;


      line-height: 30px;


   }






   <!-- 表格样式 -->


   .el-table, .el-table__expanded-cell {


      background-color: transparent;


      color: #4D4D4D;


      font-size: 13px;


   }




   .el-table th,


   .el-table tr,


   .el-table td {


      background-color: transparent;


      border: 0px;


      color: #4D4D4D;


      font-size: 13px;


      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;


      font-weight: Normal;


   }


   .el-table::before {


      height: 0px;


   }


   .el-table__body tr,


   .el-table__body td {


      padding: 0;


      height: 22px;


   }


   .el-table__row.warning-row {


      background:rgb(252,212,165);


   }


   .el-table__body-wrapper::-webkit-scrollbar-track {


      background-color: rgb(252,212,165);


   }


   .el-table__body-wrapper::-webkit-scrollbar {


      width: 10px;


      opacity: 0.5;


   }


   .el-table__body-wrapper::-webkit-scrollbar-thumb {


      border-radius: 15px;


      background-color:rgb(252,212,165);


   }


</style>


</head>




<body class="gray-bg">


   <div class="content">


      <div class="col-sm-12">


         <div class="ibox float-e-margins">


            <div class="ibox-title">


               <h3>沉降监测网建设工程项目分布</h3>


            </div>


            <div class="ibox-content">




               <div class="row">


                  <div class="col-sm-8">


                     <div id="map_div" style="width: 100%;height: 750px;"></div>


   <div class="content" id="app" v-cloak>


      <el-row style="height: 127px;">


         <el-col :span="6">


            <el-card class="box-card">


               <div style="flex:4;padding-right: 20px;" >


                  <div>


                     <li class="el-icon-s-promotion" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #409eff;"></li>


                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">场地数量</span>


                  </div>




                  <div class="col-sm-4">


                     <div >


                        <div style="width: 100%;height: 20px;">


                           <h3>项目总体进度(%)</h3>


                        </div>


                        <div id="Chart1" style="width: 80%;height: 250px;margin-left: 10%;"></div>


                     </div>




                     <div >


                        <div style="width: 100%;height: 20px;">


                           <h3>场地详细进度(%)</h3>


                        </div>


                        <div style="width: 100%;height: 500px;overflow: auto">


                           <div id="Chart2" style="width: 100%;height: 1500px;"></div>


                        </div>




                     </div>




                  <div style="text-align: center;">


                  <span style="color:#ED1C24;font-size: 30px;word-break: break-all;line-height: 70px">34


                  </span>


                  </div>


               </div>


            </div>


         </div>


      </div>




               <div style="flex:6;" class="ilblock">


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     协调中


                     <span style="float: right">{{indexDataCount.projectStatus0}}</span>


<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->




                  </span>


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     待开工


                     <span style="float: right">{{indexDataCount.projectStatus1}}</span>


<!--                      <li class="el-icon-caret-bottom" style="color: #e6a23c">-->


                  </span>


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     进行中


                     <span style="float: right">{{indexDataCount.projectStatus2}}</span>


<!--                     <li class="el-icon-caret-top" style="color: #409eff">-->


                  </span>




               </div>


            </el-card>


         </el-col>




         <el-col :span="6">


            <el-card class="box-card">


               <div style="flex:4;padding-right: 20px;">


                  <div>


                     <li class="el-icon-coin" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #085abe"></li>


                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">钻孔进尺</span>


                  </div>


                  <div style="text-align: center">


                  <span style="color:#1894F6;font-size: 30px;word-break: break-all;line-height: 70px;">647


                  </span>


                  </div>


               </div>




               <div style="flex:6;" class="ilblock">


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     总进尺 <span style="float: right">{{indexDataCount.footageCount}}m</span>


<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->


                  </span>


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     已完成   <span style="float: right">{{indexDataCount.footageCplCount}}m</span>


<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->


                  </span>


               </div>


            </el-card>


         </el-col>




         <el-col :span="6">


            <el-card class="box-card">


               <div style="flex:4;padding-right: 20px;">


                  <div>


                     <li class="el-icon-video-camera" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #11d713"></li>


                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">实时监控</span>


                  </div>


                  <div style="text-align: center">


                  <span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px">68


                  </span>


                  </div>


               </div>




               <div style="flex:6;" class="ilblock">


                  <div>


							


                  </div>


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     已安装  <span style="float: right">{{indexDataCount.cameraCount}}</span>


<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->


                  </span>


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     未安装   <span style="float: right">{{indexDataCount.cameraCountNaN}}</span>


<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->


                  </span>


               </div>


            </el-card>


         </el-col>


         <el-col :span="6">


            <el-card class="box-card">


               <div style="flex:4;padding-right: 20px;">


                  <div>


                     <li class="el-icon-s-order" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #917ed0"></li>


                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">资料文件</span>


                  </div>


                  <div style="text-align: center">


                  <span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px;">


                     {{indexDataCount.fileCount}}


                  </span>


                  </div>


               </div>




               <div style="flex:6;" class="ilblock">


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     施工资料  <span style="float: right">0</span>


<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->


                  </span>


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     安全资料   <span style="float: right">0</span>


<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->


                  </span>


                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">


                     质量资料   <span style="float: right">0</span>


<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->


                  </span>


               </div>




            </el-card>


         </el-col>


      </el-row>


      <el-row>


         <el-col :span="16">


            <el-card class="box-card">


               <div style="height: 200px;width: 100%;">


                  <h3>材料统计</h3>


                  <el-col :span="10" style="height: 200px;">


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


                        <template>


                           <el-table :data="tubLogs" border size="small" style="width: 100%"


                                   :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"


                                   :row-class-name="tableRowClassName">


                              <!--                           <el-table-column prop="code" label="序号"></el-table-column>-->


                              <el-table-column prop="tubName" label="名称"></el-table-column>


                              <el-table-column prop="inboundNumber" label="入库数量"></el-table-column>


                              <el-table-column prop="outboundNumber" label="出库数量"></el-table-column>


                              <el-table-column prop="unit" label="单位"></el-table-column>




                           </el-table>


                        </template>


                     </div>


                  </el-col>


                  <el-col :span="14" style="height: 200px;">


                     <div id="column-chart" style="height: 180px; width: 100%;"></div>


                  </el-col>


               </div>


            </el-card>




            <el-card class="box-card" style="margin-top: 20px;">


               <div id="map_div" style="width: 100%;height: 550px;margin-top: -5px"></div>


            </el-card>




         </el-col>




         <el-col :span="8">


            <el-card class="box-card">


               <div style="height: 200px;width: 100%">


                  <div style="width: 100%;height: 20px;">


                     <h3>项目总体进度(%)</h3>


                  </div>


                  <div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>


               </div>


            </el-card>




            <el-card class="box-card" style="margin-top: 20px;">


               <div style="width: 100%">


                  <div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">


                     <h3>场地详细进度(%)</h3>


                  </div>


                  <div style="width: 100%;height: 500px;overflow: auto">




                     <el-row class="rankrow" v-for='entity in stationProcessData' @click.native='viewStation(entity)'>


                        <el-col :span="2" >


                           <div v-if="entity.status=='协调中'" class="active-red">{{entity.ranking}}</div>


                           <div v-if="entity.status=='待开工'" class="active-yellow">{{entity.ranking}}</div>


                           <div v-if="entity.status=='进行中'" class="active-blue">{{entity.ranking}}</div>




                        </el-col>




                        <el-col :span="7">


                           <div style="font-size: 16px">{{entity.station}}</div>


                        </el-col >




                        <el-col :span="5">


                           <div style="font-size: 16px">{{entity.status}}</div>


                        </el-col>




                        <el-col :span="8">


                           <div>


                              <el-progress :stroke-width="10" :percentage="entity.value"></el-progress>


                           </div>


                        </el-col>


                     </el-row>


                  </div>


               </div>




            </el-card>




         </el-col>




      </el-row>




   </div>




@@ -68,6 +348,10 @@


   <script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" type="text/javascript"></script>


   <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js" type="text/javascript"></script>


   <script th:src="@{/js/custom/main.js}"></script>




   <script th:src="@{/js/vue.min.js}"></script>


   <script th:src="@{/js/elementUI/index.js}"></script>




   <th:block th:include="include :: sparkline-js" />


   <th:block th:include="include :: footer" />




@@ -78,8 +362,132 @@


      getReallyData();


      totalProcess();


      stationProcess();




      indexCount();


      tubLogs();


   })


   //场地和地图点击联动


   function viewStation(station) {


      var lng = station.lng;


      var lat = station.lat;


      map.centerAndZoom(new T.LngLat(lng, lat), 13);


   }




   function tubLogs() {




      const chart = echarts.init(document.getElementById("column-chart"));


      const option = {


         tooltip: {


            trigger: 'axis',


            axisPointer: {


               type: 'shadow'


            }


         },


         legend: {},


         grid: {


            left: '3%',


            right: '4%',


            bottom: '3%',


            containLabel: true


         },


         xAxis: [


            {


               type: 'category',


               data: []


            }


         ],


         yAxis: [


            {


               type: 'value'


            }


         ],


         series: [


            {


               name: '出库',


               type: 'bar',


               emphasis: {


                  focus: 'series'


               },


               data: [],


               itemStyle: {


                  // 修改柱子的颜色


                  color: '#e2b507'


               }


            },


            {


               name: '入库',


               type: 'bar',


               stack: 'Ad',


               emphasis: {


                  focus: 'series'


               },


               data: [],


               itemStyle: {


                  // 修改柱子的颜色


                  color: '#2992c6'


               }


            },




         ]


      };




      let url = ctx + "/system/stat/tubLogData";


      $.ajaxSettings.async = false;


      $.get(url,{},function(res){


         vm.tubLogs = res.tubLogs;




         res.tubLogs.forEach(function(value, index, array) {


            const tubName = value.tubName;


            const inboundNumber = value.inboundNumber;


            const outboundNumber = value.outboundNumber;


            const unit = value.unit;


            option.xAxis[0].data[index] = tubName;


            option.series[0].data[index] = outboundNumber;


            option.series[1].data[index] = inboundNumber;


         });


         chart.setOption(option, true);


      })


      $.ajaxSettings.async = false;


   }




   //首页第一行个数统计


   function indexCount() {


      let url = ctx + "/system/stat/indexDataCount";


      $.ajaxSettings.async = false;


      $.get(url,{},function(res){


         vm.indexDataCount = res.data;


         vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;


      })


      $.ajaxSettings.async = false;




   }


   //场地进度


   function stationProcess() {


      let url = ctx + "/system/stat/projectProcess";


      $.ajaxSettings.async = false;


      $.get(url,{},function(res){


         vm.stationProcessData = res.projectData;


      })


      $.ajaxSettings.async = false;


   }


   var vm = new Vue({


      el: "#app",


      data() {


         return {


            stationProcessData: [],


            indexDataCount :"",


            tubLogs:[],


         };


      },


      methods: {


         tableRowClassName({ row, rowIndex }) {


            if (rowIndex % 2 == 0) {


               return "";


            } else {


               return "warning-row";


            }


         },


      }


   });


   // 加载地图


   let map=null;


   var countries = [];


@@ -143,7 +551,7 @@




   // 获取数据库真实数据


   function getReallyData() {


      let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";


      let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/stat/project";


      $.get(url,function(res){


         var data = res.projects;


         showProjectPoint(data);


@@ -199,23 +607,25 @@


      map.openInfoWindow(markerInfoWin, point); //开启信息窗口


   }






   //总进度仪表盘


   function totalProcess() {


      var Chart1 = echarts.init(document.getElementById('Chart1'));


      var pointerData = 0; // 仪表指针数据


      let url = ctx + "/system/totalProcess";


      let url = ctx + "/system/stat/totalProcess";


      $.ajaxSettings.async = false;


      $.get(url,{},function(res){


         pointerData = res.pointerData;


         pointerData = (pointerData*100).toFixed(0);


      })


      });




      $.ajaxSettings.async = false;


      var option = {


         backgroundColor: "#fff",


         series: [


            {


               type: "gauge",


               radius: 120,


               radius: 80,


               z: 1,


               startAngle: 225,


               endAngle: -45,


@@ -350,298 +760,6 @@


      Chart1.setOption(option);


   }




   var datas = [


      { ranking: 1, station: '场地001', value: 85 },


      { ranking: 2, station: '场地002', value: 22 },


      { ranking: 3, station: '场地003', value: 33 },


      { ranking: 4, station: '场地004', value: 40 },


      { ranking: 5, station: '场地005', value: 33 },


      { ranking: 6, station: '场地006', value: 14.97 },


      { ranking: 7, station: '场地007', value: 13.03 },


      { ranking: 8, station: '场地008', value: 18.48 },


      { ranking: 9, station: '场地009', value: 16.74 },


      { ranking: 10, station: '场地010', value: 14.97 },




      { ranking: 11, station: '场地011', value: 13.03 },


      { ranking: 12, station: '场地012', value: 18.48 },




      { ranking: 13, station: '场地013', value: 16.74 },


      { ranking: 14, station: '场地014', value: 14.97 },


      { ranking: 15, station: '场地015', value: 13.03 },


      { ranking: 16, station: '场地016', value: 18.48 },




      { ranking: 17, station: '场地017', value: 16.74 },


      { ranking: 18, station: '场地018', value: 14.97 },


      { ranking: 19, station: '场地019', value: 13.03 },


      { ranking: 20, station: '场地020', value: 18.48 },




      { ranking: 21, station: '场地021', value: 16.74 },


      { ranking: 22, station: '场地022', value: 14.97 },


      { ranking: 23, station: '场地023', value: 13.03 },


      { ranking: 24, station: '场地024', value: 18.48 },




      { ranking: 25, station: '场地025', value: 16.74 },


      { ranking: 26, station: '场地026', value: 14.97 },


      { ranking: 27, station: '场地027', value: 13.03 },


      { ranking: 28, station: '场地028', value: 18.48 },




      { ranking: 29, station: '场地029', value: 13.03 },


      { ranking: 30, station: '场地030', value: 18.48 },


      { ranking: 31, station: '场地031', value: 13.03 },


      { ranking: 32, station: '场地032', value: 18.48 },


      { ranking: 33, station: '场地033', value: 13.03 },


      { ranking: 34, station: '场地034', value: 18.48 },


   ];






   var seriesName = ['已完成进度','总进度'];


   var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];




   var attackSourcesColor = [


      new echarts.graphic.LinearGradient(0, 1, 1, 1, [


         { offset: 0, color: 'rgba(255,85,127,1)' },


         { offset: 1, color: 'rgba(255,85,127,1)' },


      ]),


      new echarts.graphic.LinearGradient(0, 1, 1, 1, [


         { offset: 0, color: 'rgba(255,170,0,1)' },


         { offset: 1, color: 'rgba(255,170,0,1)' },


      ]),


      new echarts.graphic.LinearGradient(0, 1, 1, 1, [


         { offset: 0, color: 'rgba(84,112,198,1)' },


         { offset: 1, color: 'rgba(84,112,198,1)' },


      ]),


      new echarts.graphic.LinearGradient(0, 1, 1, 1, [


         { offset: 0, color: 'rgba(30,159,255,.82)' },


         { offset: 1, color: 'rgba(30,159,255,.82)' },


      ]),


   ];


	


   function stationProcess() {




      let url = ctx + "/system/projectProcess";


      $.ajaxSettings.async = false;


      $.get(url,{},function(res){


         console.log(res.projectData);


         datas = res.projectData;


      })


      $.ajaxSettings.async = false;






      var Chart2 = echarts.init(document.getElementById('Chart2'));


      var rankings = [];


      var stationData = [];


      var values = [];




      datas.forEach(function (it, index) {


         rankings.push(it.ranking);


         stationData.push(it.station);


         values.push(it.value);


      });




      option = {


         // backgroundColor: '#000',


         tooltip: {


            trigger: 'axis',


            axisPointer: {


               type: 'shadow',


            },


         },




         grid: {


            left: '-8%',


            right: '2%',


            bottom: '3%',


            top:'2%',


            containLabel: true,


         },


         xAxis: {


            type: 'value',


            splitLine: {


               show: false,


            },


            axisLabel: {


               show: false,


            },


            axisTick: {


               show: false,


            },


            axisLine: {


               show: false,


            },


         },


         yAxis: [


            {


               type: 'category',


               inverse: true,


               axisLine: {


                  show: false,


               },


               axisTick: {


                  show: false,


               },


               data: stationData,


               axisLabel: {


                  margin: 30,


                  fontSize: 14,


                  align: 'left',


                  padding: [3, 0, 0, 0],


                  color: '#000',


                  rich: {


                     nt1: {


                        color: '#fff',


                        backgroundColor: attackSourcesColor1[0],


                        width: 20,


                        height: 18,


                        fontSize: 12,


                        align: 'center',


                        borderRadius: 50,


                        lineHeight: '5',


                        padding: [2, 0, 0, 0],


                        // padding:[0,0,2,0],


                     },


                     nt2: {


                        color: '#fff',


                        backgroundColor: attackSourcesColor1[1],


                        width: 20,


                        height: 18,


                        fontSize: 12,


                        align: 'center',


                        borderRadius: 50,


                        padding: [2, 0, 0, 0],


                     },


                     nt3: {


                        color: '#fff',


                        backgroundColor: attackSourcesColor1[2],


                        width: 20,


                        height: 18,


                        fontSize: 12,


                        align: 'center',


                        borderRadius: 50,


                        padding: [2, 0, 0, 0],


                     },


                     nt: {


                        color: '#fff',


                        backgroundColor: attackSourcesColor1[3],


                        width: 20,


                        height: 18,


                        fontSize: 12,


                        align: 'center',


                        borderRadius: 50,


                        padding: [2, 0, 0, 0],


                     },


                  },


                  formatter: function (value, index) {


                     index = contains(stationData, value) + 1;


                     if (index - 1 < 3) {


                        return ['{nt' + index + '|' + index + '}'].join('\n');


                     } else {


                        return ['{nt|' + index + '}'].join('\n');


                     }


                  },


               },


            },




            {


               type: 'category',


               inverse: true,


               axisTick: 'none',


               axisLine: 'none',


               show: true,


               axisLabel: {


                  textStyle: {


                     color: '#666',


                     fontSize: '12',


                  },


               },


               data: dataFormat(values),


            },




            {  // 条状标题


               type: 'category',


               inverse: true,


               offset: -10,


               position: 'left',


               axisTick: 'none',


               axisLine: 'none',


               show: true,


               axisLabel: {


                  interval: 0,


                  color: ['#666'],


                  align: 'left',


                  verticalAlign: 'bottom',


                  lineHeight: 42,


                  fontSize: 14,


               },


               data: dataFormat(stationData),


            },


         ],


         series: [


            {


               zlevel: 1,


               name: seriesName[0],


               type: 'bar',


               barWidth: 15,


               data: dataFormat(values),


               align: 'center',


               itemStyle: {


                  normal: {


                     barBorderRadius: 10,


                  },


               },


               label: {   //条状中的样式


                  show: true,


                  fontSize: 10,


                  color: '#fff', //条装中字体颜色


                  textBorderWidth: 2,


                  padding: [2, 0, 0, 0],


               },


            },


            {


               name: seriesName[1],


               type: 'bar',


               barWidth: 15,


               barGap: '-100%',


               data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,


                  100, 100, 100, 100, 100, 100, 100, 100, 100, 100,


                  100, 100, 100, 100, 100, 100, 100, 100, 100, 100,


                  100, 100, 100, 100],


               itemStyle: {


                  normal: {


                     color: 'rgba(200,200,200,.3)',


                     //width:"100%",


                     fontSize: 12,


                     barBorderRadius: 30,


                  },


               },


            },


         ],


      };


      Chart2.setOption(option);


   }




   function dataFormat(data) {


      var arr = [];


      data.forEach(function (item, i) {


         let itemStyle = {


            color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],


         };


         arr.push({


            value: item,


            itemStyle: itemStyle,


         });


      });


      return arr;


   }




   function contains(arr, dst) {


      var i = arr.length;


      while ((i -= 1)) {


         if (arr[i] == dst) {


            return i;


         }


      }


      return false;


   }