新增工作开展模块

src/views/data-statistics/left-side/components/workSituation.vue

@@ -36,12 +36,33 @@
           </el-tooltip>
         </div>
       </div>
-      <div v-show="labelId == 1">
+      <div v-show="labelId !== 0" class="chartBody">
         <div class="chart-wrapper">
-          <div class="container" ref="jobTypeTenementRef"></div>
+          <div class="container" ref="tenementRef"></div>
+        </div>
+        <div class="screenTime">
+          <span>时间筛选</span>
+          <img
+            src="@/assets/images/data-statistics/left/screenIcon.png"
+            alt=""
+          />
         </div>
-        <div>111</div>
       </div>
+      <!-- <div v-show="labelId == 2" class="chartBody">
+        <div class="chart-wrapper">
+          <div class="container" ref="villageWorkTenementRef"></div>
+        </div>
+      </div>
+      <div v-show="labelId == 3" class="chartBody">
+        <div class="chart-wrapper">
+          <div class="container" ref="supervisionWorkTenementRef"></div>
+        </div>
+      </div>
+      <div v-show="labelId == 4" class="chartBody">
+        <div class="chart-wrapper">
+          <div class="container" ref="mediateTenementRef"></div>
+        </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -88,18 +109,44 @@ const clickMenuOption = (id: any) => {
   });
   label.value[id].check = true;
   labelId.value = id;
+  switch (labelId.value) {
+    case 1:
+      getjobType();
+      break;
+    case 2:
+      getvillageWork();
+      break;
+    case 3:
+      getsupervisionWork();
+      break;
+    case 4:
+      getmediate();
+      break;
+    default:
+      break;
+  }
 };
 //工作类型折线图
-const jobTypeTenementRef = ref();
+const tenementRef = ref();
-let option = {
+let jobTypeOption = {
-  title: {
-    text: "Stacked Line",
-  },
   tooltip: {
     trigger: "axis",
   },
   legend: {
-    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
+    data: ["待完成", "已完成"],
+    top: "top",
+    left: "center",
+    orient: "horizontal",
+    itemWidth: 15,
+    itemHeight: 15,
+    itemGap: 15,
+    borderRadius: 0,
+    textStyle: {
+      color: "#D0DEEE",
+      fontFamily: "Source Han Sans CN, Source Han Sans CN",
+      fontSize: 15,
+      fontWeight: 400,
+    },
   },
   grid: {
     left: "3%",
@@ -107,60 +154,402 @@ let option = {
     bottom: "3%",
     containLabel: true,
   },
-  toolbox: {
-    feature: {
-      saveAsImage: {},
-    },
-  },
   xAxis: {
     type: "category",
-    boundaryGap: false,
+    // boundaryGap: false,
-    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    data: [
-  },
+      "某某工作类型",
-  yAxis: {
+      "某某工作类型",
-    type: "value",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+      "某某工作类型",
+    ],
   },
+  yAxis: [
+    {
+      type: "value",
+      name: "数量",
+      nameTextStyle: {
+        //y轴上方单位的颜色
+        color: "#6C8097",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "rgb(139, 143, 147)",
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
   series: [
     {
-      name: "Email",
+      name: "待完成",
       type: "line",
-      stack: "Total",
+      data: [1, 4, 7, 4, 0, 4, 3, 1, 4, 7, 4, 0, 4, 3],
-      data: [120, 132, 101, 134, 90, 230, 210],
+      symbolSize: 10,
+      itemStyle: {
+        color: "#FFFFFF", // 折线点的颜色
+        shadowColor: "#fff",
+        shadowBlur: 15,
+        borderColor: "#aaa",
+      },
     },
     {
-      name: "Union Ads",
+      name: "已完成",
       type: "line",
-      stack: "Total",
+      data: [0, 3, 4, 1, 7, 0, 1, 0, 3, 4, 1, 7, 2, 1],
-      data: [220, 182, 191, 234, 290, 330, 310],
+      symbolSize: 10,
-    },
+      itemStyle: {
-    {
+        color: "#66E1DF", // 折线点的颜色
-      name: "Video Ads",
+        shadowColor: "#66E1DF",
-      type: "line",
+        shadowBlur: 15,
-      stack: "Total",
+        borderColor: "#66E1DF",
-      data: [150, 232, 201, 154, 190, 330, 410],
+      },
-    },
+      // itemStyle: {
-    {
+      //   color: "#66E1DF",
-      name: "Direct",
+      //   borderColor: "red",
-      type: "line",
+      //   borderWidth: 5,
-      stack: "Total",
+      //   shadowColor: "red",
-      data: [320, 332, 301, 334, 390, 330, 320],
+      //   shadowBlur: 10,
-    },
+      //   shadowOffsetY: 0,
-    {
+      //   shadowOffsetX: 0,
-      name: "Search Engine",
+      // },
-      type: "line",
-      stack: "Total",
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
     },
   ],
 };
 //工作类型折线图数据处理
 const getjobType = () => {
-  const airTenementChart = echarts.init(jobTypeTenementRef.value);
+  const tenementChart = echarts.init(tenementRef.value);
-  airTenementChart.setOption(option);
+  tenementChart.setOption(jobTypeOption, true);
 };
-onMounted(() => {
+// 村庄工作分析折线图
-  getjobType();
+let villageWorkOption = {
-});
+  tooltip: {
+    trigger: "axis",
+  },
+  legend: {
+    data: [],
+    top: "top",
+    left: "center",
+    orient: "horizontal",
+    itemWidth: 15,
+    itemHeight: 15,
+    itemGap: 15,
+    borderRadius: 0,
+    textStyle: {
+      color: "#D0DEEE",
+      fontFamily: "Source Han Sans CN, Source Han Sans CN",
+      fontSize: 12,
+      fontWeight: 400,
+    },
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "0%",
+    top: "20%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: " 已办工作(个)",
+      nameTextStyle: {
+        //y轴上方单位的颜色
+        color: "#A4A6ABFF",
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "rgb(139, 143, 147)",
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "待完成",
+      type: "bar",
+      data: [1, 4, 7, 4, 0, 4],
+      symbolSize: 10,
+      barWidth: 35,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#003AFF00" },
+          { offset: 1, color: "#159AFF" },
+        ]),
+      },
+      label: {
+        show: true,
+        position: "top",
+        color: "#1799FC",
+      },
+    },
+  ],
+};
+//村庄工作分析折线图数据处理
+const getvillageWork = () => {
+  const tenementChart = echarts.init(tenementRef.value);
+  tenementChart.setOption(villageWorkOption, true);
+};
+//督办工作统计分析
+let supervisionWorkOption = {
+  tooltip: {
+    trigger: "axis",
+  },
+  legend: {
+    data: [],
+    top: "top",
+    left: "center",
+    orient: "horizontal",
+    itemWidth: 15,
+    itemHeight: 15,
+    itemGap: 15,
+    borderRadius: 0,
+    textStyle: {
+      color: "#D0DEEE",
+      fontFamily: "Source Han Sans CN, Source Han Sans CN",
+      fontSize: 12,
+      fontWeight: 400,
+    },
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "0%",
+    top: "20%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: " 已办工作(个)",
+      nameTextStyle: {
+        //y轴上方单位的颜色
+        color: "#A4A6ABFF",
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "rgb(139, 143, 147)",
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "待完成",
+      type: "bar",
+      data: [10, 25, 30, 20, 10, 30],
+      symbolSize: 10,
+      barWidth: 25,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#003AFF00" },
+          { offset: 1, color: "#159AFF" },
+        ]),
+      },
+      label: {
+        show: true,
+        position: "top",
+        color: "#1799FC",
+      },
+    },
+    {
+      name: "待完成",
+      type: "bar",
+      data: [5, 5, 5, 5, 5, 10],
+      symbolSize: 10,
+      barWidth: 25,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#CFCFCF00" },
+          { offset: 1, color: "#8A8A8AFF" },
+        ]),
+      },
+      label: {
+        show: true,
+        position: "top",
+        color: "#1799FC",
+      },
+    },
+  ],
+};
+//督办工作统计分析折线图数据处理
+const getsupervisionWork = () => {
+  const tenementChart = echarts.init(tenementRef.value);
+  tenementChart.setOption(supervisionWorkOption, true);
+};
+//调解分析
+let mediateOption = {
+  tooltip: {
+    trigger: "axis",
+  },
+  legend: {
+    data: [],
+    top: "top",
+    left: "center",
+    orient: "horizontal",
+    itemWidth: 15,
+    itemHeight: 15,
+    itemGap: 15,
+    borderRadius: 0,
+    textStyle: {
+      color: "#D0DEEE",
+      fontFamily: "Source Han Sans CN, Source Han Sans CN",
+      fontSize: 12,
+      fontWeight: 400,
+    },
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "0%",
+    top: "20%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: " 已办工作(个)",
+      nameTextStyle: {
+        //y轴上方单位的颜色
+        color: "#A4A6ABFF",
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#6C8097",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "rgb(139, 143, 147)",
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "待完成",
+      type: "bar",
+      data: [10, 25, 30, 20, 10, 30],
+      symbolSize: 10,
+      barWidth: 25,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#003AFF00" },
+          { offset: 1, color: "#159AFF" },
+        ]),
+      },
+      label: {
+        show: true,
+        position: "top",
+        color: "#1799FC",
+      },
+    },
+    {
+      name: "待完成",
+      type: "bar",
+      data: [5, 5, 5, 5, 5, 30],
+      symbolSize: 10,
+      barWidth: 25,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#DBDBDBFF" },
+          { offset: 0.01, color: "#DBDBDBFF" },
+          { offset: 0.01, color: "#CFCFCF00" },
+          { offset: 1, color: "#8A8A8AFF" },
+        ]),
+      },
+      label: {
+        show: true,
+        position: "top",
+        color: "#1799FC",
+      },
+    },
+  ],
+};
+//调解分析折线图数据处理
+const getmediate = () => {
+  const tenementChart = echarts.init(tenementRef.value);
+  tenementChart.setOption(mediateOption, true);
+};
+onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
@@ -229,9 +618,10 @@ onMounted(() => {
   flex: 1;
   height: 180px;
   position: relative;
+
   .container {
     flex: 1;
-    width: 170px;
+    width: 540px;
     margin-top: -10px;
     height: 200px;
   }
@@ -275,6 +665,26 @@ onMounted(() => {
     height: 165px;
   }
 }
+.chartBody {
+  position: relative;
+}
+.screenTime {
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  font-size: 15px;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  color: #d0deee;
+  display: flex;
+  align-items: center;
+  > img {
+    width: 15px;
+    height: 14px;
+    margin-left: 6px;
+  }
+}
 </style>
 <style>
 .work_tip {