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


@@ -13,6 +13,10 @@


   .content {


      width: 100%;


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


      padding:10px;


   }


   [v-cloak]{


      display: none;


   }


   .el-card__header{


      height: 40px;


@@ -22,9 +26,21 @@


      width: 20px;


      height: 20px;


      border-radius: 50%;


      font-size: 16px;


      font-size: 14px;


      color: white;


      background: #314659;


      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;


@@ -34,9 +50,9 @@


      width: 20px;


      height: 20px;


      border-radius: 50%;


      font-size: 16px;


      font-size: 14px;


      color: white;


      background: dodgerblue;


      background: #67C23A;


      text-align: center;


      line-height: 20px;


      float: left;


@@ -61,37 +77,94 @@


      margin-left: 10px;


   }


   .rankrow{


      margin-top: 15px;


      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" id="app">


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


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


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


         <el-col :span="6">


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


               <div>


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


                  <li class="el-icon-s-promotion" style="font-size: 18px;float: right;color: grey">


               <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 style="text-align: center;">


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


                  </span>


                  </div>


               </div>


               <div>


                  <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">34个




               <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>


               </div>


               <div>


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


                     协调中   0


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


                  <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,.65);font-size: 15px;">


                     待开工   34


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


                  </span>


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


                     进行中   0


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


                  <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>


@@ -100,22 +173,25 @@




         <el-col :span="6">


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


               <div>


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


                  <li class="el-icon-coin" style="font-size: 18px;float: right;color: grey">


               </div>


               <div>


                  <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">864个


               <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>


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


                     总进尺  134,1000.00m


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




               <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,.65);font-size: 15px;">


                     已完成   12,322.23m


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


                  <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>


@@ -123,44 +199,58 @@




         <el-col :span="6">


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


               <div>


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


                  <li class="el-icon-video-camera" style="font-size: 18px;float: right;color: grey">


               </div>


               <div>


                  <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">114个


               <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>


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


                     总进尺  134,1000.00m


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




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


                  <div>


							


                  </div>


                  <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,.65);font-size: 15px;">


                     已完成   12,322.23m


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


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


                     未安装   <span style="float: right">68</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>


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


                  <li class="el-icon-s-order" style="font-size: 18px;float: right;color: grey">


               </div>


               <div>


                  <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">3813


               <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>


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


                     总进尺  134,1000.00m


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




               <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,.65);font-size: 15px;">


                     已完成   12,322.23m


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


                  <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>




@@ -170,87 +260,76 @@


      <el-row>


         <el-col :span="16">


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


<!--               <div slot="header">-->


<!--                  -->


<!--               </div>-->


               <div style="height: 200px;">


               <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">


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


            <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="width: 100%;height: 20px;">


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


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


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


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


                  </div>


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


               </div>


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


            </el-card>




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


               <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>-->


            <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">


                     <el-col :span="2">


                        <div class="active-red">1</div>


                     </el-col>


                     <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 :span="4">


                        <div style="font-size: 16px">场地001</div>


                     </el-col >


                        </el-col>




                     <el-col :span="4">


                        <div style="font-size: 16px">协调中</div>


                     </el-col>


                        <el-col :span="7">


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


                        </el-col >




                     <el-col :span="12">


                        <div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>


                     </el-col>


                  </el-row>


                  <el-row class="rankrow">


                     <el-col :span="2">


                        <div class="active-red">1</div>


                     </el-col>


                        <el-col :span="5">


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


                        </el-col>




                     <el-col :span="4">


                        <div style="font-size: 16px">场地002</div>


                     </el-col >




                     <el-col :span="4">


                        <div style="font-size: 16px">协调中</div>


                     </el-col>




                     <el-col :span="12">


                        <div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>


                     </el-col>


                  </el-row>


                  <el-row class="rankrow">


                     <el-col :span="2">


                        <div class="active-red">1</div>


                     </el-col>




                     <el-col :span="4">


                        <div style="font-size: 16px">场地003</div>


                     </el-col >




                     <el-col :span="4">


                        <div style="font-size: 16px">协调中</div>


                     </el-col>




                     <el-col :span="12">


                        <div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>


                     </el-col>


                  </el-row>




                        <el-col :span="8">


                           <div>


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


                           </div>


                        </el-col>


                     </el-row>


                  </div>


               </div>




            </el-card>


@@ -283,13 +362,121 @@


      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: []


            },


            {


               name: '入库',


               type: 'bar',


               stack: 'Ad',


               emphasis: {


                  focus: 'series'


               },


               data: []


            },




         ]


      };




      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;


      })


      $.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 {};


         return {


            stationProcessData: [],


            indexDataCount :"",


            tubLogs:[],


         };


      },


      methods: {


         tableRowClassName({ row, rowIndex }) {


            if (rowIndex % 2 == 0) {


               return "";


            } else {


               return "warning-row";


            }


         },


      }


   });


   // 加载地图


@@ -355,7 +542,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);


@@ -411,16 +598,18 @@


      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",


@@ -562,298 +751,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;


   }