feat: 周报

src/assets/styles/common.scss

@@ -36,4 +36,20 @@
 .common-el-dialog-footer {
   display: flex;
   justify-content: center;
+}
+
+.w-full {
+  width: 100%;
+}
+.h-full {
+  height: 100%;
+}
+.flex {
+  display: flex;
+}
+.aligin-center {
+  align-items: center;
+}
+.justify-between {
+  justify-content: space-between;
 }

src/router/index.js

@@ -136,9 +136,15 @@ export const constantRoutes = [
       {
         path: "/secure/daily-newspaper",
         component: () => import("@/views/secure/daily-newspaper/index"),
-        name: "home",
+        name: "daily-newspaper",
         meta: { title: "日报" },
       },
+      {
+        path: "/secure/weekly-report",
+        component: () => import("@/views/secure/weekly-report/index"),
+        name: "weekly-report",
+        meta: { title: "周报" },
+      },
     ],
   },
 ];

src/views/home/components/box1 copy/index.vue

@@ -1,10 +1,6 @@
 <template>
-  <div>
-    <div
-      class="border-l-4 border-t-0 border-r-0 border-b-0 border-light-blue-500 border-solid pl-2 text-[#000]"
-    >
-      可靠性完成情况
-    </div>
+  <div class="w-full h-full">
+    <div class="c-title">可靠性完成情况</div>
     <div
       ref="barChart2"
       id="barChart2"

src/views/home/components/box1/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-full h-full">
     <div class="c-title">风险辩识</div>
     <div
       ref="barChart"

src/views/home/components/map/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="map">
+  <div class="h-full">
     <div class="flex align-middle">
       <el-date-picker v-model="year" type="year" placeholder="选择年">
       </el-date-picker>
       <el-button type="primary" style="margin-left: 4px">导出</el-button>
       <el-button @click="back" type="text">返回></el-button>
     </div>
-    <div id="hy-map" style="width: 100%; height: 550px"></div>
+    <div id="hy-map" style="width: 100%; height: 80%"></div>
     <div class="item-container">
       <div class="item" v-for="(ite, i) in itemData" :key="i">
         <div class="val">121</div>
@@ -82,76 +82,76 @@ export default {
             // color: ["#A5DCF4", "#006edd"],
           },
         },
-        geo: [
-          {
-            map: "js",
-            roam: false, //是否允许缩放
-            zoom: 1.1, //默认显示级别
-            scaleLimit: {
-              min: 0,
-              max: 3,
-            }, //缩放级别
-            itemStyle: {
-              normal: {
-                areaColor: "transparent",
-                borderColor: "#3fdaff",
-                borderWidth: 2,
-                shadowColor: "rgba(63, 218, 255, 0.5)",
-                shadowBlur: 30,
-              },
-              emphasis: {
-                areaColor: "#2B91B7",
-              },
-            },
-            tooltip: {
-              show: false,
-            },
-          },
-        ],
+        // geo: [
+        //   {
+        //     map: "js",
+        //     roam: false, //是否允许缩放
+        //     zoom: 1.1, //默认显示级别
+        //     scaleLimit: {
+        //       min: 0,
+        //       max: 3,
+        //     }, //缩放级别
+        //     itemStyle: {
+        //       normal: {
+        //         areaColor: "transparent",
+        //         borderColor: "#3fdaff",
+        //         borderWidth: 2,
+        //         shadowColor: "rgba(63, 218, 255, 0.5)",
+        //         shadowBlur: 30,
+        //       },
+        //       emphasis: {
+        //         areaColor: "#2B91B7",
+        //       },
+        //     },
+        //     tooltip: {
+        //       show: false,
+        //     },
+        //   },
+        // ],
         series: [
-          {
-            type: "effectScatter",
-            coordinateSystem: "geo",
-            z: 5,
-            data: [],
-            symbolSize: 14,
-            label: {
-              normal: {
-                show: true,
-                formatter: function (params) {
-                  return (
-                    "{fline|地点：" +
-                    params.data.city +
-                    "}\n{tline|" +
-                    (params.data.info || "发生xx集件") +
-                    "}"
-                  );
-                },
-                position: "top",
-                backgroundColor: "rgba(233,63,66,.9)",
-                padding: [0, 0],
-                borderRadius: 3,
-                lineHeight: 32,
-                color: "#ffffff",
-                rich: {
-                  fline: {
-                    padding: [0, 10, 10, 10],
-                    color: "#ffffff",
-                  },
-                  tline: {
-                    padding: [10, 10, 0, 10],
-                    color: "#ffffff",
-                  },
-                },
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              color: "#e93f42",
-            },
-          },
+          // {
+          //   type: "effectScatter",
+          //   coordinateSystem: "geo",
+          //   z: 5,
+          //   data: [],
+          //   symbolSize: 14,
+          //   label: {
+          //     normal: {
+          //       show: true,
+          //       formatter: function (params) {
+          //         return (
+          //           "{fline|地点：" +
+          //           params.data.city +
+          //           "}\n{tline|" +
+          //           (params.data.info || "发生xx集件") +
+          //           "}"
+          //         );
+          //       },
+          //       position: "top",
+          //       backgroundColor: "rgba(233,63,66,.9)",
+          //       padding: [0, 0],
+          //       borderRadius: 3,
+          //       lineHeight: 32,
+          //       color: "#ffffff",
+          //       rich: {
+          //         fline: {
+          //           padding: [0, 10, 10, 10],
+          //           color: "#ffffff",
+          //         },
+          //         tline: {
+          //           padding: [10, 10, 0, 10],
+          //           color: "#ffffff",
+          //         },
+          //       },
+          //     },
+          //     emphasis: {
+          //       show: true,
+          //     },
+          //   },
+          //   itemStyle: {
+          //     color: "#fff",
+          //   },
+          // },
 
           //地图
           {
@@ -167,6 +167,12 @@ export default {
                 show: false,
               },
             },
+            select: {
+              itemStyle: {
+                // color: "#fff", // 设置地图点击后的颜色
+                areaColor: "#304156",
+              },
+            },
             itemStyle: {
               normal: {
                 borderColor: "#2980b9",

src/views/home/index.vue

@@ -1,27 +1,30 @@
 <template>
-  <div class="home-container">
+  <div class="app-container">
     <el-row :gutter="10">
-      <el-col :span="8" class="h-full">
-        <el-card>
+      <el-col :span="8" class="h-full-calc">
+        <el-card style="height: 100%">
           <PointsRanking></PointsRanking>
         </el-card>
       </el-col>
-      <el-col :span="8" class="h-full">
-        <MapHy></MapHy>
+      <el-col :span="8" class="h-full-calc">
+        <el-card class="h-full">
+          <MapHy></MapHy>
+        </el-card>
       </el-col>
-      <el-col :span="8" class="h-full">
+      <el-col :span="8" class="h-full-calc">
         <el-card class="h-48">
           <Box2
             v-if="chartOptions.data && chartOptions.data.length > 0"
             :chartOptions="chartOptions"
-            height="280px"
+            height="95%"
           ></Box2>
+          <el-empty v-else></el-empty>
         </el-card>
         <el-card class="h-48 mt-10">
           <Box1
             v-if="chartOptions.data && chartOptions.data.length > 0"
             :chartOptions="chartOptions"
-            height="280px"
+            height="95%"
           ></Box1>
           <el-empty v-else></el-empty>
         </el-card>
@@ -70,15 +73,12 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.home-container {
-  margin: 8px;
-}
 .mt-10 {
   margin-top: 10px;
 }
 
-.h-full {
-  height: calc(100vh - 180px);
+.h-full-calc {
+  height: calc(100vh - 200px);
 }
 .mt-10 {
   margin-top: 10px;
@@ -95,4 +95,9 @@ export default {
 .el-card__body {
   height: 100%;
 }
+::v-deep {
+  .el-card__body {
+    height: 100%;
+  }
+}
 </style>

src/views/secure/weekly-report/components/level3-above-plans-table.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="date" label="序号" width="80" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="工作内容" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="风险等级" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="作业时间" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="施工单位" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="运维单位" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="专业部门" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="到岗到位安排" align="center">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style></style>

src/views/secure/weekly-report/components/line-missing-situation-table.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="name" label="单位" align="center"> </el-table-column>
+    <el-table-column prop="address" label="馈线数量（条）" align="center">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="杆号牌缺失目前已排查线路条数"
+      align="center"
+    >
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="杆号牌缺失待排查线路条数"
+      align="center"
+    >
+    </el-table-column>
+    <el-table-column prop="address" label="排查完成率" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="缺失杆号牌块数" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="已完成整改块数" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="整改率" align="center">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style></style>

src/views/secure/weekly-report/components/next-week-plan-situation-table.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="name" label="单位名称" align="center">
+    </el-table-column>
+    <el-table-column label="作业类型" align="center">
+      <el-table-column prop="address" label="倒闸操作" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="配网工程" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="运维检修" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="总计" align="center">
+      </el-table-column>
+    </el-table-column>
+    <el-table-column prop="address" label="带电作业数量" align="center">
+    </el-table-column>
+    <el-table-column label="作业风险等级" align="center">
+      <el-table-column prop="address" label="三级" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="四级" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="五级" align="center">
+      </el-table-column>
+    </el-table-column>
+    <el-table-column prop="address" label="重点关注检修面" align="center">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style></style>

src/views/secure/weekly-report/components/thoughtful-job-situation-table.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="name" label="作业单位" align="center">
+    </el-table-column>
+    <el-table-column label="督查现场数量" align="center">
+      <el-table-column prop="address" label="三级风险" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="四级风险" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="五级风险" align="center">
+      </el-table-column>
+    </el-table-column>
+    <el-table-column prop="address" label="领导现场督查次数" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="专业管理人员督查次数" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="发现问题数量" align="center">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="督查履职不到位现场数量"
+      align="center"
+    >
+    </el-table-column>
+    <el-table-column prop="address" label="市公司查处问题数量" align="center">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style></style>

src/views/secure/weekly-report/components/update-on-external-risks-table.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="name" label="单位" align="center"> </el-table-column>
+    <el-table-column prop="address" label="外触隐患" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="已治理" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="完成率" align="center">
+    </el-table-column>
+    <el-table-column prop="address" label="备注" align="center">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style></style>

src/views/secure/weekly-report/components/weekly-plan-situation-table.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="date" label="序号" width="80" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="作业单位" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="作业信息总数" align="center">
+    </el-table-column>
+    <el-table-column label="周计划" align="center">
+      <el-table-column prop="address" label="周计划总数" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="周计划取消书" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="周计划执行率" align="center">
+      </el-table-column>
+    </el-table-column>
+    <el-table-column label="临时计划数" align="center">
+      <el-table-column prop="address" label="临时计划总数" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="临时计划取消数" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="临时计划执行率" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="临时计划率" align="center">
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style></style>

src/views/secure/weekly-report/components/weekly-violation-situation-table.vue

@@ -0,0 +1,60 @@
+
+<template>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="date" label="序号" width="80" align="center">
+    </el-table-column>
+    <el-table-column prop="name" label="作业单位" align="center">
+    </el-table-column>
+    <el-table-column label="省公司查处违章" align="center">
+      <el-table-column prop="address" label="严重" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="一般" align="center">
+      </el-table-column>
+    </el-table-column>
+    <el-table-column label="市公司查处违章" align="center">
+      <el-table-column prop="address" label="严重" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="一般" align="center">
+      </el-table-column>
+    </el-table-column>
+    <el-table-column label="县公司查处违章" align="center">
+      <el-table-column prop="address" label="严重" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="一般" align="center">
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style></style>

src/views/secure/weekly-report/index.vue

@@ -1,7 +1,61 @@
 <template>
-  <div class="container">周报</div>
+  <div class="app-container">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="本周计划执行情况" name="1">
+        <WeeklyPlanSituationTable />
+      </el-tab-pane>
+      <el-tab-pane label="三级及以上作业风险计划" name="2">
+        <Level3AbovePlansTable />
+      </el-tab-pane>
+      <el-tab-pane label="下周计划安排情况" name="3">
+        <NextWeekPlanSituationTable />
+      </el-tab-pane>
+      <el-tab-pane label="本周违章查处情况" name="4">
+        <WeeklyViolationSituationTable />
+      </el-tab-pane>
+      <el-tab-pane label="本周到岗到位履职情况" name="5">
+        <ThoughtfulJobSituationTable />
+      </el-tab-pane>
+      <el-tab-pane label="防外人触电隐患排查" name="6">
+        <UpdateOnExternalRisksTable />
+      </el-tab-pane>
+      <el-tab-pane label="线路杆号牌缺失情况" name="7">
+        <LineMissingSituationTable />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped></style>
+<script>
+import Level3AbovePlansTable from "./components/level3-above-plans-table.vue";
+import LineMissingSituationTable from "./components/line-missing-situation-table.vue";
+import NextWeekPlanSituationTable from "./components/next-week-plan-situation-table.vue";
+import ThoughtfulJobSituationTable from "./components/thoughtful-job-situation-table.vue";
+import UpdateOnExternalRisksTable from "./components/update-on-external-risks-table.vue";
+import WeeklyPlanSituationTable from "./components/weekly-plan-situation-table.vue";
+import WeeklyViolationSituationTable from "./components/weekly-violation-situation-table.vue";
+export default {
+  components: {
+    Level3AbovePlansTable,
+    LineMissingSituationTable,
+    NextWeekPlanSituationTable,
+    ThoughtfulJobSituationTable,
+    UpdateOnExternalRisksTable,
+    WeeklyPlanSituationTable,
+    WeeklyViolationSituationTable,
+  },
+  name: "weekly-report",
+  data() {
+    return {
+      activeName: "1",
+    };
+  },
+  created() {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>