From cce0b81dc3f71e32163813c1bd665c96c410cd9b Mon Sep 17 00:00:00 2001
From: Luck-Xiaomi <1569717859@qq.com>
Date: Wed, 31 Aug 2022 18:07:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E6=8C=87?=
 =?UTF-8?q?=E6=8C=A5=E4=B8=AD=E5=BF=83)=EF=BC=9A=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E4=BF=A1=E6=81=AF=E3=80=81=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E6=83=85=E5=86=B5=E7=9A=84=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/projectAdmin/zjsj/command/index.vue |  65 ++--
 .../projectAdmin/zjsj/command/leftFour.vue    | 361 +++++++++++++++++-
 .../projectAdmin/zjsj/command/leftOne.vue     |  81 +++-
 .../projectAdmin/zjsj/command/leftTwo.vue     |  85 ++++-
 src/views/projectAdmin/zjsj/index.vue         |   9 +
 5 files changed, 543 insertions(+), 58 deletions(-)

diff --git a/src/views/projectAdmin/zjsj/command/index.vue b/src/views/projectAdmin/zjsj/command/index.vue
index 31b9a4e3..3538d50b 100644
--- a/src/views/projectAdmin/zjsj/command/index.vue
+++ b/src/views/projectAdmin/zjsj/command/index.vue
@@ -1,64 +1,76 @@
 <template>
   <div class="containerBox">
-    <!-- <div class="leftBox">
+    <div class="leftBox">
       <div class="leftOne">
-        <leftOne></leftOne>
+        <LeftOne />
       </div>
       <div class="leftTwo">
-        <leftTwo></leftTwo>
+        <LeftTwo />
       </div>
       <div class="leftThree">
-        <leftThree></leftThree>
+        <LeftThree />
       </div>
       <div class="leftFour">
-        <leftFour></leftFour>
+        <LeftFour />
       </div>
     </div>
     <div class="centerBox">
       <div class="centerTop">
-        <center></center>
+        <Center />
       </div>
       <div class="centerBot">
         <div class="one">
-          <centerBOne></centerBOne>
+          <CenterBOne />
         </div>
         <div class="two">
-          <centerBTwo></centerBTwo>
+          <CenterBTwo />
         </div>
       </div>
     </div>
     <div class="rightBox">
       <div class="rightOne">
-        <rightOne></rightOne>
+        <RightOne />
       </div>
       <div class="rightTwo">
-        <rightTwo></rightTwo>
+        <RightTwo />
       </div>
       <div class="rightThree">
-        <rightThree></rightThree>
+        <RightThree />
       </div>
       <div class="rightFour">
-        <rightFour></rightFour>
+        <RightFour />
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
 <script>
-import leftOne from './leftOne'
-import leftTwo from './leftTwo'
-import leftThree from './leftThree'
-import leftFour from './leftFour'
-import center from './center'
-import centerBOne from './centerBOne'
-import centerBTwo from './centerBTwo'
-import rightOne from './rightOne'
-import rightTwo from './rightTwo'
-import rightThree from './rightThree'
-import rightFour from './rightFour'
+import LeftOne from './LeftOne'
+import LeftTwo from './LeftTwo'
+import LeftThree from './LeftThree'
+import LeftFour from './LeftFour'
+import Center from './Center'
+import CenterBOne from './CenterBOne'
+import CenterBTwo from './CenterBTwo'
+import RightOne from './RightOne'
+import RightTwo from './RightTwo'
+import RightThree from './RightThree'
+import RightFour from './RightFour'
 
 export default {
-  components: { leftOne, leftTwo, leftThree, leftFour, center, centerBOne, centerBTwo, rightOne, rightTwo, rightThree, rightFour },
+  components: {
+    LeftOne,
+    LeftTwo,
+    LeftThree,
+    LeftFour,
+    Center,
+    CenterBOne,
+    CenterBTwo,
+    RightOne,
+    RightTwo,
+    RightThree,
+    RightFour
+  },
   data() {
     return {}
   }
@@ -70,7 +82,7 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
-  background: url(../assets/temp/1.png) no-repeat;
+  // background: url(../assets/temp/1.png) no-repeat;
   background-size: 100% 100%;
   .leftBox {
     width: 25%;
@@ -97,7 +109,6 @@ export default {
       display: flex;
       .one {
         width: 100%;
-        // margin-left: 10%;
       }
       .two {
         width: 100%;
diff --git a/src/views/projectAdmin/zjsj/command/leftFour.vue b/src/views/projectAdmin/zjsj/command/leftFour.vue
index 9dbaf38e..628b89d6 100644
--- a/src/views/projectAdmin/zjsj/command/leftFour.vue
+++ b/src/views/projectAdmin/zjsj/command/leftFour.vue
@@ -1,21 +1,368 @@
 <template>
-  <div>
-    <Card title="设备管理">
-      <div class="contentBox">
-        123
+  <Card title="设备管理">
+    <div class="container">
+      <div class="item" ref="firstChart"></div>
+      <div class="item" ref="secondChart"></div>
+      <div class="item" ref="thirdChart"></div>
+      <div class="first-box box">
+        <div class="box-title">塔吊设备数</div>
+        <img class="image" src="" alt="">
       </div>
-    </Card>
-  </div>
+    </div>
+  </Card>
 </template>
 
 <script>
+import echarts from 'echarts4'
+
 import Card from '../components/Card'
+
 export default {
   components: { Card },
   data() {
     return {}
+  },
+  mounted() {
+    this.initChart('firstChart')
+    this.initChart('secondChart')
+    this.initChart('thirdChart')
+  },
+  methods: {
+    initChart(ref) {
+      const myChart = echarts.init(this.$refs[ref])
+
+      let angle = 0 //角度，用来做简单的动画效果的
+      let value = 7
+      const option = {
+        // backgroundColor: '#061740',
+        title: {
+          text: value,
+          x: 'center',
+          y: 'center',
+          top: '35%',
+          textStyle: {
+            fontSize: 20,
+            color: '#e5e442'
+          }
+        },
+        series: [
+          {
+            name: 'ring5',
+            type: 'custom',
+            coordinateSystem: 'none',
+            renderItem: function (params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+                  startAngle: ((0 + angle) * Math.PI) / 180,
+                  endAngle: ((90 + angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: '#0CD3DB',
+                  fill: 'transparent',
+                  lineWidth: 1.5
+                },
+                silent: true
+              }
+            },
+            data: [0]
+          },
+          {
+            name: 'ring5',
+            type: 'custom',
+            coordinateSystem: 'none',
+            renderItem: function (params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+                  startAngle: ((180 + angle) * Math.PI) / 180,
+                  endAngle: ((270 + angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: '#0CD3DB',
+                  fill: 'transparent',
+                  lineWidth: 1
+                },
+                silent: true
+              }
+            },
+            data: [0]
+          },
+          {
+            name: 'ring5',
+            type: 'custom',
+            coordinateSystem: 'none',
+            renderItem: function (params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
+                  startAngle: ((270 + -angle) * Math.PI) / 180,
+                  endAngle: ((40 + -angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: '#0CD3DB',
+                  fill: 'transparent',
+                  lineWidth: 1
+                },
+                silent: true
+              }
+            },
+            data: [0]
+          },
+          {
+            name: 'ring5',
+            type: 'custom',
+            coordinateSystem: 'none',
+            renderItem: function (params, api) {
+              return {
+                type: 'arc',
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
+                  startAngle: ((90 + -angle) * Math.PI) / 180,
+                  endAngle: ((220 + -angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: '#0CD3DB',
+                  fill: 'transparent',
+                  lineWidth: 1
+                },
+                silent: true
+              }
+            },
+            data: [0]
+          },
+          {
+            name: 'ring5',
+            type: 'custom',
+            coordinateSystem: 'none',
+            renderItem: function (params, api) {
+              let x0 = api.getWidth() / 2
+              let y0 = api.getHeight() / 2
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
+              let point = getCirlPoint(x0, y0, r, 90 + -angle)
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 2
+                },
+                style: {
+                  stroke: '#0CD3DB', // 粉
+                  fill: '#0CD3DB'
+                },
+                silent: true
+              }
+            },
+            data: [0]
+          },
+          {
+            name: 'ring5', // 绿点
+            type: 'custom',
+            coordinateSystem: 'none',
+            renderItem: function (params, api) {
+              let x0 = api.getWidth() / 2
+              let y0 = api.getHeight() / 2
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
+              let point = getCirlPoint(x0, y0, r, 270 + -angle)
+              return {
+                type: 'circle',
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 2
+                },
+                style: {
+                  stroke: '#0CD3DB', // 绿
+                  fill: '#0CD3DB'
+                },
+                silent: true
+              }
+            },
+            data: [0]
+          },
+          {
+            name: '吃猪肉频率',
+            type: 'pie',
+            radius: ['56%', '45%'],
+            center: ['50%', '50%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: 'center'
+              }
+            },
+            data: [
+              {
+                value: value,
+                name: '',
+                itemStyle: {
+                  normal: {
+                    color: {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#4FADFD' // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: '#28E8FA' // 100% 处的颜色
+                        }
+                      ]
+                    }
+                  }
+                }
+              },
+              {
+                value: 100 - value,
+                name: '',
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: '#173164'
+                  }
+                }
+              }
+            ]
+          },
+
+          {
+            name: '',
+            type: 'gauge',
+            radius: '58%',
+            center: ['50%', '50%'],
+            startAngle: 0,
+            endAngle: 359.9,
+            splitNumber: 8,
+            hoverAnimation: true,
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              length: 60,
+              lineStyle: {
+                width: 3,
+                // 分隔线的颜色
+                color: '#182337'
+              }
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+                name: ''
+              }
+            ]
+          }
+        ]
+      }
+      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+      function getCirlPoint(x0, y0, r, angle) {
+        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
+        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
+        return {
+          x: x1,
+          y: y1
+        }
+      }
+
+      function draw() {
+        angle = angle + 3
+        myChart.setOption(option, true)
+        //window.requestAnimationFrame(draw);
+      }
+
+      setInterval(function () {
+        //用setInterval做动画感觉有问题
+        draw()
+      }, 100)
+      myChart.setOption(option)
+    }
   }
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  transform: translateY(-20px);
+
+
+  .item {
+    display: inline-block;
+    width: calc(100% / 2);
+    height: 100%;
+    color: transparent;
+
+    &:nth-child(1) {
+      transform: translateX(-20%);
+    }
+
+    &:nth-child(2) {
+      transform: translateX(-47%);
+    }
+
+    &:nth-child(3) {
+      transform: translateX(-75%);
+    }
+  }
+
+  .box {
+    position: absolute;
+    color: #fff;
+    text-align: center;
+    font-size: 12px;
+    
+    .box-title {
+      margin-bottom: 3px;
+    }
+
+    .image {
+      width: 20px;
+      height: 20px;
+      background-color: green;
+    }
+  }
+
+  .first-box {
+    bottom: 30%;
+    left: 8%;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/command/leftOne.vue b/src/views/projectAdmin/zjsj/command/leftOne.vue
index 39a51e64..f19aa5c8 100644
--- a/src/views/projectAdmin/zjsj/command/leftOne.vue
+++ b/src/views/projectAdmin/zjsj/command/leftOne.vue
@@ -1,31 +1,80 @@
 <template>
-  <div>
-    <Card title="项目信息">
-      <div class="contentBox">
-        <div class="box">
-          <span>项目位置</span>
-          <span>建宁路与热河交叉路口</span>
+  <Card title="项目信息">
+    <div class="container">
+      <div class="list">
+        <div class="list-item" v-for="(item, index) in list" :key="index">
+          <span class="label">{{ item.name }}</span>
+          <span class="value">{{ item.content }}</span>
         </div>
       </div>
-    </Card>
-  </div>
+    </div>
+  </Card>
 </template>
 
 <script>
 import Card from '../components/Card'
 export default {
   components: { Card },
-  data() {
-    return {}
-  }
+  data: () => ({
+    list: [
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+      { name: '项目位置', content: '测试测试测试测试' },
+    ],
+  }),
 }
 </script>
 
 <style lang="less" scoped>
-.box {
-  height: 40px;
-  line-height: 40px;
-  background-image: url('~@/assets/images/projectZjsj/intro.png');
-  background-size: 100%;
+.container {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+
+  .list {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #fff;
+    font-weight: 500;
+    overflow-y: scroll;
+
+    .list-item {
+      box-sizing: border-box;
+      border-left: 4px solid #66d3d8;
+      margin-bottom: 5px;
+      padding: 10px 30px;
+      width: 100%;
+      background-image: linear-gradient(to right , #3b7589, #212c3e);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all .3s;
+
+      &:hover {
+        padding: 30px;
+      }
+
+      &:hover .value {
+        color: #c2805f;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .label {
+        margin-right: 30px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/projectAdmin/zjsj/command/leftTwo.vue b/src/views/projectAdmin/zjsj/command/leftTwo.vue
index 51ba3c02..addaebb1 100644
--- a/src/views/projectAdmin/zjsj/command/leftTwo.vue
+++ b/src/views/projectAdmin/zjsj/command/leftTwo.vue
@@ -1,21 +1,90 @@
 <template>
-  <div>
-    <Card title="人员概况">
-      <div class="contentBox">
-        123
-      </div>
-    </Card>
-  </div>
+  <Card title="人员概况">
+    <div class="container" ref="chart"></div>
+  </Card>
 </template>
 
 <script>
+import echarts from 'echarts4'
+
 import Card from '../components/Card'
+
 export default {
   components: { Card },
   data() {
     return {}
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      const myChart = echarts.init(this.$refs.chart)
+      const option = {
+        grid: {
+          top: '20px',
+          left: '30px',
+          right: '20px',
+          bottom: '40px'
+        },
+        xAxis: {
+          boundaryGap: true,
+          type: 'category',
+          data: ['总人数', '实名制人数', '劳务人数', '出勤人数', '退场人数'],
+          axisLabel: {
+            textStyle: {
+              show: true,
+              color: '#fff'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: '#4a6290'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              show: true,
+              color: '#fff'
+            }
+          }
+        },
+        series: [
+          {
+            name: '报警',
+            data: [150, 80, 70, 110, 130],
+            type: 'bar',
+            barWidth: '25%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#fb6e34'
+                },
+                
+                {
+                  offset: 1,
+                  color: '#252d3f'
+                }
+              ])
+            }
+          }
+        ]
+      }
+      myChart.setOption(option)
+    }
   }
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/index.vue b/src/views/projectAdmin/zjsj/index.vue
index c6303798..84d69d19 100644
--- a/src/views/projectAdmin/zjsj/index.vue
+++ b/src/views/projectAdmin/zjsj/index.vue
@@ -159,4 +159,13 @@ export default {
     height: calc(100% - 110px);
   }
 }
+
+/* 全局滚动条样式 */
+::v-deep ::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 0 !important;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8 !important;
+  cursor: pointer !important;
+}
 </style>