提交代码

zmk

2024-05-22 5e322ff901135f1dbc5a33699e25dc0efd5a640e

 javaweb-plus/javaweb-admin/src/main/resources/templates/main.html

@@ -22,7 +22,7 @@
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 16px;
      font-size: 14px;
      color: white;
      background: #314659;
      text-align: center;
@@ -61,7 +61,7 @@
      margin-left: 10px;
   }
   .rankrow{
      margin-top: 15px;
      margin-top: 12px;
   }

</style>
@@ -82,7 +82,7 @@
               </div>
               <div>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                     协调中   0
                     协调中
                     <li class="el-icon-caret-bottom" style="color: #f56c6c">
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
@@ -105,7 +105,7 @@
                  <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个
                  <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">647个
                  </span>
               </div>
               <div>
@@ -128,16 +128,16 @@
                  <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个
                  <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">68个
                  </span>
               </div>
               <div>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                     总进尺  134,1000.00m
                     已安装  0
                     <li class="el-icon-caret-bottom" style="color: #f56c6c">
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                     已完成   12,322.23m
                     未安装   68
                      <li class="el-icon-caret-bottom" style="color: #409eff">
                  </span>
               </div>
@@ -170,9 +170,6 @@
      <el-row>
         <el-col :span="16">
            <el-card class="box-card">
<!--               <div slot="header">-->
<!--                  -->
<!--               </div>-->
               <div style="height: 200px;">
                  <h3>材料统计</h3>
               </div>
@@ -197,59 +194,24 @@
                  <h3>场地详细进度(%)</h3>
               </div>
               <div style="width: 100%;height: 500px;overflow: auto">
<!--                  <div id="Chart2" style="width: 100%;height: 1500px;"></div>-->

                  <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'>-->
<!--                     <el-col :span="2">-->
<!--                        <div class="active-red">{{entity.ranking}}</div>-->
<!--                     </el-col>-->

                     <el-col :span="4">
                        <div style="font-size: 16px">场地001</div>
                     </el-col >
<!--                     <el-col :span="4">-->
<!--                        <div style="font-size: 16px">{{entity.station}}</div>-->
<!--                     </el-col >-->

                     <el-col :span="4">
                        <div style="font-size: 16px">协调中</div>
                     </el-col>
<!--                     <el-col :span="4">-->
<!--                        <div style="font-size: 16px">{{entity.status}}</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">场地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="12">-->
<!--                        <div><el-progress :stroke-width="12" :percentage="{{entity.status}}"></el-progress></div>-->
<!--                     </el-col>-->
<!--                  </el-row>-->

               </div>

@@ -282,12 +244,39 @@
      loadMap();
      getReallyData();
      totalProcess();
      stationProcess();
      //stationProcess();
      indexCount();
   })

   function indexCount() {
      let url = ctx + "/system/indexDataCount";
      $.ajaxSettings.async = false;
      $.get(url,{},function(res){
         console.log(res);
         //vm.indexDataCount = res.projectData;
      })
      $.ajaxSettings.async = false;
      console.log(vm.stationProcessData);
   }

   function stationProcess() {
      let url = ctx + "/system/projectProcess";
      $.ajaxSettings.async = false;
      $.get(url,{},function(res){
         console.log(res.projectData);
         vm.stationProcessData = res.projectData;
      })
      $.ajaxSettings.async = false;
      console.log(vm.stationProcessData);

   }
   var vm = new Vue({
      el: "#app",
      data() {
         return {};
         return {
            stationProcessData: [],
            indexDataCount :"",
         };
      },
      methods: {
      }
@@ -562,298 +551,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;
   }