大屏右侧框架

src/views/gisHome/component/leftMain.vue

@@ -18,7 +18,7 @@
       <div class="cardList">
         <div class="card">
           <div class="iconImg">
-            <img src="@/assets/images/Attendancerate.png" alt="" />
+            <img src="@/assets/images/totalnumber.png" alt="" />
           </div>
           <p>总人数</p>
           <div class="peopleNum"><span>259</span>人</div>
@@ -67,6 +67,7 @@
         </div>
         <div class="ligner"></div>
       </div>
+      <div class="order" id="orderMain"></div>
     </div>
     <div class="topleft"></div>
     <div class="bottomright"></div>
@@ -79,9 +80,9 @@ import * as echarts from 'echarts';
 type EChartsOption = echarts.EChartsOption;
 
 const initMachinerycharts = () => {
-  var chartDom = document.getElementById('machineryMain');
+  let chartDom = document.getElementById('machineryMain');
-  var myMachineryChart = echarts.init(chartDom);
+  let myMachineryChart = echarts.init(chartDom);
-  var option: EChartsOption;
+  let option: EChartsOption;
 
   // prettier-ignore
   let dataAxis = ['水泥机', '搅拌机', '拖拉机', '推土机', '推土机', '推土机','推土机', ];
@@ -140,7 +141,7 @@ const initMachinerycharts = () => {
         type: 'slider',
         xAxisIndex: 0,
         // 滚动条背景颜色
-        backgroundColor: 'rgba(8, 14, 15, 1)',
+        backgroundColor: 'rgba(8, 14, 15, .3)',
         // 选中区域的背景颜色
         fillerColor: {
           type: 'linear',
@@ -160,16 +161,33 @@ const initMachinerycharts = () => {
           ],
           global: false // 缺省为 false
         },
-
+        showDataShadow: false,
         // 手柄大小
         handleSize: 0,
         showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
         moveHandleSize: 0, //移动手柄的大小
         // 滚动条高度
-        height: 10,
+        height: 12,
         borderRadius: 8,
+        borderColor: 'rgba(8, 14, 15, .3)',
         // 滚动条与图表的距离
-        bottom: 10,
+        bottom: 5,
+        handleSize: 5,
+        // dataZoom-slider组件离容器下侧的距离
+        // bottom: 0,
+        // 两侧缩放手柄的 icon 形状
+        handleIcon:
+          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
+        handleStyle: {
+          borderWidth: 5,
+          borderCap: 'round',
+          borderRadius: 20, // 设置滑块的圆角大小
+          color: 'rgba(27,90,169,1)', // 设置滑块的颜色
+          shadowBlur: 3, // 设置滑块阴影的模糊大小
+          shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色
+          shadowOffsetX: 1, // 设置滑块阴影的水平偏移
+          shadowOffsetY: 2 // 设置滑块阴影的垂直偏移
+        },
         start: 0,
         // 计算初始结束百分比
         end: (6 / data.length) * 100
@@ -196,7 +214,14 @@ const initMachinerycharts = () => {
 };
 
 const initOrderChart = () => {
-  const option = {
+  let chartDom = document.getElementById('orderMain');
+  let myMachineryChart = echarts.init(chartDom);
+  let option: EChartsOption;
+
+  // prettier-ignore
+  let data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+  option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -204,25 +229,174 @@ const initOrderChart = () => {
         type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
       }
     },
-    legend: {},
+    legend: {
+      left: 'right', //位置
+      icon: 'roundRect', //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
+      itemWidth: 15, // 设置宽度
+      itemHeight: 4, // 设置高度
+      itemGap: 27, // 设置间距
+      top: 10, // 设置圆角
+      data: ['入库量', '领用量'],
+      textStyle: {
+        //文字样式
+        color: '#B4CEFF',
+        fontSize: '12'
+      }
+    },
     grid: {
       left: '3%',
       right: '4%',
-      bottom: '3%',
+      bottom: '0',
-      containLabel: true
+      containLabel: true,
+      width: '90%'
     },
     xAxis: {
-      type: 'value'
+      type: 'value',
+      show: false
     },
     yAxis: {
       type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu'],
+      data,
+      offset: 60,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      inverse: true,
       axisLabel: {
         formatter: function (value, index) {
-          return '<img src="http://zmkg.cqet.top:8899/assets/product-BhSC5hsV.png" />' + value; // 不进行任何格式化
+          return `{${data[index]}|No.${index + 1}} {value|${value}}`;
+        },
+        align: 'left',
+        color: 'rgba(230, 247, 255, 1)',
+        rich: {
+          Mon: {
+            color: 'rgba(230, 247, 255, 1)',
+            fontSize: 12,
+            align: 'center',
+            width: 31,
+            height: 23,
+            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(255, 208, 59, 1)' },
+              { offset: 1, color: 'rgba(255, 208, 59, 0)' }
+            ])
+          },
+          Tue: {
+            color: 'rgba(230, 247, 255, 1)',
+            fontSize: 12,
+            align: 'left',
+            width: 31,
+            height: 23,
+            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(31, 189, 237, 1)' },
+              { offset: 1, color: 'rgba(31, 189, 237, 0)' }
+            ])
+          },
+          Wed: {
+            color: 'rgba(230, 247, 255, 1)',
+            fontSize: 12,
+            align: 'left',
+            width: 31,
+            height: 23,
+            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(67, 226, 203, 1)' },
+              { offset: 1, color: 'rgba(67, 226, 203, 0)' }
+            ])
+          }
         }
       }
     },
+    dataZoom: [
+      {
+        // 设置滚动条的隐藏或显示
+        show: true,
+        // 设置类型
+        type: 'slider',
+        // 设置背景颜色
+        backgroundColor: 'rgba(8, 14, 15, .3)',
+
+        // 设置选中范围的填充颜色
+        fillerColor: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(67, 226, 203, .5)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(21, 181, 230, .5)' // 100% 处的颜色
+            }
+          ],
+          global: false // 缺省为 false
+        },
+        borderColor: 'rgba(8, 14, 15, .3)',
+        borderCap: 'round',
+        // 是否显示detail，即拖拽时候显示详细数值信息
+        showDetail: false,
+        // handleSize: 0,
+        moveHandleSize: 0, //移动手柄的大小
+        borderRadius: 20, //滚动条圆角
+        // 数据窗口范围的起始数值
+        startValue: 0,
+        // 数据窗口范围的结束数值（一页显示多少条数据）
+        endValue: 4,
+        handleSize: 5,
+        // dataZoom-slider组件离容器下侧的距离
+        // bottom: 0,
+        // 两侧缩放手柄的 icon 形状
+        handleIcon:
+          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
+        handleStyle: {
+          borderWidth: 5,
+          borderCap: 'round',
+          borderRadius: 20, // 设置滑块的圆角大小
+          color: 'rgba(27,90,169,1)', // 设置滑块的颜色
+          shadowBlur: 3, // 设置滑块阴影的模糊大小
+          shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色
+          shadowOffsetX: 1, // 设置滑块阴影的水平偏移
+          shadowOffsetY: 2 // 设置滑块阴影的垂直偏移
+        },
+        // 控制哪个轴，如果是number表示控制一个轴，
+        // 如果是Array表示控制多个轴。此处控制第二根轴
+        yAxisIndex: [0, 1],
+        // empty：当前数据窗口外的数据，被设置为空。
+        // 即不会影响其他轴的数据范围
+        filterMode: 'empty',
+        // 滚动条高度
+        width: 12,
+        // 滚动条显示位置
+        height: '70%',
+        // 距离右边
+        right: 5,
+        showDataShadow: false, //是否显示数据阴影 默认auto
+        // 组件离容器上侧的距离
+        // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
+        top: 'middle'
+      },
+      {
+        // 没有下面这块的话，只能拖动滚动条，
+        // 鼠标滚轮在区域内不能控制外部滚动条
+        type: 'inside',
+        // 控制哪个轴，如果是number表示控制一个轴，
+        // 如果是Array表示控制多个轴。此处控制第二根轴
+        yAxisIndex: [0, 1],
+        width: 20,
+        // 滚轮是否触发缩放
+        zoomOnMouseWheel: false,
+        // 鼠标移动能否触发平移
+        moveOnMouseMove: true,
+        // 鼠标滚轮能否触发平移
+        moveOnMouseWheel: true
+      }
+    ],
+
     series: [
       {
         name: '入库量',
@@ -234,16 +408,8 @@ const initOrderChart = () => {
         emphasis: {
           focus: 'series'
         },
-        data: [320, 302, 301, 334],
+        data: [320, 302, 301, 334, 345, 356, 367],
-        label: {
+        barWidth: '3px'
-          show: true,
-          position: 'insideBottomRight',
-          distance: 52,
-          align: 'left',
-          verticalAlign: 'middle',
-          rotate: 0,
-          fontSize: 16
-        }
       },
       {
         name: '领用量',
@@ -255,15 +421,21 @@ const initOrderChart = () => {
         emphasis: {
           focus: 'series'
         },
-        data: [120, 132, 101, 134],
+        data: [120, 132, 101, 134, 152, 103, 150],
-        barWidth: '3px'
+        showBackground: true,
+        barWidth: '3px',
+        backgroundStyle: {
+          color: 'rgba(217, 231, 255, 0.1)'
+        }
       }
     ]
   };
+  option && myMachineryChart.setOption(option);
 };
 
 onMounted(() => {
   initMachinerycharts();
+  initOrderChart();
 });
 </script>
 
@@ -276,6 +448,12 @@ onMounted(() => {
   margin-left: 14px;
   margin-bottom: vh(30);
 }
+
+#orderMain {
+  width: 100%;
+  padding-right: 14px;
+  height: vh(300);
+}
 .title {
   > img {
     width: 14px;

src/views/gisHome/component/rightMain.vue

@@ -1,7 +1,740 @@
 <template>
-  <div class="management"></div>
+  <div class="management">
+    <div class="main">
+      <div class="title">
+        <div class="flex items-center">
+          <img src="@/assets/images/ligner.png" alt="" />
+          <div class="w100% flex justify-between items-center">
+            <div class="subTitle flex items-center">
+              <img src="@/assets/images/News.png" alt="" />
+              <span>项目新闻</span>
+            </div>
+            <div class="hint">PROJECT NEWS</div>
+          </div>
+          <div class="mark"></div>
+        </div>
+        <div class="ligner"></div>
+      </div>
+      <div class="events">
+        <div class="content events-content event_s">
+          <ul
+            class="events-list"
+            @mouseenter.native="autoScrollTable(true, false)"
+            @mouseleave.native="autoScrollTable(false, true)"
+            id="event_scroll"
+          >
+            <li v-for="(item, index) in events" :key="index">
+              <span class="text detail" style="display: inline"> {{ item.headline }}...</span>
+              <span class="more" v-if="!item.show" @click="onMore(item, true)">查看详情</span>
+              <span class="more" style="color: #ffb100eb" v-else @click="onMore(item, false)">关闭详情</span>
+            </li>
+          </ul>
+          <!-- <span v-else style="font-size: 20px; letter-spacing: 10px">暂无数据</span> -->
+        </div>
+      </div>
+      <div class="title">
+        <div class="flex items-center">
+          <img src="@/assets/images/ligner.png" alt="" />
+          <div class="w100% flex justify-between items-center">
+            <div class="subTitle flex items-center">
+              <img src="@/assets/images/Safety.png" alt="" />
+              <span>安全管理</span>
+            </div>
+            <div class="hint">SAFETY MANAGEMENT</div>
+          </div>
+          <div class="mark"></div>
+        </div>
+        <div class="ligner"></div>
+      </div>
+      <div class="safetyData">
+        <div class="head flex justify-around">
+          <div class="safetyData-item flex items-center">
+            <div>
+              <img src="@/assets/images/danggerNum.png" alt="" />
+            </div>
+            <div>
+              <span>危险源数量</span>
+              <p>14<span>件</span></p>
+            </div>
+          </div>
+          <div class="safetyData-item flex items-center">
+            <div>
+              <img src="@/assets/images/record.png" alt="" />
+            </div>
+            <div>
+              <span>巡检记录</span>
+              <p>14<span>件</span></p>
+            </div>
+          </div>
+          <div class="safetyData-item flex items-center">
+            <div>
+              <img src="@/assets/images/situation.png" alt="" />
+            </div>
+            <div>
+              <span>整改情况</span>
+              <p>14<span>件</span></p>
+            </div>
+          </div>
+        </div>
+        <div class="tables">
+          <div class="thead">
+            <el-table
+              :data="[]"
+              header-row-class-name="bg-transparent"
+              header-cell-class-name="bg-transparent"
+              style="--el-table-border-color: none"
+              empty-text=""
+              height="3.7vh"
+            >
+              <el-table-column prop="teamName" label="班组" />
+              <el-table-column prop="name" label="名称" />
+              <el-table-column prop="meetingDate" label="时间" />
+              <el-table-column prop="status" label="操作" />
+            </el-table>
+          </div>
+          <div class="tbody">
+            <el-table
+              :data="safetyData"
+              stripe
+              row-class-name="bg-transparent"
+              cell-class-name="bg-transparent"
+              header-row-class-name="header-row-bg-transparent"
+              header-cell-class-name="bg-transparent"
+              style="--el-table-border-color: none"
+            >
+              <el-table-column prop="teamName" label="" />
+              <el-table-column prop="name" label="" />
+              <el-table-column prop="meetingDate" label="" />
+              <el-table-column prop="status" label="">
+                <template #default="scope">
+                  <el-link type="primary" :underline="false">查看</el-link>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="title">
+        <div class="flex items-center">
+          <img src="@/assets/images/ligner.png" alt="" />
+          <div class="w100% flex justify-between items-center">
+            <div class="subTitle flex items-center">
+              <img src="@/assets/images/Quality.png" alt="" />
+              <span>质量管理</span>
+            </div>
+            <div class="hint">SAFETY MANAGEMENT</div>
+          </div>
+          <div class="mark"></div>
+        </div>
+        <div class="ligner"></div>
+      </div>
+      <div class="quality">
+        <div class="qualitydata flex items-center">
+          <div>
+            <img src="@/assets/images/qualityLogo.png" alt="" />
+          </div>
+          <div class="qualityNum">
+            <div>巡检记录 <b></b></div>
+            <p>14<span>件</span></p>
+          </div>
+          <div class="qualityNum ml-15">
+            <div>整改情况 <b></b></div>
+            <p>20<span>%</span></p>
+          </div>
+        </div>
+        <div class="qualityList text-3.5">
+          <div class="qualityItem flex items-center mb-3.25" v-for="item in 6">
+            <div>
+              <img src="@/assets/images/timeIcon.png" class="w3 mr-2" alt="" />
+              <span class="text-white">2024-11-15</span>
+            </div>
+            <div class="text-#43E2CB ml-10 mr-13.5">巡检记录</div>
+
+            <div class="text-#E6F7FF w-38.5 text-truncate">
+              <el-tooltip content="桩基钻孔深度、直径不足11111111" placement="top"> 桩基钻孔深度、直径不足</el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="title">
+        <div class="flex items-center">
+          <img src="@/assets/images/ligner.png" alt="" />
+          <div class="w100% flex justify-between items-center">
+            <div class="subTitle flex items-center">
+              <img src="@/assets/images/usercopy.png" alt="" />
+              <span>形象进度</span>
+            </div>
+            <div class="hint">PROGRESS MANAGEMENT</div>
+          </div>
+          <div class="mark"></div>
+        </div>
+        <div class="ligner"></div>
+      </div>
+      <div class="user" id="userMain"></div>
+    </div>
+    <div class="topleft"></div>
+    <div class="bottomright"></div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import * as echarts from 'echarts';
 
-<style lang="scss" scoped></style>
+type EChartsOption = echarts.EChartsOption;
+const autoScrollTable = (isAuto, isStop) => {};
+const events = ref([
+  {
+    'id': 23,
+    'headline': '公司获评2024年重庆市“专精特新”中小企业荣誉称号',
+    'content':
+      '<p><img src="/file/upload_file/2024-07-03/d2ft1zure0bqnw0rh5.jpg" title="63e222cfec0fb1fae48ce8133a28836.jpg" alt="63e222cfec0fb1fae48ce8133a28836.jpg"/></p><p>近日，重庆市经济和信息化委员会发布了《2024年重庆市专精特新中小企业申报和复核通过名单》。公司获评2024年重庆市“专精特新”中小企业荣誉称号。</p>',
+    'createdBy': '1',
+    'createdAt': '2024-07-03 17:44:18'
+  },
+  {
+    'id': 22,
+    'headline': '锦州市副市长缪徵阁一行到公司调研交流',
+    'content':
+      '<p><img src="/file/upload_file/2024-07-03/d2ft1eczdr6wvlatai.jpg" title="b32af2041363db9bb4706de22ae7b6a.jpg" alt="b32af2041363db9bb4706de22ae7b6a.jpg"/></p><p>2024年5月10日，锦州市副市长缪徵阁一行到公司调研交流。双方将以此次交流为契机，在城市更新、乡村振兴、合同能源管理等重点领域充分挖掘合作潜力，共同推动锦州市高质量发展迈上新台阶。</p>',
+    'createdBy': '1',
+    'createdAt': '2024-07-03 17:43:12'
+  },
+  {
+    'id': 20,
+    'headline':
+      '贵州省都匀市委副书记、市长、都匀经济开发区党工委副书记、管委会主任张宗良到墨冲镇丙午村实地调研沙包堡匀东农业光伏电站项目推进情况并作出工作指示。',
+    'content':
+      '<p><img src="/file/upload_file/2024-04-23/d0raj374dj6liccveg.jpg" title="890390a01d3486ef67660c3aa4da2e8.jpg" alt="890390a01d3486ef67660c3aa4da2e8.jpg"/></p><p>2024年3月20日，贵州省都匀市委副书记、市长、都匀经济开发区党工委副书记、管委会主任张宗良到墨冲镇丙午村实地调研沙包堡匀东农业光伏电站项目推进情况并作出工作指示。</p>',
+    'createdBy': '1',
+    'createdAt': '2024-04-23 14:34:06'
+  },
+  {
+    'id': 19,
+    'headline': '2024年2月27日，公司党支部书记、董事长车志文一行到广州拜访中电建新能源集团股份有限公司南方分公司',
+    'content':
+      '<p><img src="/file/upload_file/2024-03-29/d064pukanea8b175xt.png" title="image.png" alt="image.png"/></p><p style="text-indent:43px;text-autospace:ideograph-numeric;line-height:37px"><span style=";font-family:仿宋_GB2312;font-size:21px">2024年2月27日，公司党支部书记、董事长车志文一行到广州拜访中电建新能源集团股份有限公司南方分公司，双方围绕广西壮族自治区百色市德保县乡村振兴光伏发电项目（二批、三批）进展情况及下一步的战略合作进行了深入交流。双方将共同深耕能源领域，</span><span style="font-family: 仿宋_GB2312;font-size: 21px">在广西、广东、海南片区继续深化合作，</span><span style=";font-family:仿宋_GB2312;font-size:21px">为加快促进产业转型升级赋予新的动能。</span></p><p><br/></p>',
+    'createdBy': '1',
+    'createdAt': '2024-03-29 17:33:57'
+  },
+  {
+    'id': 18,
+    'headline': '公司通过2023年重庆市第二批国家高新技术企业和重庆市中小企业技术研发中心认定',
+    'content':
+      '<p><img src="/file/upload_file/2024-03-29/d064p845trsoi5jmnq.png" title="image.png" alt="image.png"/></p><p style="text-indent:43px;text-autospace:ideograph-numeric"><span style=";font-family:仿宋_GB2312;font-size:21px"><span style="font-family:仿宋_GB2312">日前，科学技术部火炬高技术产业开发中心发布了《对重庆市认定机构</span><span style="font-family:仿宋_GB2312">2023年认定报备的第二批高新技术企业进行备案的公告》，重庆市经济和信息化委员会发布了《关于公布2023年重庆市中小企业技术研发中心认定及复核结果的通知》，公司通过2023年重庆市第二批国家高新技术企业和重庆市中小企业技术研发中心认定。</span></span></p><p><br/></p>',
+    'createdBy': '1',
+    'createdAt': '2024-03-29 17:33:25'
+  },
+  {
+    'id': 17,
+    'headline': '公司顺利中标广西德保县乡村振兴光伏发电项目（第三批）EPC总承包项目、贵州都匀市沙包堡匀东农业光伏电站项目',
+    'content':
+      '<p><img src="/file/upload_file/2024-03-29/d064o8rjjjgkde3qiv.png" title="image.png" alt="image.png"/></p><p><span style=";font-family:仿宋_GB2312;font-size:21px"><span style="font-family:仿宋_GB2312">新年新气象，实干开新局，公司顺利中标广西德保县乡村振兴光伏发电项目（第三批）</span><span style="font-family:仿宋_GB2312">EPC总承包项目、贵州都匀市沙包堡匀东农业光伏电站项目，</span></span><span style=";font-family:仿宋_GB2312;font-size:21px"><span style="font-family:仿宋_GB2312">喜迎</span><span style="font-family:仿宋_GB2312">2024“开门红”，为公司全年高质量发展拉开序幕。</span></span></p><p><br/></p>',
+    'createdBy': '1',
+    'createdAt': '2024-03-29 17:32:15'
+  },
+  {
+    'id': 16,
+    'headline': '2023年8月16日，陕西省汉中市南郑区区委副书记袁蕊一行到公司调研交流。',
+    'content':
+      '<p><img src="/file/upload_file/2024-03-29/d064kp9obru4igua4t.png" title="image.png" alt="image.png"/></p><p style="text-indent:43px;text-autospace:ideograph-numeric"><span style=";font-family:仿宋_GB2312;font-size:21px">2023年8月16日，陕西省汉中市南郑区区委副书记袁蕊一行到公司调研交流。双方将进一步深化战略合作，围绕南郑区发展所需，充分发挥公司在绿色能源、城市提升、生态修复、乡村振兴等领域的综合实力，助力南郑区高质量发展。南郑区也将积极提供政策帮助和支持，双方共同以保护绿水青山为己任，共赴绿色发展之路。</span></p><p><br/></p>',
+    'createdBy': '1',
+    'createdAt': '2024-03-29 17:27:14'
+  },
+  {
+    'id': 15,
+    'headline': '公司成功中标中电建新能源集团股份有限公司投资建设的广西德保县乡村振兴光伏发电项目（第二批）EPC总承包。',
+    'content':
+      '<p><img src="/file/upload_file/2024-03-29/d064k1u1oky3e7fdfk.png" title="image.png" alt="image.png"/></p><p style="text-indent:43px;text-autospace:ideograph-numeric"><span style=";font-family:仿宋_GB2312;font-size:21px"><span style="font-family:仿宋_GB2312">公司成功中标中电建新能源集团股份有限公司投资建设的广西德保县乡村振兴光伏发电项目（第二批）</span><span style="font-family:仿宋_GB2312">EPC总承包。该项目采用“农光互补”发电模式，利用农村闲置土地、废弃矿区等闲置资源布置光伏发电。运用自主开发的新能源智能化全过程管理系统，提高工程实施过程中的质量管控和安全防控。该项目是贯彻落实碳达峰、碳中和与乡村振兴两大国家战略一体推进的生动实践，建成投运后，将改善德保县废弃矿区及石漠化地区生态环境及村民用电难问题。</span></span></p><p><br/></p>',
+    'createdBy': '1',
+    'createdAt': '2024-03-29 17:26:32'
+  },
+  {
+    'id': 14,
+    'headline': '2023年7月18日，浪潮集团有限公司高级副总裁、浪潮院士、山东浪潮数据库技术有限公司总经理张晖一行莅临公司考察交流',
+    'content':
+      '<p><img src="/file/upload_file/2024-03-29/d064b2gqr80hnrxsqw.png" title="image.png" alt="image.png"/></p><p style="text-indent:43px;text-autospace:ideograph-numeric"><span style=";font-family:仿宋_GB2312;font-size:21px">2023年7月18日，浪潮集团有限公司高级副总裁、浪潮院士、山东浪潮数据库技术有限公司总经理张晖一行莅临公司考察交流，并与公司签订战略合作框架协议。双方将充分发挥各自领域优势，实现在行业降碳、绿色能源、智慧城市、智能管理等领域的全方位合作。</span></p><p><br/></p>',
+    'createdBy': '1',
+    'createdAt': '2024-03-29 17:15:17'
+  }
+]);
+
+const safetyData = ref([]);
+new Array(10).fill(0).forEach((item) => {
+  safetyData.value.push({
+    id: 1,
+    name: '站班会',
+    teamName: '测试组',
+    meetingDate: '2024-03-18'
+  });
+});
+
+const onMore = (item, isShow) => {};
+
+const initUserChart = () => {
+  let chartDom = document.getElementById('userMain');
+  let myMachineryChart = echarts.init(chartDom);
+  let option: EChartsOption;
+
+  // prettier-ignore
+  let dataAxis = ['桩点浇筑', '支架安装', '组件安装', '箱变安装'];
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '0',
+      containLabel: true,
+      width: '90%',
+      height: '100%'
+    },
+    xAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(108, 128, 151, 0.3)'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: dataAxis,
+      offset: 0,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      inverse: true,
+      axisLabel: {
+        color: '#E6F7FF',
+        fontSize: 12
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(0, 89, 84, 0)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(102, 225, 223, 1)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [120, 132, 101, 134],
+        showBackground: true,
+        barWidth: '8px',
+        backgroundStyle: {
+          color: 'rgba(108, 128, 151, .1)'
+        }
+      }
+    ]
+  };
+  option && myMachineryChart.setOption(option);
+};
+onMounted(() => {
+  initUserChart();
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../css/gis.scss';
+
+#userMain {
+  width: 100%;
+  padding-right: 14px;
+  margin-top: vh(19);
+  height: vh(150);
+}
+
+.management {
+  width: 449px;
+  height: vh(927);
+  background: rgb(1, 26, 33, 0.4);
+  backdrop-filter: blur(8px);
+  position: absolute;
+  top: vh(122);
+  right: 21px;
+
+  .main {
+    padding-top: vh(17);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 2px;
+    background: linear-gradient(to bottom left, #43e2cb 0%, transparent 50%);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    opacity: 0.4;
+    z-index: -1;
+  }
+
+  .topleft {
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    background-image: url('@/assets/images/topleft.png');
+    transform: rotatez(90deg);
+  }
+
+  .bottomright {
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-image: url('@/assets/images/bottomright.png');
+    transform: rotatez(90deg);
+  }
+}
+
+.title {
+  > img {
+    width: 14px;
+    height: 35px;
+  }
+
+  .subTitle {
+    img {
+      width: 18.8px;
+      height: 20px;
+      margin-right: 10px;
+    }
+
+    span {
+      text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
+      font-size: 20px;
+      font-weight: 500;
+      letter-spacing: 0px;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+
+  .hint {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(204, 204, 204, 0.5);
+    margin-right: 20px;
+  }
+
+  .mark {
+    width: 2px;
+    height: vh(14);
+    background: rgba(67, 226, 203);
+    margin-right: 10px;
+  }
+
+  .ligner {
+    height: 1px;
+    background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
+    margin-left: 14px;
+  }
+}
+
+.quality {
+  margin: vh(13) 0 vh(15);
+  font-family: '思源黑体';
+  .qualitydata {
+    margin: 0 0 vh(12) 28px;
+
+    img {
+      width: 68px;
+      margin-right: 48px;
+    }
+
+    .qualityNum {
+      width: 99px;
+      height: vh(53);
+      text-align: center;
+      div {
+        /** 文本1 */
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+        margin-bottom: vh(5);
+        position: relative;
+        b {
+          position: absolute;
+          top: vh(5);
+          left: 0;
+          width: 100%;
+          height: vh(6);
+          background-color: rgba(67, 226, 203, 0.1);
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 3px;
+            height: vh(3);
+            background-color: rgba(67, 226, 203, 1);
+          }
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 3px;
+            height: vh(3);
+            background-color: rgba(67, 226, 203, 1);
+          }
+        }
+      }
+      p {
+        width: 100%;
+        height: vh(27);
+        background-color: rgba(67, 226, 203, 0.1);
+        font-size: 24px;
+        color: #fff;
+        text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
+        line-height: vh(27);
+        span {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .qualityList {
+    margin-left: 21px;
+    height: vh(90);
+    overflow: auto;
+    margin-right: 10px;
+  }
+}
+
+.safetyData {
+  margin: vh(20) 0 vh(15);
+
+  .head {
+    img {
+      width: 36px;
+    }
+
+    .safetyData-item {
+      height: vh(53);
+
+      > div {
+        > span {
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(204, 204, 204, 1);
+        }
+
+        > p {
+          text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
+          font-size: 24px;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 1);
+
+          > span {
+            font-size: 12px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 1);
+          }
+        }
+      }
+    }
+  }
+}
+
+p {
+  margin: 0;
+}
+
+.events {
+  margin: vh(20) 0 vh(15);
+  width: 100%;
+  height: vh(82);
+
+  // border: 1px solid red;
+  .events-list {
+    height: 100%;
+    overflow: auto;
+    padding-right: 10px;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      width: 100%;
+      padding-left: 20px;
+      background: url('@/assets/images/li.png') no-repeat 0 20%;
+      list-style-type: none;
+      list-style-position: inside;
+      margin-bottom: vh(8);
+      position: relative;
+
+      .detail {
+        display: inline;
+      }
+
+      .more {
+        color: rgba(67, 226, 203, 1);
+        font-size: 14px;
+        cursor: pointer;
+      }
+
+      .text {
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: vh(24);
+        color: rgba(230, 247, 255, 1);
+        text-align: justify;
+        vertical-align: top;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        max-height: 4em;
+        height: 4em;
+      }
+    }
+
+    > li:last-child {
+      margin-bottom: 0;
+    }
+
+    > li::after {
+      content: '';
+      border-left: 1px dashed rgba(0, 190, 247, 0.3);
+      position: absolute;
+      top: vh(22);
+      left: 5px;
+      width: 10px;
+      height: 85%;
+      display: block;
+    }
+
+    > li:last-child::after {
+      content: '';
+      border-left: none;
+    }
+  }
+}
+
+.content {
+  width: 100%;
+  height: vh(82);
+  padding: 0 10px 0 20px;
+}
+
+.event_s {
+  display: grid;
+  place-items: center;
+  color: #f0f8ff;
+}
+
+.tables {
+  padding: 0 13px 0 14px;
+
+  .tbody {
+    height: vh(94);
+    overflow: auto;
+    padding-right: 14px;
+  }
+
+  .thead {
+    padding-right: 20px;
+    margin-top: vh(12);
+  }
+}
+
+:deep(.el-table) {
+  background: transparent; //这是设置透明背景色
+
+  .bg-transparent {
+    background: rgba(67, 226, 203, 0.2) !important; //这是设置透明背景色
+    border: none; //这是设置透明边框
+    color: rgba(255, 255, 255, 1); //这是设置字体颜色
+    font-size: 12px;
+    text-align: center;
+    padding: vh(4) 0;
+    height: vh(26) !important;
+  }
+
+  .el-table__row--striped {
+    background: transparent !important; //这是设置透明背景色
+
+    .bg-transparent {
+      background: transparent !important; //这是设置透明背景色
+    }
+  }
+
+  .header-row-bg-transparent {
+    display: none;
+  }
+
+  thead {
+    .bg-transparent {
+      background: transparent !important; //这是设置透明背景色
+      color: #43e2cb;
+      font-weight: 400;
+      font-size: 14px;
+    }
+  }
+
+  .el-table__empty-block {
+    display: none;
+  }
+}
+
+/* 滚动条整体样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  /* 纵向滚动条宽度 */
+}
+
+/* 滚动条轨道 */
+::-webkit-scrollbar-track {
+  background: transparent;
+  /* 轨道背景颜色 */
+  border-radius: 5px;
+  /* 轨道圆角 */
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(67, 226, 203, 0.5) 0%, rgba(21, 181, 230, 0.5) 100%);
+  border-radius: 5px;
+  /* 滑块圆角 */
+}
+
+/* 隐藏滚动条的上下手柄 */
+::-webkit-scrollbar-button {
+  display: none;
+}
+</style>