123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357 |
- <template>
- <div class="main-contain">
- <div class="position">
- <bread-crumb :crumbs="crumbs"></bread-crumb>
- </div>
- <div class="app-container">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="按时间分组" name="first"></el-tab-pane>
- <el-tab-pane label="按项目分组" name="second"></el-tab-pane>
- </el-tabs>
- <div class="cell clearfix">
- <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- <el-select v-model="type" placeholder="请选择" @change="chooseType" style="margin-right:20px">
- <el-option
- v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- <div v-if="type == '自定义'">
- <label class="title">
- <span class="name">日期查询</span> :
- </label>
- <el-date-picker
- v-model="listQuery.start_time"
- prefix-icon="el-icon-date"
- @change="changeTime"
- :editable="false"
- style="width: 196px;"
- type="date"
- placeholder="选择日期时间"
- align="right"
- format="yyyy-MM-dd"
- value-format="yyyy-MM-dd"
- ></el-date-picker>
- <span class>-</span>
- <el-date-picker
- v-model="listQuery.end_time"
- prefix-icon="el-icon-date"
- @change="changeEndTime"
- :editable="false"
- style="width: 196px;"
- type="date"
- placeholder="选择日期时间"
- align="right"
- format="yyyy-MM-dd"
- value-format="yyyy-MM-dd"
- ></el-date-picker>
- </div>
- </div>
- <div class="cell clearfix">
- <div class="time newLi" v-if="type == '按季度对比统计'">
- <ul class>
- <li
- :class="item.state == quarterType ? 'active' : ''"
- @click="chooseQuarter(item.state)"
- v-for="item in quarter"
- :key="item.value"
- >{{ item.label }}</li>
- </ul>
- </div>
- <div class="time newLi" v-if="type == '按月份对比统计'">
- <ul class>
- <li
- :class="item.state == monthType ? 'active' : ''"
- @click="chooseMonth(item.state)"
- v-for="item in month"
- :key="item.value"
- >{{ item.label }}</li>
- </ul>
- </div>
- </div>
- <div class="cell clearfix">
- <p class="chartTitle">统计图</p>
- </div>
- <div>
- <line-chart :options="chart"></line-chart>
- </div>
- <div class="cell clearfix">
- <p class="point"></p>
- <p class="pointTitle">指标正常范围值</p>
- </div>
- <div class="cell clearfix newDisplay">
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- <span class="index">钙(2.25-2.75)</span>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import echarts from "echarts";
- import { GetOICData } from "@/api/qcd";
- import LineChart from "../../qcd/components/LineChart";
- import { uParseTime } from "@/utils/tools";
- import BreadCrumb from "@/xt_pages/components/bread-crumb";
- export default {
- components: {
- LineChart,
- BreadCrumb
- },
- data() {
- return {
- activeName: "first",
- crumbs: [
- { path: false, name: "科室质控" },
- { path: false, name: "科室质控达标统计" },
- { path: false, name: "按时间分组" }
- ],
- listQuery: {
- start_time: "",
- end_time: "",
- page: 1,
- limit: 10
- },
- options: [
- {
- value: "选项1",
- label: "黄金糕"
- },
- {
- value: "选项2",
- label: "双皮奶"
- },
- {
- value: "选项3",
- label: "蚵仔煎"
- },
- {
- value: "选项4",
- label: "龙须面"
- },
- {
- value: "选项5",
- label: "北京烤鸭"
- }
- ],
- value: "请选项",
- options1: [
- {
- value: "按季度对比统计",
- label: "按季度对比统计"
- },
- {
- value: "按月份对比统计",
- label: "按月份对比统计"
- },
- {
- value: "自定义",
- label: "自定义"
- }
- ],
- type: "按季度对比统计",
- quarter: [
- { value: 0, label: "第一季度", state: 0 },
- { value: 1, label: "第二季度", state: 1 },
- { value: 2, label: "第三季度", state: 2 },
- { value: 3, label: "第四季度", state: 3 }
- ],
- quarterType: 0,
- month: [
- { value: 0, label: "一月", state: 0 },
- { value: 1, label: "二月", state: 1 },
- { value: 2, label: "三月", state: 2 },
- { value: 3, label: "四月", state: 3 },
- { value: 4, label: "五月", state: 4 },
- { value: 5, label: "六月", state: 5 },
- { value: 6, label: "七月", state: 6 },
- { value: 7, label: "八月", state: 7 },
- { value: 8, label: "九月", state: 8 },
- { value: 9, label: "十月", state: 9 },
- { value: 10, label: "十一月", state: 10 },
- { value: 11, label: "十二月", state: 11 }
- ],
- monthType: 0,
- chart: {
- title: {
- text: "ECharts 入门示例"
- },
- tooltip: {},
- legend: {
- data: ["次数"],
- left: 0
- },
- xAxis: {
- data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
- },
- yAxis: {
- axisLabel: {
- formatter: "{value} %"
- },
- show: false
- },
- series: [
- {
- name: "次数",
- type: "bar",
- data: [
- "78.57",
- "50",
- "80",
- "93.33",
- "92.86",
- "100",
- "12",
- "77",
- "37"
- ],
- barWidth: 30,
- label: {
- normal: {
- show: true,
- position: "top",
- formatter: "{c}次"
- }
- },
- //配置样式
- itemStyle: {
- //通常情况下:
-
- //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
- normal: {
- color: function(params) {
- //我这边就两个柱子,大体就两个柱子颜色渐变,所以数组只有两个值,多个颜色就多个值
- var colorList = [
- ["#A9E0F3", "#9FBDFC"],
- ["#A9E0F3", "#9FBDFC"],
- ["#A9E0F3", "#9FBDFC"],
-
- ["#FFD7C0", "#FF9994"],
- ["#FFD7C0", "#FF9994"],
- ["#FFD7C0", "#FF9994"],
- ["#D7C3FD", "#B3A8F7"],
- ["#D7C3FD", "#B3A8F7"],
- ["#D7C3FD", "#B3A8F7"]
- ];
-
- var index = params.dataIndex;
- if (params.dataIndex >= colorList.length) {
- index = params.dataIndex % colorList.length;
- }
-
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: colorList[index][0] },
- // { offset: 0.5, color: colorList[index][1] },
- { offset: 1, color: colorList[index][1] }
- ]);
- },
- barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
- },
-
- //鼠标悬停时:
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)"
- }
- }
- }
- ]
- }
- };
- },
- methods: {
- handleClick() {
- if (this.activeName == "second") {
- this.$router.push({ path: "/qcd/officesControlAnalysis/project" });
- }
- },
- changeTime() {},
- changeEndTime(val) {
- var time =
- this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
- if (time < 0) {
- this.$message.error("结束时间不能小于开始时间");
- this.listQuery.end_time = "";
- } else {
- }
- },
- selectLapseTo(state) {
- this.stateType = state;
- this.listQuery.state = state;
- },
- chooseType(val) {
- console.log(val);
- this.type = val;
- },
- chooseQuarter(quarter) {
- this.quarterType = quarter;
- },
- chooseMonth(month) {
- this.monthType = month;
- }
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .newLi {
- li {
- background: #f5f5f6;
- }
- }
- .chartTitle {
- font-size: 16px;
- font-weight: bold;
- color: #000000;
- }
- .point {
- width: 13px;
- height: 13px;
- background: linear-gradient(
- 0deg,
- rgba(169, 224, 243, 1),
- rgba(159, 189, 252, 1)
- );
- border-radius: 7px;
- margin-right: 8px;
- }
- .pointTitle {
- font-size: 13px;
- }
- .index {
- color: #a09ba3;
- font-size: 13px;
- margin-right: 36px;
- margin-bottom: 20px;
- }
- .newDisplay {
- flex-wrap: wrap;
- }
- </style>
|